前提条件

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

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

バックエンドをVercelにデプロイする

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

Step1. Vercelにログイン

まず、Vercelにログイン、またはアカウント未登録の場合はサインアップしてください。

Step2. 新しいプロジェクトの追加

赤枠で示した"Add New..."ボタンをクリックし、プルダウンの中から"Project"を選択します。

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

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

Step3. プロジェクトの設定

インポートが完了したら、プロジェクトの設定を行います。

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

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

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

(3). Root Directory（ルートディレクトリ）:
Editボタンを選択すると以下のような画面が出てくるので、バックエンド用のディレクトリを選択します。

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

(5).Environment Variables（環境変数）:
必要となる環境変数をここで追加してください。（※PORTは設定不要です。）
▽例

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

Step4. `vercel.json`の設定

デプロイ後に、backend用のフォルダーのルート直下にvercel.jsonを追加し、以下の記述を行います。

{
    "builds": [
        {
            "src": "*.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}

TypeScriptの場合、コンパイルされたJSファイルを読むように指定します。
（※以下の例ではTypeScriptの書き出し先（"outDir"）を./distとした場合のものです。）

{
  "builds": [
    {
      "src": "dist/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/server.js",
    }
  ]
}

上記の設定が完了したら、リモートリポジトリにプッシュします。
※Vercelではmainブランチにマージされると自動で再デプロイするようになっています。

Step5. サーバーにアクセスできるか確認

実際にデプロイしたものにアクセスできるか確認してください。
"Domains"のURLから確認できます。

実際にファイルの内容が表示されるか、こちらのページのように"Cannot GET /"と表示されていたら成功です🎉🎉🎉

もし、404エラーの場合、vercel.jsonの設定がうまくできていない可能性があるので、指定したパスが正しいか確認してください。

フロントエンドを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 →のリンクをクリックし、どこからインポートするか選択。

GitHubの設定画面にくるので、Repository accessで対象のリポジトリをプルダウンボタンのなかから選択してSaveボタンを押せば、Vercel上のImportリスト上に出てくるはずです。

（補足）今回参考にした動画

How to Deploy a ReactJS and NodeJS app with Vercel!
この動画ではMongoDBを使っているので、同じMERNスタックのプロジェクトの場合、より参考になると思います。

動画内では、vercel.jsonの設定で"version": 2という記述もしていますが、
Vercelの公式ドキュメントでは「versionプロパティはもう使用されるべきではない。」とあります。

（参考）実際にデプロイしたプロジェクト

今回紹介した手順をもとに以下のプロジェクトをデプロイし、動作確認ができました。

使用技術スタック

注: 使用するデータベースは、MongoDBなど他のものでもOKです。

リポジトリ構成の例：

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

具体的なプロジェクトはこちら↓。Geminiを用いて会話ができるチャットボットアプリです。

Chatbotアプリ
Github
（※アプリは英語版ですが、日本語でも会話ができます。）