Vue のパッケージ化とドメイン間でのデプロイメント

はじめに

プロジェクト開発では、使用するドメイン名がバックエンド インターフェイスのドメイン名と一致しないため、クロスドメインの問題が発生することがよくあります。開発環境では、プロキシを構成することでクロスドメインの問題を解決できますが、パッケージ化および展開後は、他の方法を使用してクロスドメインの問題を解決する必要があります。この記事では、vue-cli3 を使用してクロスドメインをパッケージ化してデプロイする方法を紹介します。

1. クロスオリジンとは

クロスオリジン リソース共有 (CORS) は、ブラウザーの同一オリジン ポリシーの制限であり、Web ページが他のソースからリソースを取得できないようにします。これは、2 つのページのプロトコル、ドメイン名、ポート番号がまったく同じであることを意味します。オリジナル以外のソース パスからリクエストが開始された場合、ブラウザはリクエストを拒否します。

2. vue-cli3 パッケージ化のいくつかのモード

vue-cli3 では、パッケージ化は 3 つのモードに分かれています:

1. テスト モード (build-test )
   テスト モードは、コードを開発環境で実行できるモードにパッケージ化し、ソースマップのデバッグ機能を自動的に有効にします。
2. ビルド モード (build-prod)
   ビルド モードはコードを圧縮して難読化するため、実稼働環境へのデプロイに適しています。
3. 生成およびプレビュー モード (サーブ)
   サーブ モードはコードをホット アップデートし、開発中のプレビューとテストに適したプレビュー サービスを提供します。

3. パッケージ化されたクロスドメイン ソリューション

パッケージ化され、クロスドメインにデプロイされる場合、クロスドメインの問題を解決するために、nginx を使用してリバース プロキシを実行する必要があります。

nginx は、Windows、Linux、Mac などのさまざまなオペレーティング システム上で実行できる高性能 Web サーバーです。非常に強力で、リバース プロキシ、ロード バランシング、キャッシュなどに使用できます。

1. nginx のインストール

Linux 環境では、次のコマンドを使用して nigix をインストールできます:

sudo apt-get update
sudo apt-get install nginx

2. Configure nginx

nginx をインストールした後、クロスドメインの問題を解決するために nginx を構成する必要があります。

まず、nginx 構成ファイルを見つける必要があります。通常、ファイルは /etc/nginx/conf.d/default.conf にあります。次のコマンドで nginx 構成ファイルを開きます:

sudo vim /etc/nginx/conf.d/default.conf

次に、次のようにサーバー セグメントを見つけます:

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        #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   /usr/share/nginx/html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ .php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ .php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /.ht {
        #    deny  all;
        #}
    }

たとえば、location セグメントの下にリバース プロキシを構成する必要があります:

location /api {
            proxy_pass http://192.168.0.100:8080; # 后端API地址
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_http_version 1.1;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
            proxy_send_timeout 600;
            proxy_buffer_size 64k;
            proxy_buffers 4 64k;
            proxy_busy_buffers_size 128k;
            proxy_temp_file_write_size 128k;
            # 解决跨域
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            # 缓存时间，单位秒。这里设置的是6小时
            expires 21600s;
            # 收到304响应后，再次请求的时间间隔
            proxy_cache_valid 200 304 12h;
        }

その中で、proxy_pass の後のアドレスは次のようになります。バックエンド API アドレスに変更すると、add_header がクロスドメインの問題を解決します。

3. vue.config.js 構成を変更する

vue-cli3 では、パッケージ化されたファイルがドメインに依存しないように vue.config.js の publicPath を構成できます。

module.exports = {
  publicPath: '',
  devServer: {
    // 设置跨域代理
    proxy: {
      '/api': {
        target: 'http://192.168.0.100:8080', // 后端API地址
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  chainWebpack: (config) => {
    config.optimization.delete('splitChunks');
  }
}

このうち、/api はバックエンド API アドレスのプレフィックスであり、ターゲット設定はバックエンド API アドレスです。

4. パッケージ化とデプロイメント

上記の構成後、vue プロジェクトをパッケージ化してデプロイできます。パッケージ化が完了したら、/dist ディレクトリ内のすべてのファイルを nginx 構成のルート ディレクトリ (通常は /usr/share/nginx/html) にコピーし、nginx サービスを再起動します。これまでのところ、vue-cli3 のパッケージ化とドメイン全体へのデプロイメントの実装に成功しています。

概要

この記事では、nginx リバース プロキシを使用して、vue-cli3 のパッケージ化とデプロイメントにおけるクロスドメインの問題を解決する方法を紹介します。上記の構成により、クロスドメインの問題を解決し、実稼働環境にデプロイできます。もちろん、nginx に対するユーザーのアクセス許可を有効にするなど、展開プロセス中にセキュリティの問題に注意を払う必要があります。もちろん、jsonp、websocket などの他の方法を使用してクロスドメインの問題を解決することもできます。

以上がVue のパッケージ化とドメイン間でのデプロイメントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。