はじめに
最近は「ローカルでコンテナを使う」か「クラウドのホスティングサービスに任せる」かで迷うことが多いですよね。特に Docker と Vercel は、どちらも「開発から本番までをシームレスにしたい」人に人気のツールです。本記事では、初心者が ローカル開発 と 本番デプロイ のシーンでそれぞれ何を選べば良いかを、具体的なメリット・デメリットとともに解説します。
1. Docker の特徴と向き不向き
| 項目 | 内容 |
|---|---|
| 環境の再現性 | Docker イメージは OS レベルで依存関係を閉じ込めるため、開発マシンと本番サーバの差異をほぼなくせます。 |
| マルチプラットフォーム | Linux, macOS, Windows すべてで同じコマンドが使えるので、チーム全員が同じ環境で作業できます。 |
| 学習コスト |
Dockerfile の記述や docker compose の設定は最初はハードルが高いです。 |
| 本番運用 | 自前のサーバやクラウド VM にデプロイする場合は、インフラ管理が必要です。 |
Dockerfile のシンプル例（Node.js アプリ）
# ベースイメージ
FROM node:20-alpine
# 作業ディレクトリ作成
WORKDIR /app
# 依存関係だけ先にインストール
COPY package*.json ./
RUN npm ci --production
# アプリコードをコピー
COPY . .
# ポート公開
EXPOSE 3000
# 起動コマンド
CMD ["npm", "run", "start"]
このファイルさえ用意すれば、docker build -t myapp . でイメージが完成し、docker run -p 3000:3000 myapp でローカルサーバが起動します。「ローカルでコンテナをそのまま動かす」 という感覚が掴めれば、CI（GitHub Actions など）でも同じイメージを使ってテスト・デプロイが可能です。
2. Vercel の特徴と向き不向き
| 項目 | 内容 |
|---|---|
| Zero Config デプロイ |
git push だけで自動的にビルド・プレビューが作成され、プレビュー URL が即座に取得できます。 |
| サーバーレス関数 | API エンドポイントは api/ ディレクトリに置くだけで自動的にサーバーレス化されます。 |
| 制限 | カスタム OS レベルの設定や長時間実行されるバックグラウンドジョブは向いていません。 |
| 料金 | 無料枠でも小規模プロジェクトは十分ですが、トラフィックが増えると課金が発生します。 |
Vercel は特に Next.js と相性が良く、ページ単位での ISR（Incremental Static Regeneration） や SSR が簡単に利用できます。Docker のように環境を細かく構築したいケースは少ないですが、「コードを書いたらすぐに公開したい」 というシナリオでは最適です。
3. 使い分けの指針
| シーン | 推奨ツール | 理由 |
|---|---|---|
| ローカルで複数サービスを同時起動したい | Docker |
docker compose で DB, Redis, API などを一括管理できる |
| フロントだけを手軽にプレビューしたい | Vercel | Git 連携だけで自動デプロイ・プレビューが生成 |
| 本番環境でカスタムミドルウェアやバイナリが必要 | Docker | 任意の OS パッケージをインストールできる |
| サーバーレス関数や Edge Runtime を活用したい | Vercel | デプロイ時に自動的に最適化された関数が作成される |
| CI/CD に同一イメージを流用したい | Docker + GitHub Actions | ビルド・テスト・デプロイが同一イメージで完結 |
4. 具体的なワークフロー例
- ローカル – Docker Compose で DB と API を立ち上げ、フロントは Vercel のプレビューにプッシュ
- テスト – GitHub Actions で Docker イメージをビルドし、ユニットテストを実行
- 本番デプロイ – テストが通ったら Docker イメージをレジストリへプッシュし、Kubernetes か自前の VM にデプロイ。フロントは Vercel に自動デプロイ。
このハイブリッド構成なら、「ローカルは自由にカスタマイズ」 と 「本番は手間なくスケール」 のベストバランスが取れます。
まとめ
- Docker は環境の完全再現とカスタマイズが必要なときに最適。学習コストはあるが、CI と組み合わせれば本番まで一貫したパイプラインが構築できる。
- Vercel は設定不要で即デプロイしたいフロントエンド中心のプロジェクトに向く。Next.js との相性が特に良く、サーバーレス関数も簡単に扱える。
- 目的に応じて 両方を併用 することで、ローカル開発の柔軟性と本番ホスティングの手軽さを両立できます。