I.はじめに
この記事では、ドッカーデプロイVueのプログラムを使用する方法について説明します。
第二に、nginxのインストール
私たちは、Vueのプログラムは、最新のnginxのとここミラーリング、Nginxは、最初の引きnginxのミラーリングに依存している展開します
ドッキングウィンドウプルnginxの
図に示すように。
私たちは鏡を見ます
nginxのは、ミラーリングされています。
私たちは、nginxのミラーに記載の容器を実行します
ドッキングウィンドウの実行--name = nginxの-d -p 4030：80 nginxの
図に示すように。
その後、容器が適切に動作していることを確認し、ブラウザ内で4030ポートを訪問
容器が正常に動作していることを示す表示されます上のスクリーンショット。
第三に、プログラムのVueを作成
プロジェクトを作成します。1.
私たちは、PowerShellを使用して、ここで作成したVueのプログラムを作成するには、次のコマンドを使用します
ビューは、ドッキングウィンドウビューを作成します
作成プロセスは、省略作成されます
使用VSCodeは、コマンドを実行し、プロジェクトを開きます
NPM実行はサーブ
図に示すように。
ブラウザでのアクセス
2.コンパイルプロジェクト
プロジェクトが作成された後、我々はプロジェクトをコンパイル
NPM実行ビルド
図に示すように。
翻訳が完了した後、プロジェクトのルートディレクトリにプロジェクトをコンパイルしているdistのフォルダを、生成されます。
3、Dockerfileファイルを追加
私たちは、ミラーを構築したい、我々はDockerfileファイルを依存しなければならない、我々は拡張子がない、プロジェクトのルートディレクトリにDockerfileファイルを作成し、ファイルの内容は次の通りです
＃設定ここでは、ベースイメージ、すでに上で引っ張ると、最新のnginxのミラーを使用して のnginx FROM エジソンの＃定義 MAINTAINERエジソン 位に内容distのファイルをコピーするの/ usr /シェア/ nginxの/ HTML / 下のディレクトリ COPYのDIST / / usr / share / nginxの/ HTML /
4、アップロードファイル
私たちは、VUEフォルダ内のLinuxデモフォルダの下に作成され、そのディレクトリDockerfileにdistのフォルダやファイルをアップロード
5、ミラー建設
ファイルのアップロード後、我々はミラーVueのプログラムを構築しました
ドッキングウィンドウのビルド-t dockervue。
図に示すように。
あなたは、イメージ構築の成功を見ることができます。
6、実行した容器
私たちは、ステップに従って構築されたミラーイメージを実行するために行ってきました
ドッキングウィンドウの実行--name = dockervue -d -p 9020：80 dockervue
図に示すように。
コンテナが実行して見ることができ、我々はブラウザ内で9020ポートを訪問しました
Vueがドッカーは、展開が成功した見ることができます使用しています。