このほどチーム内で GitHub Actions を用いた CI/CD のフロントエンド・パイプラインを本番導入し、いくつかの知見が溜まった。同じような取り組みをする人の参考になればとまとめておく。
コアコンセプト
肝心なのは、仕組みの根本を理解することだ。
javascript
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build
FROM nginx:alpine AS runner
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
パフォーマンスチューニングは場面に合わせて考えるべきで、すべてのケースで過剰に最適化する必要はない。
深掘り解析
次のようなアプローチで改善できる。
javascript
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build
FROM nginx:alpine AS runner
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
このアプローチは本番環境で半年以上安定稼働しており、実際に検証済みだ。
実装経験
基本的な実装の流れから見ていこう。
javascript
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build
FROM nginx:alpine AS runner
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
ここでは基本的な使い方を示した。実際のプロジェクトでは、エラーハンドリングやエッジケース（境界条件）も考慮する必要がある。
チューニング戦略
これをベースに、さらに最適化を進められる。
javascript
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build
FROM nginx:alpine AS runner
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
このパターンは大規模なプロジェクトで非常に実用的で、保守コストを大きく下げられる。
まとめ
- GitHub Actions による CI/CD のフロントエンド・パイプラインは銀の弾丸ではなく、プロジェクトの規模と技術スタックに応じて選ぶ必要がある
- API を丸暗記するより、根底の原理を理解するほうが大切だ
- 本番投入前には必ず互換性の検証を行うこと
- チーム開発では、取り決めとドキュメントが技術そのものよりも重要になる