序文
またまた勉強になったので以下のように記録しました。
1.nginxをダウンロードする
nginx 公式 Web サイトにアクセスして直接ダウンロードします: http://nginx.org/en/download.html
安定したバージョンを選択します。ここではデモのために Windows を選択します。
ダウンロードが完了したら、解凍してnginx-1.24.0フォルダに入ると、nginx ディレクトリは次のとおりです。
主なファイル ディレクトリは次のように紹介されます。
conf: nginx のいくつかの設定ファイル
html: フロントエンドのパッケージング ファイルは主にここに配置されます
logs: ログ ファイルの保存ディレクトリ
nginx.exe: nginx の起動に使用されるプログラム
nginxを起動して正常に使えるかテストしてみますので、ダブルクリックして実行してみましょう。ただし、このプログラムは点滅するだけであまりフレンドリーではないため、ここではコマンド ラインから起動します。
nginx.exe図に示すように、コマンド ラインからディレクトリを入力します。
cmd コマンド ライン インターフェイスを入力します。
コマンドを入力して nginx を起動します。
start nginx
図に示すように、エラーは報告されず、起動が成功したことを示します。
ブラウザに入力するlocalhostと、次のページが表示され、正常に起動できることがわかります。
2. 同じ nginx を使用して複数のプロジェクトをデプロイする
ここでは最も単純な 2 ページのみを示していますが、複雑なプロジェクトの展開プロセスも同様です。
3.空白ページ問題
記事アドレス：https://blog.csdn.net/qq_42071369/article/details/128379046
構成のこの部分を見てください。
3. ページ更新 404 問題
実際には、上記の記事で既に言及されています。次の文を追加するだけです。具体的なパスはプロジェクト自体によって異なります。
try_files $uri $uri/ /xxxxx/index.html; #解决刷新404
4. vite.config.jsで設定した場合、クロスドメインプロキシがバックエンドインターフェイスにアクセスできない問題
クロスドメインの設定方法と vite.config.js の説明は、この記事をお読みください: https://blog.csdn.net/weixin_45750972/article/details/127223955
nginx.conf の構成については、この記事を参照してください: https://www.cnblogs.com/dengsheng/p/16778586.html
ここで注意すべき点は、/api とバックエンド アドレスが最後に追加されるかどうかは、プロジェクトが追加されているかどうかによって異なります。
設定ファイルに / を追加する必要はありません。アクセスできない場合は、追加または削除して、行ったり来たりしてみてください。
知らせ
ページ内にセカンダリ ルートがある場合、それを構成ファイルで使用してはならずroot、必ず使用する必要がありますalias。
最後に、構成ファイルは次のとおりです。
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# 这个代理和项目无关
location / {
root html;
index index.html index.htm;
}
# 代理自己的项目
location /cees-client {
alias html/cees-client;
index index.html;
# autoindex on;
try_files $uri $uri/ /cees-client/index.html; #解决刷新404
}
# 配置代理vite中的跨域
location /client {
proxy_pass http://43.136.31.72:7804;
}
}