どんな話？
鍵（APIキー）の置き場と、ログインの前に決めることを、2枚の紙にまとめた回です。鍵を置いてはいけないのは、お願いの文、コードの中、NEXT_PUBLIC_の付いた置き場。置き場は環境変数で、お願いの文には名前だけを書きます。制作時のv0の画面は一覧を見るだけの場所で、足す・直す・消すはVercelの側でした。プレビューが読めるのは、Developmentの環境変数だけ。ログインは、誰が・何をできるかを先に紙に書きます。
この記事でわかること
- 鍵を置いてはいけない場所は3つ。v0へのお願いの文、コードの中、ブラウザ側に届く置き場
- 「Environment Variables」の画面のいちばん上は「Environment variables live in Vercel」。足す・直す・消すはVercelの側で、v0の画面は、一覧を見るだけの場所になっていた
- 環境変数の区分は、Production・Preview・Developmentの3つ。v0のプレビュー画面が読めるのは、Developmentの環境変数だけ、と公式に書かれている
- 名前が「NEXT_PUBLIC_」で始まる環境変数は、ブラウザ側に届く。v0の公式の説明にも、秘密の鍵に、NEXT_PUBLIC_を付けてはいけない、と書かれている
- 漏れたかもしれない鍵は、消すのではなく取り替える。鍵を無効にする、新しい鍵を作る、環境変数に入れ直す、アプリを公開し直す、の4つ
- ログインが要るのは、「人によって、見せるものを変えたい」とき。連携の一覧の「Auth」には、ClerkとAuth0の2つが並んでいた。制作では押していない
やることチェックリスト
0/5記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。
ぜんぶできた！おつかれさまでした。
くわしい手順と画面の図は、Xの記事にあります。
こんな人に
- 「APIキーを入れてください」と言われ、その長い文字列をどこに書けばいいのかわからず、チャットにそのまま貼りそうになった人
- 環境変数の名前の付け方と、プレビューと公開で使い分ける区分を知りたい人
- ログインを付ける前に、誰が・何をできるかを決めておきたい人
この話のTIPS
- 注意名前が「NEXT_PUBLIC_」で始まる環境変数は、ブラウザ側に届く。PUBLICは「公開の」という意味です。名前の頭にこの言葉を付けた時点で、その値は、アプリを開いた人なら誰でも調べられるものになります。v0の公式の説明にも、はっきり書かれています。秘密の鍵に、NEXT_PUBLIC_を付けてはいけない。
- コツv0のプレビュー画面が読めるのは、Developmentの環境変数だけ、と公式に書かれています。Productionにだけ鍵を入れると、公開したアプリでは動くのに、v0のプレビューでは動かない。逆に、Developmentにだけ入れると、プレビューでは動くのに、公開したら動かない。