はじめに
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を活用して、効率的にアプリを公開しましょう！