Contents
Vercel CLIのインストール確認手順
Vercel CLIを実行する前に、正しいバージョンが導入されているかを確認することが重要です。Node.js LTS環境では、npmパッケージ管理が安定しているため、以下のように操作してください。
-
グローバルインストール
bash
npm install -g vercel -
バージョン確認コマンド
bash
vercel --version -
Node.js LTS互換性チェック
- Vercel CLIはNode.js v16以降で動作します。
node -vで現在のバージョンを確認し、LTS環境が対応しているかを検証してください。
注意: Node.jsのバージョンが古すぎる場合、Vercel CLIの一部機能が動作しない可能性があります。
Dockerfileの最適な記述例：Node.js LTS環境向け
Dockerfileはアプリケーションのビルドプロセスを定義する重要なファイルです。マルチステージビルドや公式イメージの選定により、パフォーマンスとセキュリティを向上させましょう。
マルチステージビルドの構成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# ビルドフェーズ（Node.js環境） FROM node:20-alpine as builder WORKDIR /app COPY package*.json ./ RUN npm ci --production COPY . . RUN npm run build # 実行フェーズ（スリムなベースイメージ） FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] |
プロダクション環境用ベースイメージ選定
- 公式Node.jsイメージ：
node:20-alpineを使用することで、セキュリティパッチとバージョン管理が容易です。Node.js 20はLTS（長期サポート）バージョンであり、安定性が保証されています。 - キャッシュ効率化：
npm ci --productionで依存関係を一括インストールし、レイヤー数を抑えるのがベストプラクティスです。
| レイヤー | 内容 | 目的 |
|---|---|---|
| 1 | Node.jsイメージ | 依存関係のインストール |
| 2 | コードコピー | ビルドプロセスの実行 |
| 3 | Nginxイメージ | 最終的な実行環境の構築 |
vercel.jsonのカスタム設定ポイント
vercel.jsonはVercel CLIでプロジェクトをビルド・デプロイする際の設定ファイルです。Docker化した場合、以下の項目を調整することで効率的なデプロイが可能になります。
buildCommandのオーバライド
|
1 2 3 4 |
{ "buildCommand": "docker build -t my-app . && docker run -d -p 3000:80 my-app" } |
npm run buildに代わって、Dockerイメージのビルドと実行を指定します。
outputDirectory指定
|
1 2 3 4 |
{ "outputDirectory": "/usr/share/nginx/html" } |
- Dockerfileでコピーされた出力ディレクトリを明示することで、Vercelが正しい場所を認識します。
環境変数管理
|
1 2 3 4 5 6 7 |
{ "env": { "NEXT_PUBLIC_API_URL": "https://api.example.com", "DATABASE_URL": "mongodb://localhost:27017/mydb" } } |
NEXT_PUBLIC_で始まる変数はフロントエンドに公開され、セキュリティリスクを最小限に抑えます。
CI/CDでの自動デプロイフロー構築
GitHub ActionsやGitLab CIなどを使ってCI/CDパイプラインを構築すると、コードの変更時に自動でDockerイメージを作成・デプロイできます。
GitHub Actionsでのワークフロー設計
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
name: Docker Build and Deploy on: push: branches: - main jobs: build-deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Build Docker image run: docker build -t my-app . - name: Push to Vercel run: vercel --scope staging |
デプロイ環境の区別方法
- ステージング環境:
vercel --scope stagingで別のプロジェクト名を指定し、本番とは独立してテストします。 - 本番環境: 前述の非推奨フラグ
--prodではなく、現在はプロジェクトスコープ（例:--scope production）を明示的に指定します。
Dockerイメージサイズの最適化方法
Dockerイメージが大きいと、ビルドやプッシュに時間がかかってしまいます。以下のように不要なファイルを削除し、レイヤー構造を再設計することでサイズを抑えることができます。
不要なパッケージの削除
npm ci --productionで開発用依存関係を除外します。.dockerignoreにnode_modules,.gitなどの不要なファイルを指定し、イメージに含めません。
レイヤーの再構成戦略
- 依存関係のインストールとコピーを分離
npm ciは別のレイヤーで実行し、変更が少ない場合はキャッシュされます。-
不要なレイヤーの削除
bash
docker image prune -a --filter "label=stage=builder" -
イメージスキャンツールの活用
-
docker scanやDocker Hubのイメージ分析機能で、無駄なファイルを特定し削除します。
導入方法:- Docker Hubにログイン:
docker login - イメージスキャン:
docker scan my-app --format=json > scan-result.json - 結果から不要なパッケージを削除し、再ビルドします。
- Docker Hubにログイン:
最新情報と補足事項
Vercel CLIのプロジェクト管理変更について
2023年以降、Vercelではプロジェクトスコープ指定（例: --scope staging）が主流となりました。以前の--prodフラグは非推奨で、代わりに明示的なスコープ指定またはプロジェクト名を用いるのが現在のベストプラクティスです。
Dockerfileベースイメージについて
- node:20-alpine: Node.js 20はLTSバージョンであり、セキュリティアップデートが継続的に提供されます。
alpine版は軽量なため、Dockerイメージサイズの最適化に適しています。 - 代替案: 開発環境では
node:20（Debianベース）を、本番環境ではnode:20-alpineを使用するのも一案です。
Vercel CLIとDockerを組み合わせることで、開発環境と本番環境を均一化し、デプロイ時間を短縮できます。ぜひ「Vercel CLI + Dockerの手順を試してみる」ボタンからGitHubサンプルコードをご覧ください。