cPanel に React.js をインストールする方法: ガイド 2024

公開: 2024-09-01
目次
  • 前提条件
  • ステップ 1: React.js アプリを準備する
  • ステップ 2: cPanel 環境をセットアップする
  • ステップ 3: サーバー設定を構成する
  • ステップ 4: 仕上げとテスト
  • トラブルシューティング
  • 結論

React.js は、動的でインタラクティブなユーザー インターフェイスを構築するための最も人気のある JavaScript ライブラリの 1 つになりました。 Node.js などのバックエンド フレームワークでよく使用されますが、多くの開発者は、Web ホスティング アカウントを管理するための一般的なコントロール パネルである cPanel を使用する共有ホスティング環境に React.js アプリケーションをデプロイしようとしています。

この記事では、ホスティング プロバイダーが特に JavaScript フレームワークに対応していない場合でも、cPanel を使用して React.js アプリケーションをインストールおよびデプロイするプロセスを説明します。

こちらもお読みください: React Apps 2024 のベスト ホスティング 7 (比較)

前提条件

インストールプロセスに入る前に、いくつかの前提条件を満たしている必要があります。

  1. すぐにデプロイできる React.js アプリケーション: React アプリが完成し、運用の準備ができていることを確認します。これは、すべての開発作業が完了し、ユーザーに提供できるバージョンのアプリを構築する準備ができたことを意味します。
  2. cPanel へのアクセス: Web ホスティング サービスによって提供される cPanel へのアクセスが必要です。ほとんどの共有ホスティングプロバイダーは、サービスの一部として cPanel を提供しています。（クーポンコード「 Codeless 」を使用した特別オファーがある Hostinger をお勧めします）
  3. ドメイン名: React アプリをデプロイする登録済みのドメインまたはサブドメイン。これをまだ設定していない場合は、既存のドメインを使用するか、cPanel を通じてサブドメインを作成できます。

ステップ 1: React.js アプリを準備する

本番ビルドの生成

React.js アプリケーションを cPanel にデプロイする最初のステップは、アプリの実稼働ビルドを作成することです。このビルドはパフォーマンスが最適化されており、Web 上で効率的に実行されます。次の手順はローカル コンピューターで実行する必要があります。

  1. ターミナルを開く: ターミナルまたはコマンド プロンプトを使用して React プロジェクト ディレクトリに移動します。
  2. ビルド コマンドを実行します: npm run build Yarn をパッケージ マネージャーとして使用している場合は、以下を使用します: yarn buildこのコマンドは、プロジェクト ディレクトリにbuildフォルダーを生成します。 buildフォルダーには、HTML、CSS、JavaScript ファイルなど、アプリケーションの実行に必要なすべての静的ファイルが含まれています。

ビルドをプレビューする (オプション)

デプロイする前に、運用ビルドをローカルでプレビューして、すべてが正しく機能していることを確認することをお勧めします。これは、単純なサーバー ツールを使用して行うことができます。

  1. Serve をグローバルにインストール: npm install -g serve
  2. ビルドの提供: serve -s buildこのコマンドはローカル サーバーを起動し、 buildディレクトリからアプリを提供し、ブラウザでプレビューできるようにします。

ステップ 2: cPanel 環境をセットアップする

React アプリをデプロイする準備ができたら、cPanel 環境を構成する必要があります。

サブドメインの作成 (オプション)

React アプリにサブドメイン ( react.yourdomain.comなど) 経由でアクセスできるようにしたい場合は、cPanel でサブドメインを作成する必要があります。

  1. cPanel にログイン: ホスティング プロバイダーのログイン ポータルを使用して cPanel にアクセスします。
  2. [サブドメイン] に移動します。 [ドメイン] セクションで、[サブドメイン] をクリックします。
  3. 新しいサブドメインの作成: サブドメインの希望の名前を入力し、ドキュメントのルート ディレクトリを指定します。デフォルト設定のままにすると、cPanel はサブドメインの名前でpublic_htmlの下に新しいディレクトリを作成します。

ビルドファイルをアップロードする

本番ビルドの準備ができたら、それをサーバーにアップロードできます。

  1. ファイル マネージャーにアクセスする: cPanel で、「ファイル」セクションの下にある「ファイル マネージャー」を見つけます。
  2. 目的のディレクトリに移動します: サブドメインを作成した場合は、対応するディレクトリ (例: public_html/react ) に移動します。メイン ドメインにデプロイしている場合は、 public_htmlディレクトリを使用します。
  3. ビルド フォルダーをアップロードします。
    • まず、ローカル マシン上のbuildフォルダーを ZIP ファイルに圧縮します。
    • ファイルマネージャーの「アップロード」ボタンを使用して、この ZIP ファイルを目的のディレクトリにアップロードします。
    • アップロードしたら、ファイルを右クリックし、「抽出」を選択してコンテンツを解凍します。

ステップ 3: サーバー設定を構成する

ビルド ファイルをアップロードした後、特に React アプリが React Router でクライアント側ルーティングを使用している場合は、いくつかのサーバー設定を構成する必要がある場合があります。

.htaccess のセットアップ (オプション)

アプリが HTML5 pushState履歴 API に依存する React Router を使用している場合、リクエストを正しく処理するようにサーバーを構成する必要があります。これは、ユーザーがホームページ以外のルートに直接移動できる場合に特に重要です。

  1. .htaccess を検索または作成します。
    • public_htmlまたはサブドメイン ディレクトリに.htaccessファイルがあるかどうかを確認します。
    • そうでない場合は、 .htaccessという名前の新しいファイルを作成します。
  2. ルーティング ルールを追加します。
    • .htaccessファイルを開き、次の構成を追加します:bashCopy code Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    この構成により、すべてのリクエストがindex.htmlファイルを介してルーティングされるようになります。これは、React で構築されたアプリケーションのようなシングルページ アプリケーションには不可欠です。

ステップ 4: 仕上げとテスト

すべてがアップロードされ構成されたら、次のステップは展開を完了し、すべてが期待どおりに動作していることを確認することです。

ファイル権限を確認する

ファイルとディレクトリに Web サーバーからアクセスできる適切な権限があることを確認してください。通常、ディレクトリのアクセス許可は755 、ファイルのアクセス許可は644に設定する必要があります。

展開をテストする

Web ブラウザでドメインまたはサブドメイン ( react.yourdomain.comなど) にアクセスし、React アプリがスムーズに実行されていることを確認します。すべてのページと機能をチェックして、すべてが正しく機能することを確認します。

問題が発生した場合は、ブラウザの開発者ツールが問題の診断に役立ちます。さらに、cPanel のエラー ログは、サーバー側の問題についての洞察を提供します。

トラブルシューティング

React アプリを cPanel にデプロイすると、問題が発生することがあります。よくある問題とその解決策をいくつか示します。

  • ルーティング エラー: アプリの別のページに移動すると 404 エラーが発生する場合は、 .htaccessファイルがクライアント側のルーティングを処理するように正しく構成されていることを確認してください。
  • ファイルが見つからないエラー: buildフォルダーのすべてのファイルが正しくアップロードされていること、およびそれらのファイルがサーバー上の正しいディレクトリに存在することを再確認します。
  • ファイルのアクセス許可が正しくありません: ファイルが読み込まれない場合は、ファイルのアクセス許可が正しく設定されていることを確認してください (ディレクトリの場合は755 、ファイルの場合は644 )。
  • キャッシュの問題: キャッシュが原因で変更がすぐに表示されない場合があります。ブラウザのキャッシュをクリアするか、シークレット モードでサイトにアクセスして、問題が解決しないかどうかを確認してください。

結論

React.js アプリケーションを cPanel でホストされるサーバーにデプロイすることは、特に Vercel や Netlify などのサービスを使用したより自動化されたデプロイメント プロセスに慣れている場合、または記事を参照してください: 2024 年のベスト Node.js ホスティング プロバイダー 10 社 (格安＆無料）。ただし、このガイドで概説されている手順に従うことで、React アプリを cPanel 上で正常に起動して実行できます。

このプロセスには、実稼働用の React アプリの準備、cPanel 環境のセットアップ、必要なサーバー設定の構成、および発生した問題のトラブルシューティングが含まれます。完了すると、React.js アプリケーションが稼働し、ドメインまたはサブドメインを通じて世界中からアクセスできるようになります。

経験を積むにつれて、バックエンド サービスの統合、継続的デプロイメント パイプラインの設定、パフォーマンスのさらなる最適化など、より高度なトピックを探索できるようになります。今のところは、React プロジェクトを世界と共有して楽しんでください。