[Q&A] vercelの環境変数について

vercelの環境変数について

解決したいこと

今までsupabaseなどで使用していた環境変数は.env.localで管理していたのですが、gitでは.env.localファイルは追跡、いわゆるプッシュが行われません、
そのためこの二つの環境変数をvercelに導入したいのですが、
おそらくANONKEYと呼ばれているくらいなので人に見せるのは危険そうなため、
vercelの機能を使って非公開で環境変数を導入したいです。

発生している問題・エラー

Error: Missing Supabase environment variables

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

Error: Missing Supabase environment variables

vercelのエラーです

該当するソースコード

// lib/supabaseClient.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

if (!supabaseUrl || !supabaseAnonKey) {
    throw new Error('Missing Supabase environment variables')
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

自分で試したこと

環境変数を入れるところを探してみたところ
このようなページに辿り着いたのですが、どのように非公開の環境変数を入れれば良いのかがわからず、質問いたしました。
もしよろしければ、皆さんのお力添えよろしくお願いいたしますm(_ _)m

1Answer

@uasi posted at 2024-08-16

その画面の Key に環境変数名を、 Value に値を入れるだけです。ただ、セキュリティに関することですので仕組みをきちんと解説します。

まず、そこに入力した環境変数は、その値をわざわざユーザーに表示するようなコードを書いたりしなければ、外部に漏れることはありません。よって非公開にすべき値を入力しても構いません。

ただし、 Next.js では、 NEXT_PUBLIC_ で始まる環境変数をクライアントサイドのコードで参照すると、ビルドしたコードに環境変数の値が埋め込まれてブラウザに配信されるため、値をユーザーが見ることができます。非公開の値は NEXT_PUBLIC_ で始まる環境変数に入れてはいけません。

しかしながら、 Supabase の anon key は、テーブルに Row Level Security が設定されている場合に限り、フロントエンドで使って構わない（つまりユーザーに見えても構わない）設計になっています。 Supabase のガイドでもテーブルの RLS を有効にした上で NEXT_PUBLIC_SUPABASE_ANON_KEY にキーを入れるコードが紹介されています。

まとめると、 Supabase の RLS が設定されていることを確認した上で、その画面で NEXT_PUBLIC_SUPABASE_URL と NEXT_PUBLIC_SUPABASE_ANON_KEY をセットしてください。

補足ですが、本当に非公開の環境変数を Next.js で使いたい場合は、 NEXT_PUBLIC_ で始まらない環境変数名にし、 API ルートなどのサーバサイドで実行される（ブラウザには配信されない）コードで参照してください。

参考：

Anon key を公開することについて https://supabase.com/docs/guides/database/secure-data
Next.js での Supabase のセットアップ https://supabase.com/docs/guides/auth/quickstarts/nextjs
NEXT_PUBLIC_ について https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser

3Like

Comments

@starMagichat
Questioner
ありがとうございます(^^)
RLSを設定することでANONKEYが見えても問題ない設計にできるのですね、supabaseにてRLSを設定してみます。
細かく解説していただきわかりやすかったです！

Are you sure you want to delete the question?