vercelで環境構築&環境変数設定
サンプルプロジェクト作成
yarn create next-app
作成したサンプルプロジェクトの中に環境変数確認用のページを追加
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
}
}
}
githubにpush
参考リポジトリ
確認用ページ作成
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
}
}
}
githubにpush
vercelと連携する
- add newから既存のgithubリポジトリをimportすれば勝手に初回デプロイまで実行してくれる
develop, stagingブランチを作成
Settings > Domains
Git Branchをdevelopに設定してdevelop用ドメインを作成する
これでdevelopブランチにマージされると、このドメインに対してデプロイが実行される
stagingも同様
previewとproduction
Settings > Gitを確認するとmainブランチがproduction branchとして設定されているので、mainブランチを割り当てたドメインはProduction扱いとなる
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_KEY
をLOCAL
とする設定を追加する
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
ファイルを無視する設定を忘れないように
環境変数が実際に使用できているかを確認する
developと同様にstagingにENV_KEY=STAGING
を設定する
次に、productionにENV_KEY=PRODUCTION
設定する
develop, staging, productionの環境を再デプロイすることによって/check
のページでそれぞれDEVELOP, STAGING, PRODUCTIONというの環境変数に設定した値が表示できていることが確認できる
最後に、vercel env pull
でローカルに.env
ファイルをダウンロードしてyarn dev
で起動しローカルでの表示を確認するとLOCALという値が表示されているはず
mainにマージで本番環境
stagingにマージでステージング環境
developにマージで開発環境
vercelでローカルの環境変数を管理
を達成