Vercelへのデプロイ
前回の動画でリポジトリを作成しましたので、これを使ってVercelにデプロイしていきます。デプロイは非常に簡単なのでサクッと進めましょう。Vercelをまだ触ったことがない方は、Claude Code入門の講座で解説していますので、そちらを覗いておいてください。
プロジェクトをインポートする
Vercelで Add New > Project をクリックし、ビデオプラットフォームのリポジトリをインポートします。基本的な設定はそのままで大丈夫です。
環境変数を設定する
Environment Variables（環境変数）を設定していきます。エディタ側にすでに .env ファイルがあるはずなので、そちらを開いてください。
Claude Codeに .env ファイルを読み込ませた場合は、安全のためキーをローテーションしたものを貼り付けることを推奨します。Stripeキーはすべてテスト環境のキーなので、本番用に変える必要がありますが、ここではテストキーのままで大丈夫です。
.env の内容を全選択（Ctrl + A → Ctrl + C）してコピーし、Vercelの環境変数欄にそのまま Ctrl + V で貼り付けると、自動で全部の項目に分割されて入力されます。
まだ修正が必要な箇所がありますが、いったんこの状態で Deploy ボタンを押してください。これだけで簡単に公開できます。
デプロイ後にURLを更新する
環境変数の中に http://localhost:3000 を指定している箇所が2つあります。
BETTER_AUTH_URLNEXT_PUBLIC_APP_URL
これらはデプロイが完了してから本番ドメインに編集します。Stripeに関しては続いての動画で説明するので、いったんこのままで大丈夫です。
1分ほどでデプロイが完了したら、ダッシュボードに移動して動作を確認しましょう。Googleログインまわりはまだ設定していないので動きませんが、講座ページや無料ユーザーが見られる動画は本番環境で再生できる状態になっています。
環境変数を本番ドメインに書き換える
Vercelダッシュボードの Environment Variables を開き、URLで検索して BETTER_AUTH_URL と NEXT_PUBLIC_APP_URL を編集します。
- デプロイされたドメインをコピーする
- 右の3本線メニューから Edit を選択
- そのまま貼り付ける（末尾のスラッシュは不要なので削除）
- Save ボタンを押す
同様に NEXT_PUBLIC_APP_URL も貼り付けて保存し、最後に Redeploy ボタンを押します。再ビルドが走り、新しい環境変数で本番環境が動き出します。
続いての動画では、Google認証を本番環境でも動くように修正していきます。