すのりらHOMEVercelで環境変数を設定する2021/5/9#VercelVercelで環境変数を使う方法を紹介します。Vercelとは?Vercelは高パフォーマンスのWebサイトを簡単に構築できるプラットフォームです。超簡単に無料で使えるのが特長です。こちらの記事を参考にしてください。Vercelの3つの環境VercelではDevelopment・Preview・Productionの3つ環境があります。devコマンドを実行すればローカルでサーバーが立ち上がります。上記コマンドを実行すると、Vercelで設定している環境変数も利用できます。PreviewProcductionブランチ以外に対してcommmitするか、vercelコマンドを実行すればVercelに自動的にデプロイされます。Preview用のURLが自動で発行されます。--prodコマンドを実行すればVercelに自動的にデプロイされます。環境変数を設定する環境変数はコンソールまたはコマンドから設定できます。コンソールから設定してみます。選択し、NAMEとVALUEを入力します。適用する環境にDevelopmentを選択してADDします。PreviewとProductionも同じようにADDします。productionと実行します。実行すると値の入力を求められます。環境変数を利用するprocess.env.NAMEで値を取得できます。環境変数の読込はコマンド実行のタイミングです。環境変数設定して再読込するにはコマンド再実行します。Previewvercelコマンドを実行して、Preview環境にデプロイします。--prodコマンドを実行して、Production環境にデプロイします。