1. ソースコードのインポート
Vercel のダッシュボードにアクセスし、Import Project の Import ボタンをクリックします。
デプロイ方法の選択画面
リモートリポジトリの一覧画面
2. ソースコードのデプロイ
ソースコードのインポートが完了したらプロジェクトのデプロイ画面が表示されるため、Deploy ボタンをクリックして一旦デプロイします。
プロジェクトのデプロイ画面
デプロイ完了画面
3. ドメイン名の確認
プロジェクトのホームに戻ったら画面中央あたりにある Domains の下に表示されているドメイン名を確認します。
プロジェクトのホーム
4. 環境変数の設定
一旦デプロイしましたが今のままではフレームが正しく表示されないため、画面上部にある Settings タブをクリックし、プロジェクトの設定画面にアクセスします。
プロジェクトの設定画面
Key に APP_URL、Value に https:// に ドメイン名の確認 で確認したドメイン名を加えた値を入力し Save ボタンをクリックして設定を保存します。
環境変数の設定画面
5. 環境変数設定の反映
環境変数を追加・変更した場合、ソースコードをデプロイするまで設定は有効になりません。画面上部の Deployments タブからデプロイの履歴にアクセスし、履歴の右側にある三点リーダーアイコンをクリックし、表示されたメニューから Redeploy をクリックし、先ほど一旦デプロイしたソースコードを再デプロイします。
デプロイ履歴の一覧画面
6. フレームのテスト
再デプロイが完了したら、Warpcast の Developers: Embeds にアクセスし、テスターの入力欄にhttps://{your_domain}/frames と入力、Fetch ボタンをクリックしてフレームを読み込みます。
問題なくフレームが読み込まれれば入力欄の下にフレームが描画されます。
フレームのテスト画面