nginx - nginx を使用して vue プロジェクトをローカル、プロキシ、および負荷分散にデプロイします

この記事では、nginx とリバースプロキシを使用してローカルにデプロイするパッケージ化された vue プロジェクトとインターフェイスの負荷分散を紹介します;
前提: パッケージ化された vue プロジェクトを準備し、nginx をインストールします。

1. 最初に nginx の
ダウンロードリンクをインストールします: http://nginx.org/en/download.html
次のようにバージョン 1.16.1 をインストールしました。
ここに画像の説明を挿入

その後、指定したフォルダに解凍し、ルートディレクトリにある nginx アイコンをダブルクリックしてhttp://localhost/にアクセスし、次のページが表示されたら、起動は成功です。

タスクマネージャーで起動が成功したかどうかを確認することもできます。

ここに画像の説明を挿入

2. vue プロジェクトをパッケージ化する
次のように、vue プロジェクトのルートディレクトリにある vue.config.js ファイルで publicPath パスを構成します。

module.exports = {
    
    
  outputDir:'video',    //打包后的文件夹名字及路径
  publicPath: '/video/', // 生产的项目名
  lintOnSave: false,
}

次に、npm run buildパッケージ完了すると、パッケージの後、ルートディレクトリにビデオファイルが置かれます。

ここに画像の説明を挿入

3. nginx 構成ファイルを変更する

In this step, you need to enter the conf/nginx.conf of nginx and add a new one 路径监听. このパスは、次のように、Vue プロジェクトがパッケージ化された後に保存されるローカル絶対パスに対応します。

3.1最初にnginx.confに入ります

ここに画像の説明を挿入

3.2構成ファイルに赤い線を引いたコンテンツを追加します。エイリアスは、ローカルにパッケージ化されたプロジェクトフォルダーに格納されているローカルパスに対応します。注: 場所 /video
/ のマッピングパスは、vue: "/video/" の publicPath に対応する必要があります。

ここに画像の説明を挿入
主なコードは次のとおりです。


        # 视频演示项目 http协议
        location /video/ {
            alias  D:/myProject/deployProject/video/;
            try_files $uri $uri/ /index.html last;
            index index.html index.htm;
        }

3.3展開にインターフェイスリクエストがある場合は、それが必要です设置反向代理和负载均衡。次のケースをよく見てください。

upstream serve_backend {
    
    
	ip_hash;
	server 192.168.11.68:20201;
	server 192.168.11.69:20201 weight=1 down;
	server 192.168.11.70:20201 weight=2;
	server 192.168.11.71:20201 weight=3 backup;
	server 192.168.11.72:20201 weight=1 max_fails=3 fail_timeout=30s;
}

説明します:

(1) down: 現在のサーバーが一時的に負荷に参加していないことを示します.
(2) weight: デフォルトは 1 です. 重みが大きいほど、負荷の重みが大きくなります.
(3) backup: 他のすべての非バックアップマシンがダウンまたはビジー状態の場合、バックアップマシンを要求します。したがって、このマシンは最もストレスが少ないでしょう。
(4) 上記の例では、192.168.11.72:20201 は失敗の最大数を 3、つまり最大 3 回に設定し、タイムアウト期間は 30 秒です (max_fails のデフォルト値は 1 で、 fail_timeout のデフォルト値は 10 秒です。)
( 5 upstream)serverそれらが 1 つしかない場合、max_fails 和 fail_timeoutパラメーターが機能しない可能性があることに注意してください; weight\backup を ip_hash キーワードと一緒に使用することはできません。(6) 最後に、アップストリーム名に対応する、
負荷分散を使用する必要があるサーバーに http://serve_backend/ を追加します。nginx.conf のサーブモジュール構成は次のとおりです。proxy_pass

nginx.conf のサーブモジュール構成は次のとおりです。

http {
    
    
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    
    # 在这里 设置负载均衡
    # 上面有讲解 
    upstream serve_backend{
    
    
		ip_hash;
		server 192.168.11.68:20201;
		server 192.168.11.69:20201 weight=1 down;
		server 192.168.11.70:20201 weight=2;
		server 192.168.11.71:20201 weight=3 backup;
		server 192.168.11.72:20201 weight=1 max_fails=3 fail_timeout=30s;
	}

    server {
    
    
        listen       80;
        server_name  localhost;
        location / {
    
    
            root   html;
            index  index.html index.htm;
        }

        # 视频演示项目 http协议
        location /video/ {
    
    
            alias  D:/myProject/deployProject/video/;
            try_files $uri $uri/ /index.html last;
            index index.html index.htm;
        }
        
        # 在这里设置反向代理
        # wxserver 是需要代理的标志
        location /wxserver/ {
    
    
            proxy_pass http://serve_backend/;
            # 启用keep alive
            proxy_http_version 1.1;
            proxy_set_header Connection "";

            # 获取 xforward和真实IP
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header  Host $host;
        }
        
        
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
    
    
            root   html;
        }
    }

4. nginx の再起動
インターフェイスに関するリクエストがなければ、ステップ 3.3 を設定する必要はありません; 設定が完了したら、タスクマネージャーですべての nginx プロセスを終了する必要があります。 nginx アイコンをクリックして nginx を再起動します。

5. プロジェクトパスを再検討する

次に、ローカルプロジェクトパスに再度アクセスします。http://localhost/video/login
/videoこれは、nginx プロキシからローカルへのマッピングであり、
/loginvue プロジェクトのエントリルートであり、必要です。
後でプロジェクトに入り、使用されるインターフェイスもプロキシされます。

次のように: 展開が成功しました。

ここに画像の説明を挿入

nginx - nginx を使用して vue プロジェクトをローカル、プロキシ、および負荷分散にデプロイします

おすすめ