はじめに
React+Vite でアプリを作成中です。
今回はSupabaseを使ってデータ取得を行います。
Supabaseライブラリをインストール済であることを前提に、React環境でSupabaseを初期化する手順についてまとめています。
その中でも .envに記載のある値の扱い方をミスったので、説明をします。
下記の動画を参考に進めていきます。(該当箇所は14分~)
(DB作成方法やクライアント初期設定方法も説明してくれています。)
問題
解説動画通り下記のコードを書いたところ、このようなエラーが出ました。
"Uncaught ReferenceError: process is not defined"
動画ではNext.jsとTypeScriptを使用しているため、React環境だとエラーが出てしまいます。
エラーが出たprocessオブジェクトはNode.js環境で提供されるものであり、ブラウザー上では利用できないのですね。
import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
export const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
動作は問題ないけどダメな例
最初は下記のように修正しました。が、この記載は避けたほうがいいです。
import { createClient } from '@supabase/supabase-js';
const SUPABASE_URL = '.env.localに記載の値';
const SUPABASE_ANON_KEY = '.env.localに記載の値';
export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
なぜダメなのか
keyの値を公開してしまうと、supabaseのアカウントを悪用される恐れがあります。(場合によっては高額請求も)
解決方法
下記のように修正しました。
import { createClient } from '@supabase/supabase-js';
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY;
export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
VITE_SUPABASE_URL = '指定された値'
VITE_SUPABASE_ANON_KEY = '指定された値'
おわりに
解説動画にもあるように、gitプッシュする前にenvファイルを.gitignoreに追記しておかないと、ファイルの内容が筒抜けになります。 忘れずに行いましょう。
ちなみに「ダメな例」のコードですが、ChatGPTに「このエラーを解決して!」と初期のコードを投げたら返ってきました。
処理としては確かに間違っていないけど。。注意喚起とか欲しかったな。