はじめに
、使用することは簡単、カタログに集中する必要があります。
nginx filesディレクトリでは、次のことに注意する必要があります:
- html 公開されたフロントエンドパッケージを、例えば exampleWeb フォルダに置き、エントリーファイルを index.htmlとします;
- confは nginxの設定フォルダで、中にある nginx.conf ファイルを手動で設定する必要があります;
- logs は nginx 起動時のログで、 nginx.pid ファイルは起動成功後に表示され、エラーメッセージはerror.logに表示されます;
- nginx.exe 言うまでもなくダブルクリックで起動します。
#nginx の設定.conf
イメージを見てみましょう
worker_processes 1;
nginx.conf # はコメント文字です
events {
worker_connections 1024;
}
デフォルトは
テーマの内容は、大まかに次のブロックに分かれています httpブロック -> サーバーブロック -> ロケーションブロック; httpのみ下位は、複数のサーバーブロックを持つことができ、各サーバーブロックは、複数の場所ブロックを持つことができます。
各サーバーは1つのポートをリッスンすることができます。例えば、listen 8082;をリッスンすると、IP:8082のurlはこのサーバーモジュールに行きます。
- htmlのnginxディレクトリにVueのフロントエンドパッケージディレクトリ "pc "を置き、バックエンドサービスをマシンのポート5000にデプロイしているからです。そのため、Webリソースファイルをプロキシする場所と、クロスドメインリクエストをプロキシする場所の少なくとも2つを設定する必要があります。
- 最初のプロキシリソースファイルは、直接
location / { root html/pc;index index.html index.htm }
rootはhtml/pcのようなウェブのアクセスディレクトリで、nginxのデフォルトはnginx.exeがあるディレクトリから開始します。私はデフォルトのものをそのまま使い、通常は変更しません。つまり、index.html index.htmです。
- プロジェクトは、フロントとバックの分離モード、Webのリリースポートを使用しているため、2番目のプロキシクロスドメインの要求は、バックエンドのサービスのリリースポートが異なっている、クロスドメインの問題が発生します。だから、通常のリソースの要求やインターフェイスの要求を区別するために、nginxのプロキシ転送を必要とする、フロントエンドは、一般的にapiインターフェイスの接頭辞を設定し、プロジェクトは、名前のapiを直接使用。すべてのバックグラウンドインターフェイス要求のURLは、ブラウザが発行され、ip:8082/api/getxxxになります!
proxy_pass "http://ip:5000"/ #を付けるか付けないかで違いが出る。この記事では/を付けることにする。ipやportの末尾にスラッシュをつけるとurlが書き換わる。
このようにすると、リクエストURLであるip:8082/api/getxxxが nginx公式サイトのダウンロードなり 、バックエンドインターフェースへのアクセスが成功します。 保存して終了し、nginxを再起動すると、ウェブプロジェクトが正常に公開されます。ip:8082経由でアクセスできます。
以下は、プロキシアドレスのスラッシュ / の有無の違いです。
最初のグループ
location /api/ {
proxy_pass "http://...1:5000"/; # この記事ではスラッシュ
}
末尾にスラッシュを付けると、urlの/api/が書き換えられる。,
オリジナルの ip:8082/api/getxxx -> "http://...1:5000"/getxxx
/api/ で置き換えられる
2つ目のグループ
location /api/ {
proxy_pass "http://...1:5000"; #は最初のセットの末尾よりスラッシュが1つ少ない /...
}
末尾に/を付けないとurlを書き換えない
オリジナルの ip:8082/api/getxxx -> "http://...1:5000"/api/getxxx
第3グループ
location /api/ {
proxy_pass "http://...1:5000"/BASE/; #もう1つのパス
}
オリジナルのip:8082/api/getxxx -> "http://...1:5000"/BASE/getxxx
BASE/が追加された場合、/api/は/BASE/によって上書きされる。
location /api/ {
proxy_pass "http://...1:5000"/BASE; #パスが1つ増えるが、スラッシュが1つ減る
}
オリジナルのip:8082/api/getxxx -> "http://...1:5000"/BASEgetxxx
BASEを追加するだけで、/api/は/BASEに書き換えられる。
この書き方は特に注意が必要だ!
同じプロジェクトエージェントのバックオフィスの住所
上記のプロキシルールの3つ目のセットに基づいて、1つのプロジェクトに対して複数のバックエンドサービスのアドレスをプロキシすることができます。
server {
listen 8082;
server_name localhost;
location / {
root html/pc;
index index.html index.htm;
}
location /api/base/ {
proxy_pass "http://...1:5000"/base/;
}
location /api/biz/ {
proxy_pass "http://...1:5000"/biz/;
}
#ここでは、別のサーバーのメソッドを呼び出している。
location /api/sign/ {
proxy_pass "http://...xxx:8190"/sign/;
}
}
また、フロントエンドはvueで開発されているため、vue.config.jsで開発環境のプロキシを上記のプロキシと一致するように設定しました。
devServer: {
// development server port 8000
port: 8000,
proxy: {
'/api/biz': {
target: '"http://localhost:5000"',
pathRewrite: { '^/api/biz': '/biz' }
// もし/api/biz/と書いたら、代わりに/biz/と書く。
// とにかく、最後のスラッシュに気をつけよう
},
'/api/base': {
target: '"http://localhost:5000"',
pathRewrite: { '^/api/base': '/base' }
},
'/api/sign/': {
target: '"http://...xxx:8190"',
pathRewrite: { '^/api/sign': '/sign' }
}
}
}
nginx 共通コマンド
具体的なコマンドを列挙するつもりはないので、公式マニュアルを確認してください。ここでは、私がよく使うコマンドを記録しておきます。
nginx -s reopen #Nginxの再起動
nginx -s reload #Nginxコンフィギュレーションファイルをリロードします。
nginx -s quit #全てのリクエストが処理されたらサービスを停止します
nginx -s stop #Nginxサービスを強制的に停止します。
nginx -t #設定ファイルに構文エラーがないかテストして終了
nginx -?,-h #ヘルプメッセージを開く
nginx -v #バージョン情報を表示して終了します。