はじめに: フロントエンドに Docker を使用する理由
「でも私のコンピュータでは動作します」というフレーズを何回聞いたことがありますか? Docker はこの問題を解決します ルート: 開発から運用までのすべての環境で、まったく同じコンテナが実行されます。 同じ依存関係、同じ Node.js バージョン、同じシステム構成を使用します。
フロントエンド開発者にとって、Docker は単なるバックエンド用のツールではありません。コンテナ化 Angular アプリケーションとは、100% 再現可能なビルドと開発環境を備えていることを意味します。 チームメンバー間で一貫性が保たれ、展開プロセスが簡素化されます。この記事では 最適化されたマルチステージ Dockerfile を構築し、SPA ルーティング用に nginx を構成します。 Docker Compose を使用して完全な開発環境を作成します。
この記事で学べること
- Docker がフロントエンド プロジェクトに役立つ理由
- Angular 用のマルチステージ Dockerfile を構築する方法
- 設定方法
.dockerignoreビルドを高速化するために - ローカル開発に Docker Compose を使用する方法
- ビルド時に環境変数を管理する方法
- SPA ルーティング用に nginx を構成する方法
- Docker レイヤーのキャッシュの最適化
- コンテナのヘルスチェックとデバッグ
1. Docker for Frontendの基本概念
Dockerfile を作成する前に、Docker の 3 つの主要な概念を理解することが重要です。 フロントエンド アプリケーションのコンテキストでは次のようになります。
フロントエンドコンテキストの Docker
| コンセプト | 説明 | フロントエンドを使用しています |
|---|---|---|
| 画像 | アプリケーションの実行に必要なものがすべて含まれた不変のテンプレート | コンパイルされた Angular アプリ + nginx |
| 容器 | イメージの実行中のインスタンス | 静的ファイルを提供する nginx サーバー |
| 多段階ビルド | 複数のステージを含む Dockerfile。最終結果のみがイメージに含まれます。 | フェーズ 1: Node.js で構築、フェーズ 2: nginx で提供 |
マルチステージ ビルドの利点は、最終イメージに Node.js、npm、または i が含まれないことです。
node_modules: コンパイルされた静的ファイルと nginx ファイルのみ。これにより大幅に削減されます
画像サイズは約 1.5 GB から 50 MB 未満です。
2. .dockerignore ファイル
Dockerfile を作成する前に、 .dockerignore。このファイルは機能します
どうやって .gitignore ただし、Docker ビルド コンテキストの場合: 除外されるすべてのもの
Docker デーモンには送信されないため、ビルドが大幅に高速化されます。
# .dockerignore
node_modules
dist
.angular
.git
.github
.vscode
.idea
# File di configurazione non necessari per la build
*.md
LICENSE
.editorconfig
.prettierrc
.eslintrc*
# File Docker (evita ricorsione)
Dockerfile*
docker-compose*
.dockerignore
# File di test
coverage
e2e
*.spec.ts
# File di ambiente locali
.env.local
.env.development.local
node_modules を忘れないでください。
除外する node_modules ビルド コンテキストからの判断は非常に重要です。この除外がなければ、
Docker は、Dockerfile が
実行する npm ci 依存関係を最初からインストールします。ビルドは次の間で切り替えることができます
この行を追加するだけで 2 分から 30 秒になります。
3. Angular の Dockerfile マルチステージ
これは、Angular アプリケーション用に最適化されたマルチステージ Dockerfile です。最初のフェーズが実行されます ビルド、2 つ目は nginx で静的ファイルを提供します。
# ============================================
# Stage 1: Build dell'applicazione Angular
# ============================================
FROM node:20-alpine AS build
# Impostare la directory di lavoro
WORKDIR /app
# Copiare PRIMA i file di dipendenze (per il layer caching)
COPY package.json package-lock.json ./
# Installare le dipendenze
RUN npm ci --ignore-scripts
# Copiare il resto del codice sorgente
COPY . .
# Eseguire la build di produzione
RUN npx ng build --configuration=production
# ============================================
# Stage 2: Servire con nginx
# ============================================
FROM nginx:1.25-alpine AS production
# Rimuovere la configurazione di default di nginx
RUN rm /etc/nginx/conf.d/default.conf
# Copiare la nostra configurazione nginx
COPY nginx.conf /etc/nginx/conf.d/
# Copiare i file compilati dallo stage di build
COPY --from=build /app/dist/my-app/browser /usr/share/nginx/html
# Esporre la porta 80
EXPOSE 80
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD wget --no-verbose --tries=1 --spider http://localhost/ || exit 1
# Avviare nginx in foreground
CMD ["nginx", "-g", "daemon off;"]
指示の順序を守ってください COPY：まずコピーしましょう package.json e
package-lock.json、それから実行します npm ciそして、コードをコピーするだけです
ソース。この順序は、Docker のキャッシュ層の基本です。
COPY 順序が重要な理由
Docker はイメージをレイヤーで構築します。各命令は新しいレイヤーを作成し、Docker
入力ファイルが変更されていない場合は、キャッシュからレイヤーを再利用します。全部コピーしたら
シングルと一緒に COPY . .、ファイルに変更を加えると、
依存関係のインストール キャッシュ。正しい順序で:
- ソースコードの変更: 最後の 2 つのレイヤーのみが再構築されます
- 編集
package.json: から再構築されます。npm ci以降 - 変更なし: キャッシュからほぼ瞬時にビルド
4. SPA 用の Nginx 構成
Angular のようなシングル ページ アプリケーションは、クライアント側のルーティングを処理します。これはつまり、
nginx がサービスを提供する必要がある index.html ファイルと一致しないパスの場合
静的な。構成は次のとおりです。
# nginx.conf
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Compressione gzip
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types
text/plain
text/css
text/javascript
application/javascript
application/json
application/xml
image/svg+xml;
# Cache per i file statici con hash nel nome
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
try_files $uri =404;
}
# SPA fallback: qualsiasi percorso non trovato viene servito da index.html
location / {
try_files $uri $uri/ /index.html;
}
# Header di sicurezza
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
# Disabilitare il listing delle directory
autoindex off;
# Nascondere la versione di nginx
server_tokens off;
}
Nginx 構成の重要なポイント
try_files $uri $uri/ /index.html: SPA ルーティングの基本ルールgzip: 転送ファイルのサイズを減らすための圧縮expires 1y: ハッシュされたファイルの積極的なキャッシュ (Angular は自動ハッシュを使用します)- セキュリティ ヘッダー: XSS およびクリックジャッキングに対する基本的な保護
5. ビルド時の環境変数
コンテナ化された Angular アプリケーションの一般的な問題は変数管理です 環境の。 Angular はビルド時に変数をバンドルにコンパイルするため、次のようにする必要があります。 それらをビルド引数として渡します。
# Dockerfile con build arguments
FROM node:20-alpine AS build
WORKDIR /app
# Definire gli argomenti di build
ARG API_URL=http://localhost:3000
ARG ENVIRONMENT=production
ARG GOOGLE_ANALYTICS_ID
# Impostare le variabili d'ambiente per la build
ENV API_URL=${API_URL}
ENV ENVIRONMENT=${ENVIRONMENT}
ENV GOOGLE_ANALYTICS_ID=${GOOGLE_ANALYTICS_ID}
COPY package.json package-lock.json ./
RUN npm ci --ignore-scripts
COPY . .
# Usare la configurazione corrispondente all'ambiente
RUN npx ng build --configuration=${ENVIRONMENT}
FROM nginx:1.25-alpine AS production
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/
COPY --from=build /app/dist/my-app/browser /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
ビルド中にビルド引数を渡すには:
# Build con variabili personalizzate
docker build \
--build-arg API_URL=https://api.example.com \
--build-arg ENVIRONMENT=production \
--build-arg GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX \
-t my-angular-app:latest .
# Build per staging
docker build \
--build-arg API_URL=https://staging-api.example.com \
--build-arg ENVIRONMENT=staging \
-t my-angular-app:staging .
6. 開発用の Docker Compose
ローカル開発の場合、Docker Compose を使用すると、複数のサービスを 1 つのサービスでオーケストレートできます。 コマンド。これは、ホットリロードされた Angular アプリ、API バックエンドを含むセットアップです。 そしてデータベース:
# docker-compose.yml
services:
angular-app:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "4200:4200"
volumes:
- .:/app
- /app/node_modules
environment:
- NODE_ENV=development
command: npx ng serve --host 0.0.0.0
api:
image: node:20-alpine
working_dir: /app
ports:
- "3000:3000"
volumes:
- ./api:/app
command: npm run dev
environment:
- DATABASE_URL=postgresql://user:password@db:5432/mydb
db:
image: postgres:16-alpine
ports:
- "5432:5432"
environment:
- POSTGRES_USER=user
- POSTGRES_PASSWORD=password
- POSTGRES_DB=mydb
volumes:
- postgres_data:/var/lib/postgresql/data
volumes:
postgres_data:
開発用の Dockerfile
開発用の Dockerfile は本番用の Dockerfile とは異なります。これには Node.js が含まれており、コードがアセンブルされます。
ソースをボリュームとして使用し、 ng serve ホットリロードを使用すると:
# Dockerfile.dev
FROM node:20-alpine
WORKDIR /app
# Installare Angular CLI globalmente
RUN npm install -g @angular/cli
# Copiare i file di dipendenze
COPY package.json package-lock.json ./
# Installare le dipendenze
RUN npm ci
# La directory di lavoro viene montata come volume
# quindi non serve COPY del codice sorgente
EXPOSE 4200
CMD ["npx", "ng", "serve", "--host", "0.0.0.0", "--poll", "2000"]
重要な Docker Compose コマンド
| 指示 | 説明 |
|---|---|
docker compose up -d |
すべてのバックグラウンド サービスを開始する |
docker compose down |
コンテナの停止と削除 |
docker compose logs -f angular-app |
リアルタイムでログを表示する |
docker compose exec angular-app sh |
コンテナ内でシェルを開きます |
docker compose build --no-cache |
キャッシュを使用せずに再構築します |
7. Docker ビルドの最適化
Docker ビルドの最適化は速度だけではありません: イメージのサイズを小さくする これは、展開の高速化、帯域幅の消費量の削減、攻撃対象領域の縮小を意味します。
画像サイズの比較
# Confronto dimensioni con diverse immagini base
# node:20 (Debian) ~1.1 GB
# node:20-slim ~240 MB
# node:20-alpine ~130 MB
# nginx:alpine ~40 MB (solo per la fase finale)
# Dimensioni tipiche dell'immagine finale:
# Senza multi-stage: ~1.5 GB (Node.js + node_modules + dist)
# Con multi-stage: ~45 MB (nginx + file statici)
最適化戦略
# Dockerfile ottimizzato con tutte le best practice
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json package-lock.json ./
# Installare solo le dipendenze di produzione per ridurre i layer
RUN npm ci --ignore-scripts && npm cache clean --force
FROM node:20-alpine AS build
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npx ng build --configuration=production
# Rimuovere i source map se non necessari
RUN find /app/dist -name "*.map" -delete
FROM nginx:1.25-alpine AS production
# Usare un utente non-root per sicurezza
RUN addgroup -g 1001 -S appgroup && \
adduser -S appuser -u 1001 -G appgroup
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist/my-app/browser /usr/share/nginx/html
RUN chown -R appuser:appgroup /usr/share/nginx/html && \
chown -R appuser:appgroup /var/cache/nginx && \
chown -R appuser:appgroup /var/log/nginx && \
touch /var/run/nginx.pid && \
chown appuser:appgroup /var/run/nginx.pid
USER appuser
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
8. ヘルスチェックとデバッグ
ヘルスチェックにより、Docker (および Kubernetes などのオーケストレーター) が検証できるようになります。 コンテナが単に実行されているだけでなく、実際に機能していることを確認します。
# Health check nel Dockerfile
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD wget --no-verbose --tries=1 --spider http://localhost/ || exit 1
デバッグに便利なコマンド
# Verificare lo stato di salute del container
docker inspect --format='{{.State.Health.Status}}' my-angular-container
# Visualizzare i log del container
docker logs my-angular-container --tail 50
# Entrare nel container in esecuzione
docker exec -it my-angular-container sh
# Verificare i file serviti
docker exec my-angular-container ls -la /usr/share/nginx/html
# Testare la risposta nginx dall'interno del container
docker exec my-angular-container wget -qO- http://localhost/
# Analizzare i layer dell'immagine
docker history my-angular-app:latest
# Controllare la dimensione dell'immagine
docker images my-angular-app
9. 本番環境と開発環境のイメージ
要件があるため、実稼働用と開発用に別々の Dockerfile を保持することが重要です。 とても違う：
生産と開発の比較
| 特性 | 生産 | 発達 |
|---|---|---|
| 基本イメージ | nginx:アルパイン | ノード:アルパイン |
| サーバ | nginx | ng サーブ (webpack-dev-server) |
| ホットリロード | No | はい (ボリュームマウントあり) |
| ソースマップ | いいえ (または Sentry にアップロード) | Si |
| サイズ | ~45MB | ~500MB |
| ユーザー | 非ルート | ルート (ボリューム権限用) |
本番環境では現像イメージを決して使用しないでください
開発イメージには、Node.js、npm、およびすべての devDependency が含まれています。であることに加えて 非常に大きいため、はるかに大きな攻撃対象領域が露出します。常に使用してください 実稼働用のマルチステージ Dockerfile。
10. ビルドと実行の完了
両方の環境でアプリケーションを構築して起動するためのコマンドをまとめます。
# === PRODUZIONE ===
# Build dell'immagine di produzione
docker build -t my-angular-app:latest .
# Avviare il container
docker run -d \
--name angular-prod \
-p 8080:80 \
--restart unless-stopped \
my-angular-app:latest
# Verificare che funzioni
curl http://localhost:8080
# === SVILUPPO ===
# Avviare con Docker Compose
docker compose up -d
# Verificare i servizi
docker compose ps
# Vedere i log
docker compose logs -f angular-app
# Fermare tutto
docker compose down
結論
この記事では、フロントエンド開発者の観点から Docker について説明しました。 最適化された本番イメージを生成するマルチステージ Dockerfile を構築しました 50 MB 未満、圧縮とキャッシュを使用して SPA ルーティング用に nginx を構成し、作成 Docker Compose を使用した完全な開発環境。
覚えておくべき重要な点は次のとおりです。運用環境では常にマルチステージ ビルドを使用します。
正しく設定する .dockerignore、の順序を尊重します。 COPY
キャッシュ層用に、開発用と運用用に別々の Dockerfile を保持します。
次の記事では、統合する方法について説明します。 GitHub アクションを使用した Firebase ホスティング プル リクエストのプレビュー チャネルを使用して、完全な自動デプロイメント フローを作成します。 そしてロールバック戦略。