Vercelでフルスタックアプリをデプロイする方法（ReactJS | Vite | NodeJS | TypeScript | Neon | PostgreSQL）

この記事では、Vercelを使ってフルスタックアプリケーションをデプロイする方法をステップバイステップで紹介します。

具体例として、実際にデプロイしたプロジェクトを本記事下部の[ （参考）](#参考実際にデプロイしたプロジェクト)から確認できます。

## 前提条件

デプロイを始める前に、以下の条件を満たしていることを確認してください。

- GitHub上にリポジトリがあり、`frontend`フォルダーと`backend`フォルダーに分けられていること
- GitHubとVercelの連携ができていること
- フロントエンド・バックエンド・DB間の接続がテスト環境上で確認できていること

## バックエンドをVercelにデプロイする
まずはじめに、バックエンド側をデプロイします。

### Step1. Vercelにログイン
まず、Vercelに[ログイン](https://vercel.com/login)、またはアカウント未登録の場合は[サインアップ](https://vercel.com/signup)してください。

### Step2. 新しいプロジェクトの追加
赤枠で示した"Add New..."ボタンをクリックし、プルダウンの中から"Project"を選択します。
![vercel-add-new-button](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875835/352c46f4-7fbb-8bdb-24eb-b259a6143d0d.png)

GitHubから既存のプロジェクトをインポートします。
対象のリポジトリが表示されている場合は赤枠内にある"Import"ボタンを選択。
（※この記事内では`chatbot-app` というリポジトリを使って説明していきます。）

:::note warn
ここで対象のリポジトリが見つからない場合は、GitHubのアクセス設定ができていない可能性があるので、緑枠内の"Adjust GitHub App Permissions"から、設定を変更する必要があります。その手順は[こちら](#補足githubリポジトリのアクセス設定を変更する方法)。
:::

![import-project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875835/0d443aaf-9e51-995c-2cb5-79b31fce33b1.png)



### Step3. プロジェクトの設定
インポートが完了したら、プロジェクトの設定を行います。
![config-project1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875835/9334dcc6-8b14-f23d-6c99-cc7bafdeca88.png)

**(1)\. Project Name（プロジェクト名）**:
プロジェクト名＋末尾に`backend`や`server`とつけるといいかと思います。
⇨　例：`my-project-backend`、`my-project-server`など

:::note info
なお、「ここで設定した名前」＋「.vercel.app」でドメインが作られます。
⇨　例：my-project-api.vercel.app、my-project-server.vercel.appなど
:::


  
**(2)\. Framework Preset（フレームワークプリセット）**: プルダウンの中から`Others` を選択します。

**(3)\. Root Directory（ルートディレクトリ）**: 
`Edit`ボタンを選択すると以下のような画面が出てくるので、バックエンド用のディレクトリを選択します。
<img width="360" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875835/eed996b6-da2c-7a91-96e1-67a64d2403a8.png" alt="Root　Directory">

**(4)\.Build and Output Settings**:
特に設定不要です。必要であれば、追加してください。

**(5)\.Environment Variables（環境変数）**:
必要となる環境変数をここで追加してください。（※PORTは設定不要です。）
▽例
<img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875835/01dcbff5-fda5-4a1f-2702-ca704e2a634f.png" alt="Environment　Variables">


**(6)\.** 以上の設定が完了したら、"Deploy"ボタンを押します。


### Step4. `vercel.json`の設定
デプロイ後に、backend用のフォルダーのルート直下に`vercel.json`を追加し、以下の記述を行います。
```
{
    "builds": [
        {
            "src": "*.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}
```

:::note info
**TypeScript**の場合、コンパイルされたJSファイルを読むように指定します。
（※以下の例ではTypeScriptの書き出し先（`"outDir"`）を`./dist`とした場合のものです。）
:::
```
{
  "builds": [
    {
      "src": "dist/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/server.js",
    }
  ]
}
```
上記の設定が完了したら、リモートリポジトリにプッシュします。
※Vercelではmainブランチにマージされると自動で再デプロイするようになっています。

### Step5. サーバーにアクセスできるか確認
実際にデプロイしたものにアクセスできるか確認してください。
"Domains"のURLから確認できます。
![Screenshot 2024-09-04 at 10.41.43 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875835/f0f5e164-6a29-3c2f-3017-32f6d48fe444.png)

実際にファイルの内容が表示されるか、[こちらのページ](https://chatbot-app-api.vercel.app/)のように"Cannot GET /"と表示されていたら成功です🎉🎉🎉

:::note alert
もし、404エラーの場合、`vercel.json`の設定がうまくできていない可能性があるので、指定したパスが正しいか確認してください。
:::
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875835/a653aa1f-30c2-0ba9-4c6c-918e857cb1a5.png" alt="404error">

## フロントエンドをVercelにデプロイする
バックエンドと同様に設定を進めていきます。
Step1: Vercelのダッシュボード画面で"Add New..."ボタンを押し、"Project"を選択。
Step2: 対象のプロジェクトをインポート
Step3: プロジェクト設定画面で以下を設定
　1\. プロジェクト名："my-project"など、バックエンドの名前の末尾を抜いたもの
　2\. フレームワークプリセット："Vite"を選択。（Reactのみの場合は"Create React App"）
　3\. ルートディレクトリ："client"などフロントエンドのものを選択
　4\. 環境変数：必要に応じて追加
　5\. "Deploy"ボタンを押す
Step4: デプロイしたページにアクセスして確認
サイトが正しく表示されており、バックエンド側との接続も確認できたら完了！🎉🎉🎉

## まとめ
以上で、Vercelを使ったフルスタックアプリケーションのデプロイが完了しました。
もし上手くいかない場合は、設定や環境変数を再確認してみてください。

## （補足）GitHubリポジトリのアクセス設定を変更する方法!
` Adjust GitHub App Permissions →`のリンクをクリックし、どこからインポートするか選択。
![install-vercel](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875835/2aa8a8f1-8622-97f9-797d-67e1be1c43d3.png)

GitHubの設定画面にくるので、`Repository access`で対象のリポジトリをプルダウンボタンのなかから選択して`Save`ボタンを押せば、Vercel上のImportリスト上に出てくるはずです。
![github-access](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875835/176fe502-6d29-bead-54c9-6dc0c266bc59.png)

## （補足）今回参考にした動画
[How to Deploy a ReactJS and NodeJS app with Vercel!](https://www.youtube.com/watch?v=CNJkX9rYI8U)
この動画ではMongoDBを使っているので、同じMERNスタックのプロジェクトの場合、より参考になると思います。

:::note info
動画内では、`vercel.json`の設定で`"version": 2`という記述もしていますが、
[Vercelの公式ドキュメント](https://vercel.com/docs/projects/project-configuration#version)では「versionプロパティはもう使用されるべきではない。」とあります。
:::

## （参考）実際にデプロイしたプロジェクト
今回紹介した手順をもとに以下のプロジェクトをデプロイし、動作確認ができました。
### 使用技術スタック
- **フロントエンド**: [Vite](https://vitejs.dev/) + React + Typescript
- **バックエンド**: Express (Node.js) + Typescript
- **データベース**: [Neon](https://neon.tech/home) (PostgreSQL)
> 注: 使用するデータベースは、MongoDBなど他のものでもOKです。 

### リポジトリ構成の例：
```
├── server             # バックエンド用フォルダー
│   ├── dist           # Typescriptの書き出し先
│   ├── controllers
│   ├── models
│   ├── routers
│   ├── services
│   └── server.ts
├── client             # フロントエンド用フォルダー
│   ├── src
│   │   ├── components
│   │   ├── utils
│   │   ├── App.tsx
│   │   ├── index.tsx 
│   │   ├── styles
│   │   └── ...
└── package.json
```

具体的なプロジェクトはこちら↓。[Gemini](https://gemini.google.com/app)を用いて会話ができるチャットボットアプリです。
* [Chatbotアプリ](https://chatbot-app-vite.vercel.app/)
* [Github](https://github.com/Akikaze1119/chatbot-app-vite)
（※アプリは英語版ですが、日本語でも会話ができます。）