Vercelへのデプロイ：DockerとNext.jsを活用したアプリを本番環境に公開しよう！

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

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

https://qiita.com/jijimama/items/f959f561b6a1837333a7


## 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の連携で簡単にできます。
ログイン後、以下のようなページが開きます。

![スクリーンショット 2024-12-26 8.25.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724481/97a6a3ef-aacd-9447-f45e-6896c93774d2.png)

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

![スクリーンショット 2024-12-26 8.26.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724481/2fe9834a-b9b8-318d-b9c9-abd7e873d0cd.png)

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

![スクリーンショット 2024-12-26 8.28.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724481/bb3332ef-5c7e-91ee-e081-e1bf4d2f8b8a.png)

Root Directoryは「frontend」にします。

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

## 必要な環境変数を設定

```tsx
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」でサイトが開きます。
すると、以下のようなエラーがでることもあります。
![スクリーンショット 2024-12-26 8.40.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724481/775dec87-0039-c485-f733-12d4b9b5a420.png)


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

![スクリーンショット 2024-12-26 8.41.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724481/b547dc5d-ebc9-110c-7c72-581fc97ec89c.png)

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

![スクリーンショット 2024-12-26 9.00.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724481/734dbcc6-7a2a-b426-3d72-1e8c0480370e.png)


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

![スクリーンショット 2024-12-26 8.59.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724481/5b794cc2-04b7-2fea-e555-b85369c0e658.png)

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

![スクリーンショット 2024-12-26 8.54.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724481/7586da70-0647-e863-b1df-e3ac09e4b481.png)

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

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