はじめに

DockerとNext.jsで開発したフロントエンドアプリをVercelにデプロイする手順を丁寧に解説します。「Vercelを選定した理由」や「Dockerを使った開発環境の活用」も踏まえ、開発から本番公開までの流れを一つの記事にまとめました。

なお、こちらは以下の記事の続きになります。

Vercelを選定した理由

無料プランで十分な機能
- 開発者に優しい無料プランで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）がすぐに利用可能。
自動デプロイ
- GitHubやGitLabと連携し、コードをプッシュするだけで自動的にデプロイ。
環境変数とCI/CDの簡単設定
- .envを簡単に設定でき、本番環境と開発環境を明確に分けられます。
高速なCDN
- 静的アセットがグローバルにキャッシュされ、パフォーマンスが向上。

開発プロジェクトの構成

この記事のプロジェクト構成は以下のようになっています。

├── README.md
├── backend
│   ├── Dockerfile         # Goバックエンド用のDockerfile
│   ├── main.go            # Goのエントリーポイント
│   └── その他コード
├── docker-compose.yml     # Docker Composeファイル
└── frontend
    ├── Dockerfile         # フロントエンド用のDockerfile
    ├── next.config.ts     # Next.jsの設定ファイル
    ├── public/            # 静的ファイル
    └── その他コード

Vercelでのデプロイ準備

アカウントを取得していない場合は新規作成します。GitHubの連携で簡単にできます。
ログイン後、以下のようなページが開きます。

import Git Repositoryでクリックし、該当のリポジトリを選択します。

フレームワークは「Next.js」を選択します。

Root Directoryは「frontend」にします。

これでデプロイ準備は完了です。

必要な環境変数を設定

async function fetchArticles(): Promise<Article[]> {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
  console.log('API URL:', apiUrl); // 環境変数を確認するために追加
  if (!apiUrl) {
    throw new Error('NEXT_PUBLIC_API_URL is not defined');
  }
  try {
    const res = await fetch(`${apiUrl}/articles`, { cache: 'no-store' });
    if (!res.ok) {
      const errorText = await res.text();
      throw new Error(`Failed to fetch articles: ${res.status} ${res.statusText} - ${errorText}`);
    }
    return res.json();
  } catch (error) {
    console.error('Error fetching articles:', error);
    throw error;
  }
}

Vercelでは、NEXT_PUBLIC_で始まる環境変数を使用します。
エラー内容がわかるように、ログを出力するようにしています。

デプロイ

デプロイし、動作確認しましょう。「Visit」でサイトが開きます。
すると、以下のようなエラーがでることもあります。

これは環境変数がきちんと設定されていない場合に出ます。

上記のように設定されていることを確認しました。
私の場合、さらに以下のようなエラーがでました。

よく見ると、わかりますがAPI URLの末尾に不要なスラッシュがあります。

たしかについていました！こちらを編集し、再度デプロイしました。

無事にデプロイすることができました。

これで、Vercelを使ったフロントエンドアプリのデプロイ手順は完了です！
DockerやVercelを活用して、効率的にアプリを公開しましょう！