ドッキングウィンドウnginxの+ VUEプロジェクトを展開

1.vueプロジェクトパッケージ

NPM実行ビルド

プロジェクトはdistのフォルダが生成されます、このフォルダはnginxのか、Tomcatサービスを公開するために使用することができます

nginxのベースイメージを見つけます

独自のベースイメージに合わせて、以下のウェブサイト上で見つけることができ、我々は、ベース画像ごとに、自分のイメージを構築するためにしばらく待っています。

https://hub.docker.com/

3.設定nginxの

プロジェクトのルートディレクトリの下に作成しnginx、新しいファイルフォルダをフォルダをdefault.conf（镜像里的配置文件为default.conf，自己安装的window或linux版配置文件为nginx.conf）

サーバー{ 
    聞く        80 。
    サーバー名はlocalhost。

    #charset KOI8 - R。
    access_log   / VAR / nginxの/ /ログインメインhost.access.log。
    error_logに   / VAR /ログ/ nginxの/ error.logにエラー。

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

    #error_page   404               / 404 の.html。

    位にサーバ・エラー・ページにリダイレクト静的ページ/ 50x.html 
    ＃1 
    error_page    500  502  503  504   / 50x.html。
    位置 = / 50x.html { 
        ルート   を/ usr / share / nginxの/ HTML。
    } 
}

4.書き込みDockerfileファイル

プロジェクトのルートディレクトリにDockerfileファイルを作成します

＃は、ベース画像を設定
nginxのFROM：1.16。1 - アルパイン
位に内容distのファイルをコピーを/ usr / share / nginxの/ HTML / ディレクトリの下
COPY DIST /を/ usr / share / nginxの/ HTML / 
＃ローカルでデフォルト.confのデフォルトの設定nginxのミラーを交換するように構成
COPY nginxの / デフォルトの.conf /etc/nginx/conf.d/ デフォルトの.conf

ミラーの5.建設

ドッキングウィンドウは、-tテスト-VUE-0.0.1をビルドします。

6.コンテナを開始

ドッキングウィンドウは、--nameテスト-VUE -p -d実行9005：80テストvue- 0.0。1

これは、ブラウザでアクセスすることができます

ドッキングウィンドウnginxの+ VUEプロジェクトを展開

おすすめ