Docker+daocloudはフロントエンドプロジェクトの自動構築とデプロイを実現します

自動プロジェクト展開は大企業やユニコーン企業でよく使用され、手動でプロジェクトを展開するよりも効率的です。そこでこの記事では、これまで学んだ docker の知識ポイントと nginx を組み合わせて、VueJs プロジェクトの自動デプロイを簡単に実装します。もちろん、他のプロジェクトでも同様です。

動作環境

まず、サーバーにdocker、nginx、nodeなどをインストールする必要があります。後続の操作に便利です。

dockerでnginxイメージをプルします。コマンドdocker pull nginx

vue-cli でプロジェクトを初期化する

vue init webpack プロジェクト名を使用してプロジェクトを初期化できます。ここでは、プロジェクト名が docker-vue であると仮定し、プロジェクトのルート ディレクトリに新しい Dockerfile ファイルを作成します。一般的な内容は次のとおりです。

nginx:latestから
#現在のパッケージプロジェクトのHTMLを仮想アドレスCOPY dist/ /usr/share/nginx/html/にコピーします
#カスタム nginx.conf を使用してポートとリスナーを設定します RUN rm /etc/nginx/conf.d/default.conf
default.conf を /etc/nginx/conf.d/ に追加します。

/bin/bash -c 'echo init ok!!!' を実行します。

そして、次の内容の default.conf ファイルを作成します。

サーバー{
# プロジェクトで定義されているポート番号は listen 8080 です。
server_name ローカルホスト;

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

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

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

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

それ以来、基本的な作業は完了しました。次のステップはdaocloud.ioの基本的な構成操作です。

daocloud.io 基本設定操作

アカウントをお持ちでない場合は、まずdaocloud.ioで登録してください。

操作は以下のとおりに分かれます。

• プロジェクトを作成する
• クラスター管理
• ミラーリポジトリを作成する

プロジェクトを作成する

ここで、プロジェクト名を追加し、コード ソース (github、gitlab など) を設定して、ビルドする必要があるプロジェクトを選択する必要があります。ここでは、独自の github リポジトリ docker-vue を選択し、[作成の開始] をクリックします。

クラスター管理

クラスター管理の主な目的は、リモート サーバーに接続し、コマンドを通じて daocloud.io イメージを作成することです。

新しいホストを選択

私は Alibaba Cloud サーバーを自分で購入し、システムは Ubuntu なので、次の構成を選択してサーバー上で実行しました。

curl -sSL https://get.daocloud.io/daomonit/install.sh | sh -s e2fa03ebead51076411388c26dff2257dae89768

次のような Docker イメージをビルドします。

次の図に示すように、ホストが正常に作成されました。

ミラーリポジトリを作成する

[Image Warehouse]に入り、手動で作成したイメージを選択し、最新バージョンを無料ホストまたはクラウドテスト環境にデプロイします。

次に、次のアプリケーション設定を行います。

デプロイが完了すると、サーバー IP + 先ほど設定したコンテナ ポート番号を介してアクセスできるようになります。

このようにして、ほとんどの操作が完了しました。Docker コンテナを見ると、イメージ リポジトリが正常に作成された後、コンテナが自動的に作成されたことがわかります。

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