Zenn
🚀

【Vercel / Next.js】環境変数設定の注意点アレコレ

2024/08/17に公開
Next.js
TypeScript
Vercel
デプロイ
環境変数
tech

はじめに

Next.jsプロジェクトをVercelにデプロイする際、環境変数の扱いについて少し調べたので備忘録的なアウトプットです。
見出しの順序は順不同でトピックはそれぞれ独立しています。（のはずです）

■環境変数を設定するファイル（.env.local）

プロジェクトのルートディレクトリに .env.local ファイルを作成。
ローカル環境ではこのファイルに環境変数を記述します。

ターミナル
touch .env.local # エディター側で手動で作成してももちろんOK

■環境変数の命名規則

Next.jsのAPIルートなどのサーバーサイドで使用するだけなら命名は気にしなくてOK。
もしコンポーネント側でfetch関数などで直接使用する場合には環境変数の命名時に接頭辞として NEXT_PUBLIC_ を付ける必要がある。

.env.local
# サーバーサイドでのみ使用する場合
API_SECRET_KEY=dummydummydummydummydummy

# クライアントサイドで使用する場合
NEXT_PUBLIC_API_URL=https://api.example.com
セキュリティリスクの例

もし NEXT_PUBLIC_ を誤ってAPIのシークレットキーやトークンに付けてしまうと、そのキーがクライアント側で公開され、悪意のあるユーザーがそのキーを使って不正アクセスを試みる可能性があります。

クライアントサイドの使用例（NEXT_PUBLIC_を付けるケース）

例えば、Google AnalyticsのトラッキングIDや、外部サービスの公開可能なキー（公開鍵）など、クライアントサイドで必要となる場合は NEXT_PUBLIC_ 接頭辞をつけて管理する。

■環境変数の使い方

process.env を用いる

例
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

■環境変数使用時のエクスクラメーションマーク（！）

TypeScriptを扱っているプロジェクトで環境変数の使用に際して、末尾にエクスクラメーションが入っているのを目にすることがあると思います。

例
const apiUrl = process.env.NEXT_PUBLIC_API_URL!;

が、これはTypeScriptの「非nullアサーション演算子」というものです。
これは、ある変数が null や undefined でないことをTypeScriptに明示的に伝えるために使われます。
これにより、TypeScriptはその変数が存在することを前提として処理をします。
この場合、TypeScriptは NEXT_PUBLIC_API_URL が必ず存在すると見なしますが、実際にこの変数が存在しない場合、ランタイムエラーが発生します。

エクスクラメーションマークは必須なの？

結論必須ではありません。
付けていなくても処理は走りますがTypeScriptを使用している場合VSCodeなどのエディター側で「変数が存在しない可能性があるかもよ〜」的なアラートを出すことがあり、その場合は末尾に ! を付けることで警告を抑止できます。

■Vercelの環境変数はデプロイ前にあらかじめ設定しておく

Vercelに限った話ではないと思いますが、公式ドキュメントにもあるようにビルド時に環境変数を読み込むため、デプロイ前に環境変数設定をしておいた方が2度手間にならずに済みます。（といいつつ、私はやらかしました^q^）

あらかじめVercel側で環境変数設定をするのを失念して先にデプロイしてしまっても再度ビルドすればいいだけですが、
少し言い換えればデプロイ後にVercelで環境変数を設定した場合、その環境変数は次のビルドが実行されるまでアプリケーションには反映されません。つまり、すぐには環境変数が適用されないため、環境変数を使用するコードはその時点では期待通りに動作しない可能性があります。
（ローカルだとうまくいくのに〜ってやつ）

Vercelで環境変数を使用する場合、先に設定を行い、その後デプロイ（自動デプロイが走るのでpush）しましょう。

■Vercel側の環境変数設定方法

  1. Setting を選択

  2. Environment Variables を選択

  3. Key と Value を追加する
    Add Another で項目追加

■再ビルドの方法論と手順

Vercelのダッシュボードから再ビルド（GUI）
  1. Vercelのダッシュボードにアクセスし、対象のプロジェクトを選択。
  2. Deploymentsタブに移動。
  3. 再ビルドしたいコミットやブランチに対応するデプロイメントを選択し、 Redeploy をクリック。
Deploy Hookを利用して再ビルド（CLI）

Vercel側でDeploy Hookを準備

  1. Vercelのダッシュボードでプロジェクトを選択。
  2. Settingsタブに移動。
  3. Gitセクションの「Deploy Hooks」を探し、Create Hookをクリック。
  4. Hookの名前とターゲットブランチを設定して、「Create Hook」ボタンをクリック。
  5. フックURLが生成されるのでこのURLをコピーしておく。

curlコマンドでターミナルからPOSTリクエストを送る

ターミナル
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_<project_id>/<hook_id>?buildCache=false

補足

  • -X POST: POSTリクエストを送信するためのオプションです。
  • ?buildCache=false: キャッシュを無効にしてクリーンビルドを実行したい場合に付け加えます。
    キャッシュを無視してビルドが行われるのでトラブルシューティング時に有用です。
    キャッシュを利用したい場合は省略します。

セキュリティ上の注意点

Deploy Hook URL は機密性が高い情報です。公開されないように注意し、不正なアクセスを防ぐために必要に応じて再生成や削除を行うこと。

この記事が参考になります。
https://zenn.dev/unemployed/articles/vercel-deployhook

さいごに

環境変数に関するアレコレを列挙してきましたが、なにかしらが誰かしらの作業効率に貢献できるとうれしいです。
以上でございます。

Discussion