【ITニュース解説】How to Inherit .env in a Vite + Supabase Project

ViteとSupabaseを組み合わせてWebアプリケーションを開発する際、プロジェクトの設定や外部サービスへの接続情報をどのように管理するかは非常に重要だ。特に、データベースのURLやAPIキーといったデリケートな情報は、環境変数という形で管理するのが一般的である。この解説では、既にViteとSupabaseを使った古いプロジェクトで設定済みの環境変数を、新しく作成するプロジェクトで効率的に再利用する方法について、システムエンジニアを目指す初心者にも理解できるように詳しく説明する。

まず、環境変数とは何かから説明を始める。Webアプリケーション開発では、開発環境、テスト環境、本番環境といった複数の環境でアプリケーションを動かすことがよくある。これらの環境ごとにデータベースの接続先やAPIキーなどが異なる場合、コードの中に直接それらの情報を書き込んでしまうと、環境を切り替えるたびにコードを修正する必要が生じてしまう。また、GitHubのような公開リポジトリにコードをアップロードした際に、秘密情報が漏洩するリスクも伴う。このような問題を解決するために、環境変数という仕組みが用いられる。環境変数は、コードとは別の場所で設定値を管理し、アプリケーションが実行される際にその値を読み込むことで、コードを変更することなく異なる環境に対応したり、秘密情報を保護したりすることを可能にする。

Viteプロジェクトでは、環境変数を.envというファイルに記述するのが一般的な方法だ。この.envファイルは通常、プロジェクトのルートディレクトリに配置され、KEY=VALUEの形式で環境変数を定義する。Viteには、セキュリティに関する重要なルールがある。ブラウザ側でアクセス可能な環境変数には、必ずVITE_というプレフィックスを付ける必要がある。例えば、SupabaseのURLであればVITE_SUPABASE_URL、Supabaseの公開APIキーであればVITE_SUPABASE_ANON_KEYのように定義する。このVITE_プレフィックスが付いていない環境変数は、Viteのビルドプロセス中でのみ利用され、完成したアプリケーションがブラウザで実行される際にはアクセスできないようになっている。

Supabaseは、Webアプリケーションのバックエンド機能（データベース、認証、ストレージなど）を簡単に利用できるサービスだ。Viteなどのフロントエンドフレームワークと組み合わせて利用されることが多く、Supabaseを利用するには、接続先のSupabaseプロジェクトを示すURLと、そのプロジェクトにアクセスするためのAPIキーが必要となる。これらの情報は、もちろん環境変数として.envファイルで管理することが推奨される。

それでは、具体的な環境変数の再利用手順を見ていこう。例えば、react1という古いVite+SupabaseプロジェクトでSupabaseの環境変数が既に設定されており、これをtype-class1という新しいプロジェクトで利用したいと仮定する。

最初のステップは、古いプロジェクトの.envファイルを見つけることだ。.envファイルは、ファイル名の先頭にピリオド（.）が付いているため、通常は隠しファイルとして扱われる。そのため、ターミナルでls -aコマンドを使って表示させる必要がある。例えば、古いプロジェクトが~/workspace/react1というパスにある場合、ターミナルでls -a ~/workspace/react1と入力して実行する。lsは指定したディレクトリ内のファイルやフォルダを一覧表示するコマンドで、-aオプションは隠しファイルも表示させるために使う。このコマンドの実行結果に.envというファイル名が表示されれば、そのプロジェクトに環境変数ファイルが存在することが確認できる。.envはファイルなので、フォルダのようにcd .envといったコマンドで中に入ることはできないので注意しよう。

次に、見つかった.envファイルの内容を確認する。内容を表示するには、catコマンドが便利だ。例えば、cat ~/workspace/react1/.envと入力して実行する。catコマンドは、指定したファイルの内容をターミナルに表示する。このコマンドを実行すると、以下のような形式でSupabaseに関連する環境変数が出力されるはずだ。

VITE_SUPABASE_URL=https://abcd1234.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...

ここで表示されているVITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYが、Supabaseに接続するために不可欠な情報だ。https://abcd1234.supabase.coはSupabaseプロジェクトのURLを、eyJhbGciOiJIUzI1NiIsInR5cCI6...はSupabaseプロジェクトの公開APIキー（Anon Key）を示している。これらの情報は、新しいプロジェクトでも同じSupabaseプロジェクトに接続するために、そのまま利用できる。

さらに、Supabaseクライアントがこれらの環境変数を適切に読み込むように設定されているかを確認する必要がある。通常、Supabaseクライアントの初期化はsupabaseClient.jsのようなファイルで行われる。このファイルの中身は、以下のような構造になっているはずだ。

Copy
1import { createClient } from ‘@supabase/supabase-js’
2
3const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
4const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
5
6export const supabase = createClient(supabaseUrl, supabaseAnonKey)

このコードでは、@supabase/supabase-jsライブラリからcreateClient関数をインポートしている。そして、import.meta.env.VITE_SUPABASE_URLとimport.meta.env.VITE_SUPABASE_ANON_KEYという記述によって、Viteが提供するグローバルなimport.meta.envオブジェクトから、.envファイルに定義された環境変数の値を取得している。import.meta.envは、Viteが開発サーバーの実行や本番用ビルドを行う際に、.envファイルの内容を読み込み、コードからアクセスできるようにしてくれる特別な機能だ。このようにして取得されたSupabaseのURLとAPIキーがcreateClient関数に渡され、Supabaseクライアントが正しく初期化されていることを確認できれば、環境変数の読み込み設定は適切であると言える。

これらの確認が完了したら、新しいプロジェクトでSupabase環境変数を再利用する準備は整ったことになる。具体的な再利用方法は非常にシンプルで、古いプロジェクトから確認した内容の.envファイルを、新しいプロジェクトのルートディレクトリにコピーするだけだ。例えば、cp ~/workspace/react1/.env ~/workspace/type-class1/.envといったコマンドでファイルをコピーできる。新しいプロジェクトも、同様にsupabaseClient.jsがimport.meta.envを使って環境変数を読み込むように設定されていれば、特別なコードの変更をすることなく、すぐに同じSupabaseプロジェクトに接続できるようになる。

まとめると、ViteとSupabaseのプロジェクトで環境変数を再利用する手順は、まずls -aコマンドを使って古いプロジェクトの.envファイルの存在を確認し、次にcatコマンドでその内容、特にVITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYの値を確認することだ。そして、supabaseClient.jsファイル内でimport.meta.envを使ってこれらの環境変数が正しく読み込まれていることを確認する。これらの確認が全て完了したら、古いプロジェクトの.envファイルを新しいプロジェクトにコピーするだけで、Supabaseへの接続設定を簡単に引き継ぎ、開発プロセスをより効率的かつ安全に進めることができるだろう。この手順を理解し実践することは、あなたのシステムエンジニアとしてのスキルを向上させるための重要な一歩となる。