NodeJSバックエンドを使用したAngularアプリのDocker化

Dockerは、組織がどこにいても、あらゆるアプリケーションをシームレスに構築、共有、実行できるようにする、エンタープライズ対応のコンテナープラットフォームです。ほぼすべての企業が、アプリケーションをコンテナ化して本番ワークロードを高速化し、いつでも、場合によっては1日に数回デプロイできるようにしています。Angularアプリを構築する方法はたくさんあります。1つの方法は、Angularアプリをnodejsバックエンドでドッキングし、Dockerイメージを作成して、そのイメージをいつでも、場合によっては1日に数回デプロイできるようにすることです。

この投稿では、サンプルプロジェクトを見て、nodejsをサーバーとしてAngularアプリをドッキングする方法についてのステップバイステップガイドを確認します。

• 前書き
• サンプルプロジェクト
• アプリのDockerizing
• Dockerでアプリを実行する
• 概要
• 結論

現在、Docker SwarnやKubernetesなどのコンテナオーケストレーションエンジンを使用して、Dockerイメージを本番環境にドッキングしてデプロイすることが非常に一般的です。アプリをDocker化してイメージを作成し、ローカルマシンのDockerで実行します。そのイメージをDockerハブにプッシュして、必要なときにいつでもどこでもプルすることもできます。

これは、nodejsをバックエンドサーバーとして使用してAngularアプリを開発する方法に関する完全なガイドです。プロセスに精通していない場合、またはこのガイドを学習する前に知りたい場合は、このガイドを実行することをお勧めします。

NodeJSを使用してAngularアプリを開発および構築する方法

前提条件

前提条件として、Docker for Desktopをインストールする必要があります（OSが何であれ）。このリンクをたどって、ラップトップにDockerをインストールしてください。インストールしたら、次のコマンドを使用してDocker情報またはバージョンを確認できます。

docker info
docker --version

これは、Angularサーバーとnodejsサーバーを使用した単純なサンプルプロジェクトです。ユーザーを作成できます。ユーザーを作成すると、右側でカウントを更新し、ボタンを使用してすべてのユーザーを取得できます。

これは、ローカルマシンで実行できるこのサンプルプロジェクトのGithubリンクです。

// clone the project
https://github.com/bbachi/angular-nodejs-example.git
// install and start the project
npm install
npm start

// create an image
docker build -t angular-node-image .
// running on Image
docker run -it -p  3080:3080 --name ang-node-ui angular-node-image

効率的なDockerイメージのために、マルチステージビルドを使用します。効率的なDockerイメージを構築することは、ダウンロードを高速化し、表面攻撃を減らすために非常に重要です。この多段階ビルドでは、Angularプロジェクトをビルドし、それらの静的アセットをdistフォルダーに配置することが最初のステップです。2番目のステップでは、これらの静的ビルドファイルを取得し、ノードサーバーでそれらを提供します。

Dockerfileを使用してイメージを作成しましょう。イメージを構築するために必要なものは次のとおりです。

ステージ1

• ベースイメージから開始 node:10
• 2つのpackage.jsonファイルがあります。1つはnodejsサーバー用で、もう1つはAngularUI用です。これらをDockerファイルシステムにコピーして、すべての依存関係をインストールする必要があります。
• 後でソースに変更があった場合に備えて、イメージをより速く構築するには、最初にこの手順が必要です。ソースファイルを変更するたびに依存関係のインストールを繰り返したくありません。
• すべてのソースファイルをコピーします。
• AngularはAngular / CLIを使用してアプリをビルドします。したがって、CLIをインストールし、すべての依存関係をインストールします。
• 実行npm run buildしてAngularアプリをビルドすると、すべてのアセットがdistmy-appフォルダー内のフォルダーの下に作成されます。

• ベースイメージから開始 node:10
• ステージ1からビルドを取得し、すべてのファイルをにコピーします。/ my-app / distフォルダー。
• nodejspackage.jsonをコピーします
• すべての依存関係をインストールします
• 最後に、server.jsをコピーします
• node server.jsCMDでこのコマンドを実行します。これは、イメージを実行すると自動的に実行されます。

次のコマンドでイメージを作成しましょう。

// build the image
docker build -t angular-node-image .
// check the images
docker images

Dockerイメージがビルドされたら。次のコマンドでイメージを実行できます。

// run the image
docker run -d -p  3080:3080 --name ang-node-ui angular-node-image
// check the container
docker ps

      

       Running Docker container on port 3080
      

実行中のコンテナーに実行する

このコマンドを使用して実行中のコンテナーに実行し、ファイルシステムを探索できます。

docker exec -it ang-node-ui /bin/sh

      

       exec into the running container
      

• 現在、Docker SwarnやKubernetesなどのコンテナオーケストレーションエンジンを使用して、Dockerイメージを本番環境にドッキングしてデプロイすることが非常に一般的です。
• 効率的なDockerイメージのために、マルチステージビルドを使用します。
• 効率的なDockerイメージを構築することは、ダウンロードを高速化し、表面攻撃を減らすために非常に重要です。

このタイプのアーキテクチャでは、常にマルチステージビルドを使用してください。Dockerイメージを小さくし、攻撃を受けにくくします。