nginxはアクセスプレフィックスを追加するようにvueプロジェクトを構成します

序文

最近SASSシステムを開発しているのですが、本来の単体サービスではソフトウェアを販売するたびに環境を導入する必要があり、運用保守の人員が少々大変になっています。本製品は、運用保守の手間を軽減するためにSASSに対応しています。

要件を実現する

機能の実装後は、テナントごとに独自のテナント アクセス アドレスを設定する必要がありますが、実際、最後のポイントはサービスとページのセットです。

実現された要件: 次のアドレスにアクセスします:
http://192.168.0.118:38888/current_juser

実際、これは理解するのが簡単で、バックグラウンドによってマッピングされたフロントエンド ページのアドレスは、上記のように IP+ポートです http://192.168.0.118:38888

次に、 current_juser を後ろに追加してバックエンド ページにアクセスしたいと思います。

Nginx 設定アクセス フロントエンド

正しく設定された

   server {
        listen       38888;
        server_name  localhost;
        location /current_juser{
          alias  /home/deploy/operate/dist/;
          index  index.html index.htm;
        }
        location ~.*(js|css|png|gif|jpg|mp3|ogg)$ {
          root /home/deploy/operate/dist/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }   

以上が正しい構成ですが、次に注意点を見ていきましょう。

注意点

ここに画像の説明を挿入
上の図では、2 つの赤いボックスにコンテンツが表示されています。具体的なコンテンツを見てみましょう。

別名の意味

Nginxではファイルパスの指定方法にルートとエイリアスの2種類があり、両者の使い方の違いはURIの処理方法の違いです。

エイリアスについて話したい場合は、彼とルートの違いについて話さなければなりません。
1. エイリアスはディレクトリのエイリアスの定義であり、ルートはトップレベルのディレクトリの定義です。
2. もう 1 つの重要な違いは、エイリアスが「/」で終わる必要があることです。そうしないとファイルが見つかりません。そしてrootは必須です。

栗をあげる

エイリアス:

location /testAlias/{
	alias /tools/nginx/html/admin/;
}

この設定は、/testAlias/ ディレクトリ内のファイルにアクセスするときに、ningx が自動的に /tools/nginx/html/admin ディレクトリに移動してファイルを検索することを意味します。

根:

location /testRoot/ {
	root /tools/nginx/html/admin;
}

#この設定に従った場合、testRoot/ ディレクトリ内のファイルにアクセスするときに、nginx は /tools/nginx/html/admin/testRoot に移動してファイルを検索します。

静的ファイル、js、およびその他の 404 エラー

2 番目の赤いボックスは、この 404 問題の解決に役立ちます。この情報を設定しないと、js や css などの静的ファイルで 404 が発生し、ページを正常に開くことができなくなります。

次のように、設定されていない場合のエラー メッセージを見てみましょう。

ここに画像の説明を挿入
右側のIPにマウスを置くと、エラーメッセージが表示され、ページアクセスのフルパスが表示されます。このファイルが見つからないことを示すメッセージが表示されます。

赤いボックスに設定を追加すると、location は、js、png、css などで終わるファイルにアクセスする場合、アクセス パスの前に root を追加する必要があることを示します。

このルートは実際には、Web ページ上の http://192.168.0.118:38888 を置き換えます。この場所が追加された場合、Web ページは http://192.168.0.118:38888/xxx/xxx/xxx.js にアクセスします。このパスを使用すると、ファイルの末尾がこの場所に一致する js であるため、Web ページにアクセスされます。

root+[一致するパス]、つまり /home/deploy/operate/dist/xxx.js なので、ファイルが見つかります。

皆さん、下のカードをクリックして「コーダー研修生」に注目してください。

おすすめ

転載: blog.csdn.net/ybb_ymm/article/details/131431257