DockerでVueプロジェクトをデプロイする方法を教えます

1.前面に書きます:

軽量仮想化テクノロジーとして、Docker には継続的インテグレーション、バージョン管理、移植性、分離性、セキュリティなどの利点があります。この記事では、Docker を使用して Vue フロントエンドアプリケーションをデプロイし、同様のニーズを持つ学生が参照しやすいように、実装のアイデアと具体的な手順をできるだけ詳しく説明します。

Docker は、開発者がアプリケーションと依存パッケージをポータブルコンテナにパッケージ化できるようにするオープンソースのアプリケーションコンテナエンジンです。コンテナには、アプリケーションコード、ランタイム環境、依存ライブラリ、構成ファイル、その他の必要なリソースが含まれます。コンテナを使用すると、便利で高速、かつプラットフォームから切り離された自動展開方法を実装できます。展開時の環境が何であっても、コンテナ内のアプリケーションは同じ環境で実行されます。（詳細はDockerの公式サイトをご覧ください）

Docker と @vue/cli はデフォルトでインストールされます。

関連画像:

nginx:最新
ノード:最新

2. 具体的な実施内容：

vue cli を使用して vue プロジェクトを作成し、作成したプロジェクトを変更し、ページにフロントエンドインターフェイス要求を書き込み、オンラインリソースのバージョンをビルドし、nginx docker イメージに基づいてフロントエンドエンジニアリングイメージをビルドしてから、このフロントエンドエンジニアリングイメージに基づいてコンテナー vuenginxcontainer を起動します。
バックエンドインターフェイスを提供するために、ノードイメージに基づいてコンテナ nodewebserver を起動します。
vuenginxcontainer の nginx 設定を変更して、フロントエンドページのインターフェース要求を nodewebserver に転送します。
マイナーな最適化と改善。

3. Vueアプリケーションを作成する

3.1 vue cliはvueプロジェクトを作成します

コマンドの実行

糸サーブ / npm 実行サーブ

http://localhost:8081 にアクセスしてください

3.2 書き直し

ページを少し書き直し、App.vue の HelloWorld コンポーネントに渡されるメッセージを Hello Docker に変更し、作成されたライフサイクルにインターフェースリクエストを追加します。

'axios' から axios をインポートします。

…

axios.get('/api/json', {
 パラメータ: {}
}）。それから（
 解像度 => {
 コンソールログ(res);
 }
）。キャッチ（
 エラー => {
  コンソール.log(エラー);
 }
）

…

このとき、ページコンソールにエラーメッセージが表示されます。

/api/json インターフェース 404。もちろん、現時点ではこのインターフェースは存在しません。とりあえずここに書いて、後でこのインターフェースを呼び出します。

3.3 Vueプロジェクトの構築

コマンドの実行

糸ビルド / npm 実行ビルド

現時点では、プロジェクトのルートディレクトリに追加のdistがあります

フォルダ

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

次に、このような静的リソースサイトを構築してみましょう。

4 Vueアプリケーションイメージをビルドする

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

4.1 nginxイメージを取得する

docker プル nginx

dockerイメージ (Image) は特殊なファイルシステムです。 Docker イメージは、コンテナの実行に必要なプログラム、ライブラリ、リソース、構成、およびその他のファイルを提供するだけでなく、実行時に用意されたいくつかの構成パラメータ (匿名ボリューム、環境変数、ユーザーなど) も含む特別なファイルシステムです。イメージには動的なデータは含まれておらず、作成後にその内容は変更されません。
Docker イメージ関連の操作には、イメージの検索docker search [REPOSITORY[:TAG]] 、イメージのプルdocker pull [REPOSITORY[:TAG]] 、イメージリストの表示docker image ls 、イメージの削除: docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]]などがあります。
Docker イメージ名は REPOSITORY と TAG [REPOSITORY[:TAG]]で構成され、 TAG はデフォルトで最新になります。

4.2 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;
 }

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

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

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

4.3 Dockerfileを作成する

nginxから
dist/ /usr/share/nginx/html/ をコピーします。
nginx/default.conf をコピー /etc/nginx/conf.d/default.conf

イメージをカスタムビルドする場合は、Dockerfile に基づいてビルドされます。
FROM nginx コマンドは、イメージが nginx:latest イメージに基づいて構築されることを意味します。
COPY dist/ /usr/share/nginx/html/ コマンドは、プロジェクトルートディレクトリの dist フォルダー内のすべてのファイルをイメージ内の /usr/share/nginx/html/ ディレクトリにコピーすることを意味します。
COPY nginx/default.conf /etc/nginx/conf.d/default.conf コマンドは、nginx ディレクトリ内の default.conf を etc/nginx/conf.d/default.conf にコピーし、nginx イメージ内のデフォルト設定をローカルの default.conf 設定に置き換えることを意味します。

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

コマンドを実行します（最後の「.」がないことに注意してください）

コンテナをビルドします。

-tはイメージに名前を付けます.これは、現在のディレクトリにあるDockerfileに基づいてイメージを構築します。

ローカルイメージを表示し、コマンドを実行します

docker イメージ ls | grep vuenginxcontainer

この時点で、 vueアプリケーションイメージ vuenginxcontainer が正常に作成されました。次に、このイメージに基づいてdockerを起動します

容器。

4.5 vueアプリコンテナを起動する

Docker コンテナ: イメージの実行時のエンティティ。イメージとコンテナの関係は、オブジェクト指向プログラミングにおけるクラスとインスタンスの関係に似ています。イメージは静的な定義であり、コンテナはイメージの実行時のエンティティです。コンテナは作成、開始、停止、削除、一時停止などが可能です。

vuenginxcontainer イメージに基づいてコンテナを起動し、次のコマンドを実行します。

docker 実行 \
-p 3000:80 \
-d --name vueApp \
vuenginxコンテナ

docker runはイメージに基づいてコンテナを起動します
-p 3000:80 ポートマッピング、ホストのポート 3000 をコンテナのポート 80 にマッピングします
-d バックグラウンドモードで実行
--name docker プロセスを表示するコンテナ名

ドッカーps

vueApp という名前のコンテナがすでに実行されていることがわかります。 http://localhost:3000にアクセスしてください

vue アプリケーションにアクセスできるはずです:

これまで、静的リソースサービスがdockerコンテナーを通じてデプロイされ、静的リソースファイルにアクセスできるようになりました。 /api/json インターフェースにはまだデータがありません。次にこの問題を解決しましょう。

5 インターフェースサービス

インターフェースサービスを提供するために別のノードコンテナを展開する

5.1 エクスプレスサービス

Node Web Framework expressを使用してサービスを記述し、json データ形式を返すルート server.js を登録します。

'厳密な使用';

定数 express = require('express');

ポート = 8080;
定数HOST = '0.0.0.0';

express() は、定数です。
app.get('/', (req, res) => {
 res.send('Hello world\n');
});

app.get('/json', (req, res) => {
 res.json({
  コード: 0,
  データ:'これはノード コンテナからのメッセージです'
 })
});

app.listen(ポート、ホスト);
console.log(`http://${HOST}:${PORT} で実行中`);

expressアプリケーションを実行するにはnode環境が必要です。 nodeイメージに基づいて新しいイメージを構築します。

5.2 nodeイメージを取得する

docker プルノード

5.3 expressアプリケーションdockerためのDockerfileの作成

ノードから

ワークディレクトリ /usr/src/app

package*.json をコピーします。/

npmインストールを実行

コピー 。 。

エクスポーズ8080
CMD [ "npm", "start" ]

イメージをビルドするときに、 RUN npm installを通じて node_modules 依存関係が直接インストールされます。直接スキップされる一部のファイルを無視するには、プロジェクトに.dockerignoreファイルを作成します。

ノードモジュール
npm-debug.log

5.4 nodewebserverイメージのビルド

ビルドコマンドを実行します。

 ビルドを実行します。

5.5 ノードサーバーコンテナを起動する

先ほど構築したnodewebserverイメージに基づいて、nodeserverという名前のコンテナを起動し、インターフェースサービスポート8080を提供し、ホストのポート5000をマップします。

docker 実行 \
-p 5000:8080 \
-d --name ノードサーバー \
ノードウェブサーバー

現在のDockerプロセスを表示する

ドッカーps

nodeserverコンテナも正常に動作していることがわかります。 http://localhost:5000/jsonにアクセスしてください。

以前に書き込まれたJSONデータにアクセスできる

これまでのところ、バックエンドインターフェースサービスも正常に起動しています。ページ要求インターフェイスをバックエンドインターフェイスサービスに転送するだけで、インターフェイスを呼び出すことができます。

6. クロスドメイン転送

vueApp コンテナ上のリクエストを nodeserver コンテナに転送したい。まず、nodeserver コンテナのipアドレスとポートを知る必要があります。現在、nodeserver コンテナの内部サービスはポート 8080 でリッスンすることが分かっているので、 ipだけを知っておく必要があります。

6.1 ノードサーバーコンテナの IP アドレスを表示します。

コンテナの内部ipを表示する方法は多数あります。ここでは 2 つ紹介します。

表示するコンテナを入力してください

docker 実行 -it 02277acc3efc bash

/etc/hosts を cat する

コンテナ情報を直接表示するには、docker examine [ containerId ] を実行します。

docker 検査 02277acc3efc

ネットワーク関連の構成情報を見つけます。

nginx 転送を構成するときに使用する、ノードサービスコンテナーに対応する IP アドレスを記録します。

6.2 nginxの設定を変更する

Nginx は、ノードサービスの default.conf を指すように場所を設定します (Nginx について詳しく知りたいフロントエンドユーザーの場合は、Nginx の設定と場所の詳細については、「(1 つの記事で Nginx の場所の一致を理解する)」を参照してください)。

/api/{path} をターゲットサービスの /{path} インターフェースにリダイレクトする書き換えルールを追加します。以前の nginx/default.conf ファイルに以下を追加します。

場所 /api/ {
 /api/(.*) /$1 を書き換えて、break;
 プロキシパス http://172.17.0.2:8080;
}

変更後、問題に気付きました。vueApp コンテナは vuenginxcontainer イメージに基づいて実行され、イメージが最初にビルドされたときに、nginx 構成の default.conf が直接組み込まれていました。したがって、default.conf を変更する必要がある場合は、新しいイメージを再構築し、新しいイメージに基づいて新しいコンテナを実行する必要があります。

7. 改善点

設定ファイルが変更されるたびにコンテナを再起動するだけで、新しい設定を有効にすることは可能ですか? 答えはもちろん「はい」です。

イメージをビルドするときに、Nginx 構成はイメージにコピーされず、ホストに直接マウントされます。構成を変更するたびに、コンテナを再起動するだけです。

7.1 Dockerfileを変更する

vueclidemoプロジェクトのDockerfileを変更する

nginxから
dist/ /usr/share/nginx/html/ をコピーします。
nginx/default.conf をコピー /etc/nginx/conf.d/default.conf

COPY nginx/default.conf /etc/nginx/conf.d/default.confコマンドを削除します。nginx 構成は、mount コマンドを通じてホストマシンにマウントされます。 COPY dist/ /usr/share/nginx/html/コマンドを見てみましょう。ビルドしたプロジェクトの dist/ 下の内容が毎回変わると、新しいイメージをビルドして、再度新しいコンテナを起動する必要があります。そのため、このコマンドは削除して、コンテナをマウントして起動することもできます。

7.2 Vueアプリケーションコンテナを再実行する

nginx イメージに基づいてコンテナ vuenginxnew を直接起動し、次のコマンドを実行します。

docker 実行 \
-p 3000:80 \
-d --name vuenginxnew \
--mount type=bind、source=$HOME/SelfWork/docker/vueclidemo/nginx、target=/etc/nginx/conf.d \ を実行します。
--mount type=bind、source=$HOME/SelfWork/docker/vueclidemo/dist、target=/usr/share/nginx/html \ を実行します。
nginx

--mount type=bind,source={sourceDir},target={targetDir}ホストの sourceDir をコンテナの targetDir ディレクトリにマウントします。
ここで実行するコマンドは長いです。毎回入力するのが面倒な場合は、完全なコマンドをshellファイルvueapp.shに保存し、 sh vueapp.shを直接実行することもできます。

この方法では、nginx の設定を変更したり、vue アプリケーションを再構築したりするたびに、コンテナを再起動するだけですぐに変更が有効になります。このとき、再度 http://localhost:3000/api/json にアクセスすると、インターフェースが正常に返されることがわかり、転送が有効になっていることがわかります。

この時点で、インターフェースサービスの転送も調整されています。

7.3 負荷分散の設定

バックエンドサービスは、サービスの安定性を確保するために、通常、デュアルマシンまたはマルチマシンで構成されます。別のバックエンドサービスコンテナーを起動し、 nginx構成を変更して、リソース使用率を最適化し、スループットを最大化し、レイテンシを削減し、フォールトトレラント構成を確保できます。

セクション4.5と同様の操作に基づいて新しいコンテナを起動し、セクション5.1と同様の操作に基づいて新しいコンテナのIPアドレス（172.17.0.3）を確認します。

nginx/default.confを変更します (アップストリームを追加し、/api/ の proxy_pass を変更します)。

 アップストリームバックエンド{
  サーバー 172.17.0.2:8080;
  サーバー 172.17.0.3:8080;
 }

 …

 場所 /api/ {
  /api/(.*) /$1 を書き換えて、break;
  proxy_pass バックエンド;
 }

8. 最後に書く

コマンドラインに慣れていない学生は、Kitematic を選択して、 dockerコンテナのステータス、データディレクトリ、ネットワークを管理できます。容量に関する操作はすべて視覚的に実行できるため、ここでは詳しく紹介しません。興味のある学生は自分で体験することができます。

9 結論

Docker は非常に強力な自動デプロイメント方法と柔軟性を提供し、複数のアプリケーションを分離し、開発の俊敏性、制御性、移植性を実現します。この記事では、Vue プロジェクトを例に、Docker を使用してフロントエンドとバックエンドが分離されたプロジェクトをデプロイする完全な手順を実装します。この記事が、Docker を導入したい学生の役に立つことを願っています。

参考文献

Docker公式サイト
nginx公式サイト
Docker入門から実践まで
Kitematic ユーザーガイド
フロントエンドがNginxについて知りたいこと
1 つの記事で Nginx のロケーションマッチングを理解する

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: