> ## Documentation Index
> Fetch the complete documentation index at: https://basecamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Deploy to Vercel
> リモートリポジトリのソースコードを Vercel にインポートしてデプロイしよう
## 1. ソースコードのインポート
Vercel のダッシュボードにアクセスし、**Import Project** の **Import** ボタンをクリックします。
GitHub からインポート可能なリモートリポジトリが一覧表示されるため、インポートしたいリポジトリの横にある **Import** ボタンをクリックします。
## 2. ソースコードのデプロイ
ソースコードのインポートが完了したらプロジェクトのデプロイ画面が表示されるため、**Deploy** ボタンをクリックして一旦デプロイします。
デプロイが問題なく完了すると **Congratulations!** と完了画面が表示されますので、**Continue to Dashboard** ボタンをクリックしてダッシュボードに戻ります。
## 3. ドメイン名の確認
プロジェクトのホームに戻ったら画面中央あたりにある **Domains** の下に表示されているドメイン名を確認します。
## 4. 環境変数の設定
一旦デプロイしましたが今のままではフレームが正しく表示されないため、画面上部にある **Settings** タブをクリックし、プロジェクトの設定画面にアクセスします。
プロジェクトの設定画面が表示されたら、左側のメニューから **Environment Variables** をクリックして環境変数の設定画面にアクセスします。
必要な環境変数の設定を追加するため、**Create new** タブの中の `Key` に `APP_URL`、`Value` に `https://` に [ドメイン名の確認](#3) で確認したドメイン名を加えた値を入力し **Save** ボタンをクリックして設定を保存します。
## 5. 環境変数設定の反映
環境変数を追加・変更した場合、ソースコードをデプロイするまで設定は有効になりません。
画面上部の **Deployments** タブからデプロイの履歴にアクセスし、履歴の右側にある三点リーダーアイコンをクリックし、表示されたメニューから **Redeploy** をクリックし、先ほど一旦デプロイしたソースコードを再デプロイします。
## 6. フレームのテスト
再デプロイが完了したら、Warpcast の [Developers: Embeds](https://warpcast.com/~/developers/embeds) にアクセスし、テスターの入力欄に `https://{your_domain}/frames` と入力、**Fetch** ボタンをクリックしてフレームを読み込みます。
問題なくフレームが読み込まれれば入力欄の下にフレームが描画されます。
