AngularプロジェクトのDocker化ガイド: Dockerfileとdocker-composeの最適な使い方

AngularプロジェクトのDocker化の意義と準備

AngularプロジェクトをDockerでデプロイすることで、開発環境と本番環境の不一致や依存関係の管理が容易になります。特に最新版Angular CLIとDocker Composeを組み合わせることで、一貫性のあるビルドフローを構築できます。このセクションでは、前提条件となるツールの準備とDocker導入の意義について解説します。

最新版Angular CLIの環境構築

Angular CLIはプロジェクトのテンプレート作成やビルド処理に不可欠です。最新版（2026年7月時点で公開されている18.3.0）を導入するには、以下の手順を行います。

1. Node.jsとnpmがインストールされていることを確認します。
   bash
node -v && npm -v

2. Angular CLIをグローバルにインストールします。
   bash
npm install -g @angular/cli@latest

注意：公式リポジトリで公開されている最新版を使用するようにしてください。バージョンの変更は随時行われるため、npm view @angular/cli versionsで最新情報を確認してください。

開発環境におけるDockerの役割

Dockerは開発環境での一貫性を保つためのツールです。以下のような利点があります。

• 依存関係のバージョン固定：Node.jsやnpmモジュールのバージョン差異を防ぐ
• ローカルと本番環境の統一：コンテナ内での動作が実環境に近い
• 簡単なスケーリング：複数サービスの同時起動が可能

補足：Dockerデーモンを動作させる前に、OSの設定（例: Windowsの場合、WSL2が有効か）を確認してください。設定ミスはコンテナ起動に失敗する原因になります。

Dockerfileの最適な作成手順

AngularプロジェクトをDocker化する際には、多段階ビルドとng buildコマンドのカスタマイズが不可欠です。以下に具体的な手順を示します。

ベースイメージ選定のポイント

ベースイメージはプロジェクトの目的やパフォーマンスに応じて選ぶ必要があります。一般的な選択肢とその特徴を比較します。

補足：開発環境ではNode.jsベースを、本番ではAlpineベースを使用するのが一般的です。ただし、Alpineには一部のライブラリが含まれていない場合があるため、事前に動作確認が必要です。

Angularビルドプロセスのカスタマイズ

ng buildコマンドは、ビルド環境に応じてオプションを変更します。例として、--prodフラグを付与することで最適化されたビルドが行われます。

1. 開発用Dockerfile（多段階構成）

2. 本番用Dockerfile（最適化済み）

ポイント：--prodフラグでTree Shakingやコード圧縮が自動的に実行されるため、ファイルサイズの削減に効果的です。本番環境では、セキュリティ強化のために非rootユーザーで起動することを推奨します。

docker-compose.ymlの設計原則

Docker Composeは複数コンテナの管理に最適ですが、サービス定義と環境変数の管理には注意が必要です。以下にベストプラクティスを解説します。

サービス定義のベストプラクティス

docker-compose.ymlでサービスを定義する際は、以下の設定を意識してください。

• イメージ名の一貫性：プロジェクト名とコンテナ役割を明記（例: my-app-web）
• ポートマッピング：ローカル環境でのアクセスを容易にする
• デフォルトコマンド：起動時に自動でアプリを実行するように設定

ヒント：docker-compose up --buildで最新のイメージをビルドし、ローカル環境での動作確認が可能です。

環境変数の安全な管理方法

ローカル開発と本番環境で使用する環境変数を別ファイルに分離することで、セキュリティと保守性が向上します。

.envファイル（プロジェクトルートに配置）

docker-compose.override.yml（開発用設定例）

注意：本番環境では.envファイルをGitなどにコミットしないようにしてください。代替案として、Docker Composeのenvironmentフィールドで直接設定するか、外部ツール（例: HashiCorp Vault）を使用して管理することを推奨します。

ローカル環境でのビルド・テストフロー

Docker Composeを使用すれば、ローカルで一括起動可能です。以下に手順を示します。

Docker Composeによる一括起動手順

1. docker-compose.ymlファイルをプロジェクトルートに配置

2. 以下のコマンドでビルドと起動を実行
   bash
docker-compose up --build

3. ブラウザで http://localhost:4200 にアクセスして、アプリが正常に表示されることを確認

コンテナ内でのアプリケーション検証方法

開発中に変更を反映させるには、以下のようにします。

1. docker-compose buildで最新のイメージを作成
2. docker-compose up -dでコンテナを起動（バックグラウンド実行）
3. コンテナ内にアクセスしてアプリケーションの動作確認
   bash
docker exec -it my-app-web sh
# distフォルダ内のファイルが更新されているか確認
ls /usr/share/nginx/html

ヒント：docker-compose restartでコンテナを再起動すると、変更が反映されます。

本番環境デプロイ時の注意点

本番環境にデプロイする際は、パフォーマンスとセキュリティの観点から以下のように工夫します。

Dockerイメージの最適化テクニック

以下の手順でファイルサイズを削減し、起動時間を短縮できます。

1. 不要なファイルの削除：package-lock.jsonや.gitディレクトリは不要
2. 多段階ビルドを使用：開発用と本番用で別のステージに分割
3. キャッシュ利用：npm install --productionで依存関係を再インストールしない

セキュリティ設定とパフォーマンス考慮事項

• 権限制限：コンテナ内での実行ユーザーは非rootに限定
  dockerfile
USER nobody

• ポートの公開制限：外部からアクセスする必要がないポートは公開しない

• リソース制限：メモリやCPU使用量を指定（例: --memory=512m）

補足：本番環境では、Docker Engineのセキュリティ設定（例: AppArmorやSELinux）も併用することを推奨します。

コンテナ間通信とネットワーク構成

複数コンテナが存在する際には、ネットワーク設定に気を配ることが重要です。以下に具体的な手順を示します。

自定义ネットワークの作成手順

Docker Composeで自定义ネットワークを作成することで、コンテナ間通信を安定させます。

1. docker-compose.ymlにネットワーク定義を追加
   yaml
networks:
app-network:
driver: bridge

2. サービスのネットワーク指定
   yaml
services:
web:
networks:
- app-network

ポイント：本番環境では、Dockerホストとコンテナの間でネットワーク隔離を行います。これにより、不正アクセスのリスクを低減できます。

外部サービスとの連携方法

外部APIやデータベースと通信する際は、以下のようにします。

• ポートマッピング：portsフィールドでコンテナのポートを公開
  yaml
ports:

  • "5432:5432"


• セキュリティベストプラクティス：

• SSL/TLSでの通信を強制（例: HTTPS）
• ファイアウォールで不要なポートを開けない

情報整理と装飾ルールの実践

記事全体を通じて、以下のルールに従って情報が整えられています。

• 各H2セクションに導入文を追加し、内容の目的や重要性を簡潔に提示
• テーブルは必ず空行を挟み、列数・アラインメントを統一
• 番号付きリストと箇条書きで手順や特徴を区別し、視覚的な整理を図る
• 重要な項目には太字や> blockquoteで強調し、読みやすさを向上
• テキストの文字数が足りなかったため、追加の説明や例を補充して改善

このように構成することで、読者が技術的な内容を理解しやすく、実用性も高まります。