Vercelで環境変数を設定する

Vercelで環境変数を使う方法を紹介します。

Vercelとは？

Vercelは高パフォーマンスのWebサイトを簡単に構築できるプラットフォームです。 超簡単に無料で使えるのが特長です。こちらの記事を参考にしてください。

Vercelの3つの環境

VercelではDevelopment・Preview・Productionの3つ環境があります。

Development

vercel devコマンドを実行すればローカルでサーバーが立ち上がります。 上記コマンドを実行すると、Vercelで設定している環境変数も利用できます。

Preview

Procductionブランチ以外に対してcommmitするか、vercelコマンドを実行すればVercelに自動的にデプロイされます。 Preview用のURLが自動で発行されます。

Production

Procductionブランチに対してcommmitするか、vercel --prodコマンドを実行すればVercelに自動的にデプロイされます。

環境変数を設定する

環境変数はコンソールまたはコマンドから設定できます。

まずはコンソールから設定してみます。Settings > Environment Variables を選択し、NAMEとVALUEを入力します。 適用する環境にDevelopmentを選択してADDします。

PreviewとProductionも同じようにADDします。

コマンドから実行するには、例えば本番に設定するにはvercel env add FAVORITE productionと実行します。 実行すると値の入力を求められます。

環境変数を利用する

process.env.NAMEで値を取得できます。

export default function DisplayEnv({ pokemon }) {
  return <div>{pokemon}</div>;
}

export async function getStaticProps() {
  return {
    props: {
      pokemon: process.env.FAVORITE_POKEMON,
    },
  };
}

環境ごとに値が異なることを確認する

Development

vercel devで起動します。環境変数の読込はコマンド実行のタイミングです。環境変数設定して再読込するにはコマンド再実行します。

Preview

vercelコマンドを実行して、Preview環境にデプロイします。

Production

vercel --prodコマンドを実行して、Production環境にデプロイします。

まとめ

環境設定する際の参考にしてください！