【React＋Vite＋Supabase】.envの値の取り扱いでヒヤヒヤした話

はじめに

React＋Vite でアプリを作成中です。
今回はSupabaseを使ってデータ取得を行います。
Supabaseライブラリをインストール済であることを前提に、React環境でSupabaseを初期化する手順についてまとめています。
その中でも .envに記載のある値の扱い方をミスったので、説明をします。

下記の動画を参考に進めていきます。（該当箇所は14分～）
（DB作成方法やクライアント初期設定方法も説明してくれています。）

問題

解説動画通り下記のコードを書いたところ、このようなエラーが出ました。
"Uncaught ReferenceError: process is not defined"
動画ではNext.jsとTypeScriptを使用しているため、React環境だとエラーが出てしまいます。
エラーが出たprocessオブジェクトはNode.js環境で提供されるものであり、ブラウザー上では利用できないのですね。

supabase.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

動作は問題ないけどダメな例

最初は下記のように修正しました。が、この記載は避けたほうがいいです。

supabase.js

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のアカウントを悪用される恐れがあります。(場合によっては高額請求も)

解決方法

下記のように修正しました。

supabase.js

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);

.env.loval

VITE_SUPABASE_URL = '指定された値'
VITE_SUPABASE_ANON_KEY = '指定された値'

おわりに

解説動画にもあるように、gitプッシュする前にenvファイルを.gitignoreに追記しておかないと、ファイルの内容が筒抜けになります。　忘れずに行いましょう。
ちなみに「ダメな例」のコードですが、ChatGPTに「このエラーを解決して！」と初期のコードを投げたら返ってきました。
処理としては確かに間違っていないけど。。注意喚起とか欲しかったな。