0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vercelにデプロイしたのに本番URLが302でログイン画面に飛ぶ——犯人はデフォルトONの「Vercel Authentication」

0
Posted at

この記事の要点(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にする(普通のやり方)

  1. Vercelのダッシュボードで対象プロジェクトを開く
  2. SettingsDeployment Protection
  3. Vercel AuthenticationDisabled にする
  4. Save

これで本番URLが誰でも見られるようになります。だいたいの人はこれでOKです。

直し方2:APIから消す(CLI派向け)

自分はブラウザ操作をなるべく減らしたかったので、Vercelの管理APIから消しました。プロジェクトの設定を更新するAPIに、ssoProtectionnull にして投げます。

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プロジェクトのチェックリスト

同じことで悩む人向けに、自分用のチェックリストを置いておきます。

  1. デプロイは成功したのにサイトが出ない → まず curl -I でステータスコードを見る
  2. 302 で vercel.com/sso-api に飛ぶ → Vercel Authentication がONになっている
  3. Settings → Deployment Protection → Disabled(またはAPIで ssoProtection: null
  4. 独自ドメインを繋いだ直後の HTTPSだけ失敗 は、証明書発行待ちの可能性。10〜15分待つ

「コードは正しいのに表示されない」ときは、だいたいアプリの外側(プラットフォームの設定・DNS・証明書)が原因です。まずHTTPステータスを見る、が一番の近道でした。

作っているものはこちらです。

  • 補助金ナビ … デジタル庁のjGrants APIを使った補助金検索サイト
  • ShibaHub … 無料の計算ツールを集めたサイト
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?