Vercel セットアップガイド

Windows / VS Code 版 - ステップ 2/4

Vercelアカウント登録

Vercelは、Webアプリケーションを簡単に公開できるホスティングサービスです。無料プランで利用できます。

1 vercel.comにアクセス
vercel.com を開き、右上のハンバーガーメニュー(≡)をクリックします。
vercel.comのトップページ
2 Sign Upを選択
メニューが開いたら、「Sign Up」をクリックします。
Sign Up選択画面
3 プランの選択と名前の入力
Plan Typeで「I'm working on personal projects」(Hobby)を選択します。Your Nameに名前を入力し、「Continue」をクリックします。
※画面の名前はサンプルです。ご自身の名前を入力してください。
プラン選択と名前入力画面
4 Googleアカウントで登録
「Continue with Google」をクリックします。
Googleアカウントで登録画面
5 Googleアカウントを選択
お使いのGoogleアカウントを選択してください。
※表示されるアカウント名は人によって異なります。ご自身のアカウントを選択してください。
Googleアカウント選択画面
6 アクセスを許可
GoogleがVercelへのアクセスを許可する画面です。内容を確認し、「次へ」をクリックします。
Googleアクセス許可画面
7 電話番号の認証
電話番号を入力してSMS認証を行います。日本の番号の場合は国旗が日本になっていることを確認し、電話番号を入力して「Continue」をクリックします。届いた認証コードを入力してください。
※電話番号はサンプルです。ご自身の番号を入力してください。
電話番号認証画面
8 登録完了
ダッシュボードが表示されれば、アカウント登録は完了です。
Vercelダッシュボード画面

Vercelトークンの作成

トークンは、Claude CodeなどのツールがVercelに接続するための「鍵」のようなものです。

1 アカウントのSettingsを開く
ダッシュボード左下(画面幅によっては右上)にあるユーザーアイコンをクリックします。メニューが表示されるので、「Settings」をクリックします。
注意

左サイドバーにも「Settings」がありますが、トークンを作成できるのはユーザーアイコンから開くSettingsです。間違えやすいのでご注意ください。

ユーザーアイコンからSettingsを開く
2 Tokensページを開く
Settings画面の左メニューから「Tokens」をクリックします。
Settings画面
3 トークンを作成
「Create Token」セクションで、トークンの名前(任意、例:「token1」)を入力します。Scopeは「Full Account」のまま、ExpirationはそのままでOKです。「Create」をクリックします。
トークン作成画面
4 トークンをコピーして保存
「Token Created」ダイアログが表示されます。表示されたトークン文字列の右側にあるコピーボタンをクリックして、必ずメモ帳などに貼り付けて保存してください。
トークンコピー画面
重要:トークンは必ずコピーして保存してください

このトークンは一度しか表示されません。「Done」をクリックした後は二度と確認できません。

メモ帳やテキストファイルなど、安全な場所に保存してください。紛失した場合は、Settings → Tokens から新しいトークンを作り直す必要があります。

データベースの追加(Neon または Turso)

どちらか1つだけ設定すればOKです

Neon(PostgreSQL型)とTurso(SQLite型)の2種類から選べます。どちらも無料プランがあります。迷った場合はNeonを選んでください。両方設定しても問題ありません。

Marketplaceへのアクセス(共通手順)

1 Integrationsページを開く
ダッシュボード左サイドバーの「Integrations」をクリックし、「Browse Marketplace」をクリックします。
Integrationsページ
2 Marketplaceで検索
Marketplace画面が開きます。ここからNeonまたはTursoを探します。
Marketplace画面

選択肢A:Neon(PostgreSQL)

A1 Neonを選択
Neonのページを開きます。
Neonページ
A2 利用規約に同意
利用規約を確認し、「Accept and Create」をクリックします。
Neon利用規約画面
A3 設定の確認
Region(地域)は「Singapore (Southeast)」を選択(日本から近い)。プランは「Free」のままでOKです。Authはオンのままで構いません。
Neon設定画面
A4 確認して作成
Resource Name(データベース名)は自動で付けられます。そのままで問題ありません。「Create」をクリックします。
Neon作成確認画面
A5 データベース作成完了
「Your Neon database is ready to use」と表示されれば成功です。「Continue」をクリックします。
Neonデータベース作成完了画面
A6 プロジェクト接続はスキップ
「Connect a Project」画面が表示されますが、今は接続するプロジェクトがないので「Skip」をクリックします。
Neonプロジェクト接続スキップ画面

選択肢B:Turso(SQLite)

B1 Tursoを選択
Marketplaceに戻り、Turso Cloudのページを開きます。
Tursoページ
B2 利用規約に同意
利用規約を確認し、「Accept and Create」をクリックします。
Turso利用規約画面
B3 設定の確認
Primary Regionは「AP NorthEast (Tokyo)」を選択します。プランは「Starter($0/month)」のままでOKです。
Turso設定画面
B4 確認して作成
Resource Name(データベース名)はそのままで問題ありません。「Create」をクリックします。
Turso作成確認画面
B5 データベース作成完了
「Your Turso Cloud database is ready to use」と表示されれば成功です。「Continue」をクリックします。
Tursoデータベース作成完了画面
B6 プロジェクト接続はスキップ
「Connect a Project」画面は「Skip」をクリックします。
Tursoプロジェクト接続スキップ画面
Storageの確認
左サイドバーの「Storage」をクリックすると、作成したデータベースが一覧に表示されます。これでデータベースの準備は完了です。
Storage確認画面
AIヘルプ
セットアップで困っていることを教えてください。このガイドの内容に基づいてお答えします。