最近 Vercel を使っていて，Vercel コンソールでプロジェクト設定をしてしまったけど，継続的なプロダクション運用を考えたらコンソール操作は避けたいな〜と思って，Vercel Terraform Provider を試してみた❗️結論から言うと，期待した通りに Vercel の設定を宣言的に管理できて良かった👌 既に Terraform を使っているなら特にハマることなく導入できそう．

以下のドキュメントを読むと Next.js アプリケーションを Vercel Terraform Provider で Vercel にデプロイする流れを試せる📝 今回はこのドキュメントを参考にしつつ，個人的に気になる設定をデプロイしてみた＼( 'ω')／

サンプルアプリ

Vercel にデプロイするアプリは何でも良くて，今回は2024年5月に React-Admin に入門するときに使った React-Admin Tutorial アプリ（GitHub プライベートリポジトリにある）を使うことにした．

kakakakakku.hatenablog.com

1. Vercel GitHub App に権限を付与する

まずは Vercel GitHub App で連携する GitHub リポジトリに対する権限を付与しておく👌

2. Vercel Token を発行する

次に Vercel Token を発行して環境変数 VERCEL_API_TOKEN に設定しておく🔑

$ export VERCEL_API_TOKEN=xxx

vercel.com

3. terraform init コマンドを実行する

providers.tf を実装して Vercel Terraform Provider を取得する．今回は最新 v1.13.0 を使う．

👾 providers.tf

terraform {
  required_providers {
    vercel = {
      source  = "vercel/vercel"
      version = "~> 1.13"
    }
  }
}

4. Project: terraform plan コマンドを実行する

次に projects.tf を実装する．まずは Vercel Project を vercel_project リソースを使って追加する．React-Admin は Vite を使ってビルドをしているため framework は vite にした👌

👾 projects.tf

resource "vercel_project" "react_admin_tutorial" {
  name      = "react-admin-tutorial"
  framework = "vite"

  git_repository = {
    type = "github"
    repo = "kakakakakku/react-admin-tutorial"
  }
}

そして terraform plan コマンドを実行する．問題なさそう❗️ちなみに次に設定を変更する予定の vercel_authentication.deployment_type はデフォルトでは standard_protection になっていた💡

$ terraform plan
Terraform will perform the following actions:

  # vercel_project.react_admin_tutorial will be created
  + resource "vercel_project" "react_admin_tutorial" {
      + auto_assign_custom_domains                        = true
      + automatically_expose_system_environment_variables = (known after apply)
      + customer_success_code_visibility                  = (known after apply)
      + directory_listing                                 = (known after apply)
      + framework                                         = "vite"
      + function_failover                                 = (known after apply)
      + git_fork_protection                               = true
      + git_lfs                                           = (known after apply)
      + git_repository                                    = {
          + production_branch = (known after apply)
          + repo              = "kakakakakku/react-admin-tutorial"
          + type              = "github"
        }
      + id                                                = (known after apply)
      + name                                              = "react-admin-tutorial"
      + oidc_token_config                                 = {
          + enabled = false
        }
      + prioritise_production_builds                      = (known after apply)
      + protection_bypass_for_automation_secret           = (known after apply)
      + serverless_function_region                        = (known after apply)
      + team_id                                           = (known after apply)
      + vercel_authentication                             = {
          + deployment_type = "standard_protection"
        }
    }

Plan: 1 to add, 0 to change, 0 to destroy.

5. Project: terraform apply コマンドを実行する

最後は terraform apply コマンドを実行する．

$ terraform apply

vercel_project.react_admin_tutorial: Creating...
vercel_project.react_admin_tutorial: Creation complete after 2s [id=prj_xxxxx]

Apply complete! Resources: 1 added, 0 changed, 0 destroyed.

できた❗️最高＼( 'ω')／

6. Deployments: terraform plan コマンドと terraform apply コマンドを実行する

そして Vercel Project をデプロイするために vercel_deployment リソースを使う．今回はシンプルに GitHub の main ブランチをデプロイする設定にした👌

👾 deployments.tf

resource "vercel_deployment" "react_admin_tutorial" {
  project_id = vercel_project.react_admin_tutorial.id
  ref        = "main"
}

同じく terraform plan コマンドと terraform apply コマンドを実行する．

$ terraform plan
Terraform will perform the following actions:

  # vercel_deployment.react_admin_tutorial will be created
  + resource "vercel_deployment" "react_admin_tutorial" {
      + domains    = (known after apply)
      + id         = (known after apply)
      + production = (known after apply)
      + project_id = "prj_xxxxx"
      + ref        = "main"
      + team_id    = (known after apply)
      + url        = (known after apply)
    }

Plan: 1 to add, 0 to change, 0 to destroy.

$ terraform apply
vercel_deployment.react_admin_tutorial: Creating...
vercel_deployment.react_admin_tutorial: Still creating... [10s elapsed]
vercel_deployment.react_admin_tutorial: Still creating... [20s elapsed]
vercel_deployment.react_admin_tutorial: Still creating... [30s elapsed]
vercel_deployment.react_admin_tutorial: Still creating... [40s elapsed]
vercel_deployment.react_admin_tutorial: Creation complete after 49s [id=dpl_xxx]

Apply complete! Resources: 1 added, 0 changed, 0 destroyed.

少し待っているとデプロイされた＼( 'ω')／

Vercel に React-Admin Tutorial アプリをデプロイできた 1

Vercel に React-Admin Tutorial アプリをデプロイできた 2

7. Project: terraform plan コマンドと terraform apply コマンドを実行する

Vercel Project では Deployment Protection のデフォルト設定として Vercel Authentication が有効化されている🛡

vercel.com

よって，Vercel へのアクセス権限がないとサイトにアクセスできず，例えば Google Chrome のシークレットウィンドウでアクセスしようとすると拒否される🛑

そこで projects.tf を修正して vercel_authentication.deployment_type をデフォルトの standard_protection から none に修正する💡

👾 projects.tf

resource "vercel_project" "react_admin_tutorial" {
  name      = "react-admin-tutorial"
  framework = "vite"

  vercel_authentication = {
    deployment_type = "none"
  }

  git_repository = {
    type = "github"
    repo = "kakakakakku/react-admin-tutorial"
  }
}

terraform plan コマンドと terraform apply コマンドを実行する．

$ terraform plan
Terraform will perform the following actions:

  # vercel_project.react_admin_tutorial will be updated in-place
  ~ resource "vercel_project" "react_admin_tutorial" {
        id                                                = "prj_xxxxx"
        name                                              = "react-admin-tutorial"
      + protection_bypass_for_automation_secret           = (known after apply)
      + team_id                                           = (known after apply)
      ~ vercel_authentication                             = {
          ~ deployment_type = "standard_protection" -> "none"
        }
        # (12 unchanged attributes hidden)
    }

Plan: 0 to add, 1 to change, 0 to destroy.

$ terraform apply
vercel_project.react_admin_tutorial: Modifying... [id=prj_xxxxx]
vercel_project.react_admin_tutorial: Modifications complete after 1s [id=prj_xxxxx]

Apply complete! Resources: 0 added, 1 changed, 0 destroyed.

Vercel Authentication を無効化できて Google Chrome のシークレットウィンドウでもアクセスできるようになった👌

8. Domains: terraform plan コマンドと terraform apply コマンドを実行する

最後は Vercel Project のデフォルトドメイン *.vercel.app にカスタムドメインを割り当てる❗️カスタムドメインは vercel_project_domain リソースを使って割り当てられる．なお前提として，以下のドキュメントを参考に Amazon Route 53 で取得したドメインのホストゾーンに cname.vercel-dns.com. という CNAME レコードを登録しておく👌

vercel.com

👾 domains.tf

resource "vercel_project_domain" "react_admin_tutorial" {
  project_id = vercel_project.react_admin_tutorial.id
  domain     = "react-admin-tutorial.xxxxx.com"
}

同じく terraform plan コマンドと terraform apply コマンドを実行する．

$ terraform plan
Terraform will perform the following actions:

  # vercel_project_domain.react_admin_tutorial will be created
  + resource "vercel_project_domain" "react_admin_tutorial" {
      + domain     = "react-admin-tutorial.xxxxx.com"
      + id         = (known after apply)
      + project_id = "prj_xxx"
      + team_id    = (known after apply)
    }

Plan: 1 to add, 0 to change, 0 to destroy.

$ terraform apply
vercel_project_domain.react_admin_tutorial: Creating...
vercel_project_domain.react_admin_tutorial: Creation complete after 1s [id=react-admin-tutorial.xxxxx.com]

Apply complete! Resources: 1 added, 0 changed, 0 destroyed.