はじめに
環境変数管理めんどくさいですよね。
こんにちは、畑田です。
自分はフロントエンド開発でNext.jsを用いる際によくVercelを使用しています。
開発するとき環境変数の管理が面倒だったので、何か良い方法がないか探していたのですが、ハッキーな方法を見つけたので、共有します。
余談ですが、以下のツイートが話題になっていたので、こちらの記事の公開のきっかけになりました。
問題
環境変数管理めんどくさいですよね。(2回目)
環境変数によってアプリの環境ごとに値が違う。どの環境変数が秘匿性のあるものなのか判断しにくい。もう使用されていない環境変数がlocalに残っている。チーム内の開発者によって持っているファイルが違い、それによって開発環境の動作に差分が出てしまう。
杜撰な管理をしていると上記のような辛さが出てきます。
ただ、1つアプリの中でユーザー側の機能と管理者機能が共存する設計などにしていると、環境変数の類はどんどん増大していき、きちんと管理しようとするとコストがかかってしまいます。
弊社では、すべてのプロジェクトで環境変数ファイルを用意し、言語ごとのライブラリでそれを読み込めるようにすることで、環境変数を管理しています。
環境変数はシークレットなものも含むので基本的にダイレクトメッセージでやりとりしていますが、開発環境のものはNotionに貼り付けて共有することで、チーム内で最新の環境変数ファイルを共有できるようにしています。
ただ、そもそも毎回ダイレクトメッセージでやりとりするのも、環境変数をある程度多数の人間が閲覧または編集できるツール上に掲載するのも、よろしくないです。
以前から、git-cryptやgit-secretを導入して安全に環境変数をバージョン管理するなども検討していました。
これは今後も機を見て導入してみたい方法の一つです。
今回は、Vercel限定ではあるものの、非常に簡単にチーム内で環境変数を共有する方法をご紹介いたします。
ハックだね
答え
早速方法論です。
vercel dev
これだけです。
このコマンドについて
このコマンドはVercelのCLIコマンドであり、Vercel環境上で動作させられるServerless Functions、Edge Functions、Edge Middlewareをlocal環境で動かすものです。
また、このコマンドを実行するとVercelは使用されているフレームワークを自動で検出し、適切なコマンドを実行してくれるようです。
すごく便利そうですが、公式からはNext.jsであればnext devであったり、Viteであればviteであったりという、nativeにサポートされているコマンドを使用することを推奨しています。
また、このコマンドを使用するためにはVercelにプロジェクトが存在していて、local環境にその設定があることが前提として必要です。
環境変数との関係
このコマンドの嬉しいところは、開発環境の再現やフレームワークの自動検出ではありません。
実はこのコマンドで開発サーバーを立ち上げると、Vercelのプロジェクトに設定されている環境変数を読み込みます。
つまり、local環境に環境変数ファイルを保持しないで開発サーバー内で環境変数にアクセスできるのです。
一言で言って神です。
この機能を使えば、チーム内で検証するのに環境変数ファイルを配布せずとも、Vercelにアクセスさえできれば環境変数を適切に設定して開発できます。
また、local環境に.env*.localを配置することで、Vercelのプロジェクトに設定されている環境変数とそのファイルの中身をマージしたものが設定されます。(このとき、キー名に重複があればVercelのプロジェクトに設定されているものが優先されます。)
これによって開発時に試しに環境変数を増やしたくなっても簡単に検証できます。
やってみよう
Vercelとの接続
Vercelのインフラの単位は大きく、TeamとProjectから構成されます。ProjectがTeamに属するという構造であり、1つのTeamに複数のProjectが属することができます。また、アカウントはTeamを複数作成することができ、他のアカウントを招待することができます。
プロジェクト自体を未作成の場合は以下の手順でTeamとProjectを作成しましょう。
Teamを作成
まずは、こちらからVercelにTeamを作りましょう。
Projectを作成
以下の画像の右上のボタンをクリックするとプルダウンが現れるので、「Project」をクリックしてプロジェクトを作成します。
左の枠の中から同期するレポジトリを選択します。
以下からプロジェクト作成を実行します。
環境変数を設定
Vercelのダッシュボードに進み、Settingsタブを開きます。
サイドバーのEnvironment Variablesをクリックすると環境変数管理画面が現れます。
ここで適切に環境変数を設定しましょう。
今回は試しに以下を設定しています。
ABC=hello
local環境にVercelのプロジェクトをつなげる
まずはVercel CLIをインストールします。
npm install -g vercel
開発環境のルートディレクトリに移動し、以下のコマンドを実行します。
vercel link
あとは対話形式で入力していくとVercelのプロジェクトとlocalの環境が接続され、プロジェクトの情報が.vercel/project.jsonに設定されます。
これで準備は完了です。
早速先ほどの開発コマンドを実行してみましょう。
vercel dev
立ち上がりましたね。アプリの中で、console.log(process.env.ABC)と書いてみましょう。consoleにきちんと表示されました。
hello
まとめ
今回はVercelに設定した環境変数を開発環境で使用することで開発時の環境変数管理コストを下げました。
読者の方もチーム内で環境変数管理に悩んだときはこちらの方法の採用をご一考ください。
今後、アプリの環境ごと再現性を高めながらデプロイメントの簡単化及び高頻度化を図ることで、質の高いアプリを量産していきます。
Discussion