nginx で反応プロジェクトをデプロイする方法

テスト項目のreact-demo

react-demoプロジェクトのクローンをサーバーに作成します(デフォルトでは、プロジェクトの管理にGithubが使用されます)

必要に応じて「いいね!」 、node.js、yarnなどのプロジェクト環境をインストールしてください。

プロジェクト ディレクトリを入力し、npm を実行してビルドを実行し、プロジェクトのビルドを開始します。

ビルドが成功すると、(プロジェクトの構成に応じて) dist フォルダーが生成されます。このフォルダー内のファイル このファイルは、プロジェクトのアクセス ファイルになります。

Nginx、Linux サーバーを構成するには、/etc/nginx/sites-enabled と入力し、管理者として、react プロジェクトの新しい構成ファイル (react-demo.conf など) を作成し、ファイルを編集します。 :

server{

listen8080

# サーバー _ .domain.com;

root/home/root/react-demo/dist ; に名前を付けます。

indexindex.htmlindex.htm;

location/

try _ files $ uri $ uri//index .html;

}

location^~/assets/{

gzip _ staticon

expiresmax

add _ header Cache-control public;

}

error _ page 500502503504/500 .html；

client _ max _ body _ size20M

keepalive _ timeout10

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

アクセス プロジェクト、http://IP:8080/

注:

1. ドメイン名を構成する場合、80 個のポートが必要です。成功したら、ドメイン名にアクセスしてプロジェクト

2 にアクセスするだけです。React Router のブラウザ ストーリー モードを使用している場合は、次の設定を Nginx 設定に追加してください:

location/

try _ files $ uri $ uri//index . html;

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

以上がnginx で反応プロジェクトをデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。