Docker イメージ + nginx を使用して Vue プロジェクトをデプロイする方法

1. Vueプロジェクトのパッケージ化

開発されたvueプロジェクトに次の名前を入力し、パッケージ化してdistフォルダを生成します。

糸ビルド / npm 実行ビルド

この時点で、ルートディレクトリに追加のフォルダー (公開したい内容が含まれる dist フォルダー) が作成されます。

dist ディレクトリ全体をサーバーに転送し、静的リソースサイトとしてデプロイすると、プロジェクトに直接アクセスできます。

2. nginxイメージを取得する

nginx は、高性能な HTTP およびリバースプロキシサーバーです。ここでは、nginx イメージをベースとして使用して、vue アプリケーションイメージを構築します。

ターミナルに次のように入力します:

docker プル nginx

nginx イメージを取得できます。

Docker イメージは、コンテナの実行に必要なプログラム、ライブラリ、リソース、構成、およびその他のファイルを提供するだけでなく、実行時に用意されたいくつかの構成パラメータ (匿名ボリューム、環境変数、ユーザーなど) も含む特別なファイルシステムです。イメージには動的なデータは含まれておらず、作成後にその内容は変更されません。

ターミナルで次のコマンドを入力してnginxイメージを確認します。

dockerイメージls

ミラーリングの結果は次のようになります。

3. nginx config設定ファイルを作成する

プロジェクトのルートディレクトリにnginxフォルダを作成し、そのフォルダに新しいファイルdefault.confを作成します。

サーバー{
  聞く 80;
  server_name ローカルホスト;

  #文字セット koi8-r;
  access_log /var/log/nginx/host.access.log メイン;
  error_log /var/log/nginx/error.log エラー;

  位置 / {
    ルート /usr/share/nginx/html;
    インデックス index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  #エラーページ 404 /404.html;

  # サーバーのエラーページを静的ページ /50x.html にリダイレクトします
  #
  エラーページ 500 502 503 504 /50x.html;
  場所 = /50x.html {
    ルート /usr/share/nginx/html;
  }
}

注意⚠️: vue-router が履歴モードを使用している場合、 try_files $uri $uri/ /index.html; は非常に重要です。！！

私たちのアプリケーションはシングルページクライアントアプリケーションであるため、背景が正しく構成されていない場合、ユーザーがブラウザーでアドレスにアクセスしたときに 404 が返されます。

したがって、すべての状況をカバーするには、サーバー側で候補リソースを追加する必要があります。URL がどの静的リソースにも一致しない場合は、同じ index.html ページが返される必要があります。このページは、アプリが依存するページです。

上記のファイルはホームページを /usr/share/nginx/html/index.html として定義しているので、構築した index.html ファイルと関連する静的リソースを後で /usr/share/nginx/html ディレクトリに配置できます。

4. Dockerfileを作成する

# nginxからベースイメージを設定する
# 著者を定義します MAINTAINER lihui <[email protected]>
#distファイルの内容を/usr/share/nginx/html/ディレクトリにコピーします。COPY dist/ /usr/share/nginx/html/
#nginxイメージのデフォルト設定をローカルのdefault.conf設定に置き換えます。COPY nginx/default.conf /etc/nginx/conf.d/default.conf

5. Dockerfileに基づいてVueアプリケーションイメージを構築する

次のコマンドを実行し、最後の「.」を忘れないようにしてください。