Vercelメモ

vercel.md

Vercelメモ

Environment

VercelにはProduction, Preview, Developmentの３つの環境がある。

• Production: Productionブランチにpushした場合
• Preview: Production以外のブランチにpushした場合
• Development: vercel devで立ち上げたローカルサーバーの環境

Environment Variables

ダッシュボードのProject Settings」>「Environment Variables」から設定する。 Production, Preview, Developmentそれぞれに対して環境変数を設定できる。

種類	説明
Plaintext	平文
Secret	暗号化された値(Development環境だと使えない)

vercel env pull .env.localでVercelの環境変数をローカルに持ってこれる。

NODE_ENVはローカルサーバーのdevコマンドではdevelopment。 Jestなどのテスト環境ではtestに設定される（Playwrightでローカルサーバーを立ち上げる場合は明示的に指定しなければdevelopmentだった）。 Vercelにデプロイビルドはすべてproduction。

Deployment

GitHubのフックでもvercel-cliでも挙動は変わらない。 VercelにデプロイするとデプロイしたブランチのURL、プレビューURLが発行される。 Productionブランチにデプロイした場合はそれに加えてProductionのURLが発行される。 Production以外のURLはPreview環境である。

例： Productionブランチ(main)にpushした場合

URL	Type	Environment
https://appname-randomvalue.vercel.app/	Production	Production
https://appname-username.vercel.app/	Branch URL(main only)	Production
https://appname-git-branch-username.vercel.app/	Branch URL	Production
https://appname-randamvalue-username.vercel.app/	Preview URL	Production

例えば、developmentブランチをプッシュしたとしてもDevelopment環境ではなく、すべてPreview環境である。 Development環境はローカルサーバーのみ。

Preview環境ではレスポンスヘッダーにx-robots-tag: noindexが付与される。

不要なデプロイの抑制

Vercelはデフォルトですべての環境のすべてのプッシュ・PRに対してデプロイが発動する。 防ぐためには、VercelのダッシュボードでIgnored Build Stepを設定する。

Vercelのプレビューデプロイで特定のブランチ以外を無視する

Local Development

• vercel devを使う場合
  • ローカルサーバー起動時に紐付けたVercelのプロジェクトから環境変数をロードする。
• next devを使う場合
  • ローカルの.env系ファイルから環境変数をロードする。
  • NODE_ENV（production, development, test）によって.env.xxx.localを自動的に読み込む。
  • .env, .env.developmentなどのファイルにデフォルトの環境変数を設定し、.env.xxx.localで上書きする。
  • 基本的に開発時は.env.localを使い、必要に応じて.env.production.local, .env.test.localを使い分ければいい。
  • NODE_ENV=testの場合、.env.localは読み込まない。

dotenvをインストールしないで環境変数を読み込みたい

// The below can be used in a Jest global setup file or similar for your testing set-up
import { loadEnvConfig } from '@next/env'

export default async () => {
  const projectDir = process.cwd()
  loadEnvConfig(projectDir)
}

References

Vercelで環境変数を設定する | Next.js Blog Example with すのりら

Creating Deployments – Vercel Docs

Environment Variables – Vercel Docs

Basic Features: 環境変数 | Next.js

https://nextjs-blog-example-fd8571ymv-nekoshita.vercel.app/