2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-02-07

はじめに

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に「このエラーを解決して!」と初期のコードを投げたら返ってきました。
処理としては確かに間違っていないけど。。注意喚起とか欲しかったな。

2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?