Nginx に React プロジェクトをデプロイする方法の例

テストプロジェクト: react-demo

1. react-demo プロジェクトをサーバーにクローンします (デフォルトでは Github がプロジェクトの管理に使用されます)
2. 必要に応じて、node.js、yarn などのプロジェクト環境をインストールしてください。
3. プロジェクトディレクトリに入り、npm run buildを実行してプロジェクトのビルドを開始します。
4. ビルドが成功すると、dist フォルダーが生成されます (プロジェクトの構成によって異なります)。このフォルダー内の静的ファイルは、プロジェクトのアクセス ファイルです。
5. Linux サーバーで Nginx を構成するには、/etc/nginx/sites-enabled に移動し、管理者として react プロジェクト用の新しい構成ファイル (react-demo.conf など) を作成し、ファイルを編集します。

サーバー{
  8080を聴く;
  # server_name your.domain.com;
  ルート /home/root/react-demo/dist;
  インデックス index.html index.htm;
  位置 / {
    try_files $uri $uri/ /index.html;
  }
  場所 ^~ /assets/ {
    gzip_static オン;
    有効期限が最大になります。
    add_header Cache-Control パブリック;
  }
  エラーページ 500 502 503 504 /500.html;
  クライアントの最大ボディサイズは20Mです。
  キープアライブタイムアウト10;
}

sudo service nginx restart を実行して、Nginx サービスを再起動します。

プロジェクトにアクセスするには、http://IP:8080/ にアクセスしてください。

注記：

1.ドメイン名を設定する場合は、ポート80が必要です。成功すると、ドメイン名にアクセスするだけでプロジェクトにアクセスできます。

2. React-Router の browserHistory モードを使用する場合は、Nginx 設定に次の設定を追加してください。

位置 / {
  try_files $uri $uri/ /index.html;
}

原則として、プロジェクトにはルート エントリが 1 つしかないため、/home のような URL を入力してもページは見つかりません。この場合、nginx は index.html を読み込もうとします。index.html を読み込んだ後、react-router が動作し、入力した /home ルートと一致し、正しいホームページが表示されます。browserHistory モードのプロジェクトが上記の内容で構成されていない場合、404 エラーが発生します。

react-router のドキュメントを参照してください:

https://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

要約する

以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。これについてもっと知りたい場合は、次のリンクをご覧ください。