この記事の要点(TL;DR)
- Vercelに新規プロジェクトを作ってデプロイしたら、本番URLを開いてもサイトが出ず、302でVercelのログイン画面に飛ばされました。
- コードもビルドも正常。原因は 新規プロジェクトでデフォルトONになっている「Vercel Authentication(
ssoProtection)」 でした。 - 直し方は「設定画面でOFFにする」だけですが、Vercel APIから1発で消す方法も書いておきます。
- 新しくVercelプロジェクトを作るたびに確認する項目として覚えておくといいです。
何が起きたか
個人開発で 補助金ナビ(hojokin-db.jp) という補助金の検索サイトを作っていて、Vercelに新規プロジェクトを作ってデプロイしました。
npx vercel --prod --yes
デプロイは成功。ログにも Production: https://xxxxx.vercel.app と出ています。
ところが、そのURLを開くと——自分のサイトが出ずに、Vercelのログイン画面が出ました。
curl で確認すると、こうなっていました。
$ curl -I https://xxxxx.vercel.app
HTTP/2 302
location: https://vercel.com/sso-api?url=...
302 は「別のURLに転送します」という意味のステータスコードです。転送先が vercel.com/sso-api になっているので、Vercelが自分でログイン画面に飛ばしていることが分かります。
つまり、アプリのコードは一切悪くありません。
原因:Vercel Authentication がデフォルトでON
Vercelには Vercel Authentication(Deployment Protection の一種) という機能があります。
これは何?:デプロイしたサイトを Vercelにログインしているチームメンバーしか見られないようにする機能です。「公開前の社内確認用サイトを外部に見せたくない」というときに便利なやつです。
問題は、アカウントやプランの設定によっては、新規プロジェクトでこれが最初からONになっていることです。
自分の場合、ShibaHubなど前に作ったプロジェクトでは踏まなかったのに、新しく作った補助金ナビでいきなり踏みました。設定が変わったタイミングで作ったプロジェクトだけ、という感じです。
「昔は大丈夫だったから今回も大丈夫」が通用しません。 新規プロジェクトを作ったら、まず疑うポイントです。
直し方1:ダッシュボードでOFFにする(普通のやり方)
- Vercelのダッシュボードで対象プロジェクトを開く
- Settings → Deployment Protection
- Vercel Authentication を Disabled にする
- Save
これで本番URLが誰でも見られるようになります。だいたいの人はこれでOKです。
直し方2:APIから消す(CLI派向け)
自分はブラウザ操作をなるべく減らしたかったので、Vercelの管理APIから消しました。プロジェクトの設定を更新するAPIに、ssoProtection を null にして投げます。
curl -X PATCH "https://api.vercel.com/v9/projects/{プロジェクトIDまたは名前}" \
-H "Authorization: Bearer {トークン}" \
-H "Content-Type: application/json" \
-d '{"ssoProtection": null}'
null を入れるのがポイントです。「保護なし」を表す値がこれです。
トークンはどこにある?
新しくトークンを発行してもいいのですが、Vercel CLIでログイン済みなら、ローカルに保存されているものが使えます。
Windowsだとこの場所にありました。
C:\Users\{ユーザー名}\AppData\Roaming\xdg.data\com.vercel.cli\auth.json
中に {"token": "..."} が入っています。
⚠️ 注意:これはアカウントの操作権限をそのまま持つトークンです。中身をブログやスクショに貼らない、GitHubにコミットしないよう気をつけてください(自分は確認のあと環境変数に入れて使いました)。
Team配下のプロジェクトの場合は、クエリに teamId が必要になることがあります。
https://api.vercel.com/v9/projects/{id}?teamId={team_xxx}
実行後、もう一度 curl -I して 200 が返れば成功です。
$ curl -I https://xxxxx.vercel.app
HTTP/2 200
ついでに:SSL周りで似た「焦り」がある
このあと独自ドメイン(hojokin-db.jp)を繋いだときにも、似た紛らわしい状態がありました。
- DNSは反映済み
- HTTP(
http://)ではアクセスできる - でも HTTPS(
https://)だけ失敗する
これは壊れているのではなく、SSL証明書の発行がDNS反映より10〜15分ほど遅れて完了するという、ただの途中経過でした。ここで慌てて設定をいじると余計こじれるので、10分ほど待ってからもう一度確認するのが正解です。
まとめ:新規Vercelプロジェクトのチェックリスト
同じことで悩む人向けに、自分用のチェックリストを置いておきます。
- デプロイは成功したのにサイトが出ない → まず
curl -Iでステータスコードを見る -
302 で
vercel.com/sso-apiに飛ぶ → Vercel Authentication がONになっている - Settings → Deployment Protection → Disabled(またはAPIで
ssoProtection: null) - 独自ドメインを繋いだ直後の HTTPSだけ失敗 は、証明書発行待ちの可能性。10〜15分待つ
「コードは正しいのに表示されない」ときは、だいたいアプリの外側(プラットフォームの設定・DNS・証明書)が原因です。まずHTTPステータスを見る、が一番の近道でした。
作っているものはこちらです。