Closed11

vercelで環境構築&環境変数設定

umyomyomyonumyomyomyon

作成したサンプルプロジェクトの中に環境変数確認用のページを追加

import { GetStaticProps, NextPage } from "next";

type Props = {
  envValue: string | undefined
}

const Check: NextPage<Props> = ({ envValue }) => {
  return (
    <p>{envValue}</p>
  )
}
export default Check

export const getStaticProps: GetStaticProps<Props> = () => {
  return {
    props: {
      envValue: process.env.ENV_KEY
    }
  }
}
umyomyomyonumyomyomyon

確認用ページ作成
pages/check/index.tsx

import { GetStaticProps, NextPage } from "next";

type Props = {
  envValue: string | null
}

const Check: NextPage<Props> = ({ envValue }) => {
  return (
    <p>{envValue}</p>
  )
}
export default Check

export const getStaticProps: GetStaticProps<Props> = () => {
  return {
    props: {
      envValue: process.env.ENV_KEY || null
    }
  }
}

umyomyomyonumyomyomyon

vercelと連携する

  • add newから既存のgithubリポジトリをimportすれば勝手に初回デプロイまで実行してくれる
umyomyomyonumyomyomyon

Settings > Domains

Git Branchをdevelopに設定してdevelop用ドメインを作成する
これでdevelopブランチにマージされると、このドメインに対してデプロイが実行される
stagingも同様

previewとproduction

Settings > Gitを確認するとmainブランチがproduction branchとして設定されているので、mainブランチを割り当てたドメインはProduction扱いとなる

umyomyomyonumyomyomyon

Settings > Environment Variables

Settings > Environment Variablesから各環境で使用する環境変数を設定することができる。
vercelで設定できる環境変数にはproduction, preivew, developmentの3種類がある。

production

production環境に適用される環境変数

preview

プレビュー環境に適用される環境変数
↑でdevelopとstagingブランチを割り当てたドメインはpreview環境となっている
それぞれの環境で別の環境変数を使いたい場合が多い
その場合のために、previewの環境変数はブランチ別に使用する環境変数を設定することができる
環境変数設定でpreview環境のみにチェックを入れ、Select custom branchからdevelopを選択して環境変数を設定する

こうすることにより、preview環境かつdevelopブランチを割り当てたドメインでのみENV_KEYの値がDEVELOPとなっている

development

production, previewはvercel上の各環境で使用する環境変数を設定するものだったが、development environment variablesは開発者がローカルで使用するための環境変数を設定する項目になっている
例えば、developmentのみにチェックを入れてENV_KEYLOCALとする設定を追加する

developmentに設定した環境変数はvecel cliからvercel env pullでローカル環境に.envファイルとしてダウンロードして使用することができる
.envファイルの内容を見ると設定したENV_KEY=LOCALが存在していることを確認することができる

# Created by Vercel CLI
VERCEL="1"
VERCEL_ENV="development"
TURBO_REMOTE_ONLY="true"
VERCEL_URL=""
VERCEL_GIT_PROVIDER=""
VERCEL_GIT_PREVIOUS_SHA=""
VERCEL_GIT_REPO_SLUG=""
VERCEL_GIT_REPO_OWNER=""
VERCEL_GIT_REPO_ID=""
VERCEL_GIT_COMMIT_REF=""
VERCEL_GIT_COMMIT_SHA=""
VERCEL_GIT_COMMIT_MESSAGE=""
VERCEL_GIT_COMMIT_AUTHOR_LOGIN=""
VERCEL_GIT_COMMIT_AUTHOR_NAME=""
ENV_KEY="LOCAL"

developmentの環境変数に設定しておくことによって、開発者がローカルで開発する際に使用する環境変数をvercel上で管理することができる
.gitignore.envファイルを無視する設定を忘れないように

umyomyomyonumyomyomyon

環境変数が実際に使用できているかを確認する

developと同様にstagingにENV_KEY=STAGINGを設定する

次に、productionにENV_KEY=PRODUCTION設定する

develop, staging, productionの環境を再デプロイすることによって/checkのページでそれぞれDEVELOP, STAGING, PRODUCTIONというの環境変数に設定した値が表示できていることが確認できる

最後に、vercel env pullでローカルに.envファイルをダウンロードしてyarn devで起動しローカルでの表示を確認するとLOCALという値が表示されているはず

umyomyomyonumyomyomyon

mainにマージで本番環境
stagingにマージでステージング環境
developにマージで開発環境
vercelでローカルの環境変数を管理
を達成

このスクラップは2022/12/11にクローズされました