TerraformでVercelの環境を作ってみる

11043 ワード

テキストリンク

最近、Terraform を触る機会が増えて、インフラをコードで管理できる良さが少しずつ分かってきたです。少し前にこちらのドキュメントを見て Vercel のリソースも Terraform を使って管理できることを知りました。ということで、実際に試してみたので備忘録的に残しておこうと思います。

本記事のゴール

Terraform で Vercel の環境を作り、サンプルアプリをデプロイする。

前提

Terraform がインストールされていること
Terraform の使い方についての説明は省略します

Terraform で Vercle の環境を作ってみる

環境

Terraform v1.1.2
Vercel Terraform Provider v0.2.5

Vercelにデプロイするサンプルアプリを作る

まずは、Vercel にデプロイするためのサンプルアプリを作成しましょう。
今回は Vite + React の構成で、プロジェクト名は sample-app-for-vercel としました。

$ yarn create vite

念の為、動作確認しておきます。
下記を実行した後、http://localhost:3000/ に遷移して、Hello Vite + React! が表示されれば OK です。

$ cd sample-app-for-vercel
$ yarn
$ yarn dev

GitHub 上でリポジトリを作成し、上記のコードを push しておきましょう。
後ほど、Vercel と連携する時に作成したリポジトリを使用します。

Vercelのトークンを発行する

次にトークンを発行します。名前は VERCEL_API_TOKEN としました。

生成したトークンは後ほど使用するので、メモしておいてください。

Vercel Providerのセットアップ

まずは、Vercel Provider の設定を記述していきます。

main.tf

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

provider.tf

provider "vercel" {
  api_token = var.vercel_api_token
}

次に取得した Vercel のトークンを設定します。

variables.tf

variable "vercel_api_token" {}

terraform.tfvars

vercel_api_token = "<取得したトークン>"

この状態で、terraform init で初期化します。

$ terraform init

これで Provider のセットアップは終わりです。

Terraform のコードも git で管理する場合

設定したコードの中にはトークンなども含まれているので、.gitignore を作成 & 下記を追記してください。

.gitignore

# Local .terraform directories
**/.terraform/*

# .tfstate files
*.tfstate
*.tfstate.*

# Crash log files
crash.log

# Exclude all .tfvars files, which are likely to contain sentitive data, such as
# password, private keys, and other secrets. These should not be part of version
# control as they are data points which are potentially sensitive and subject
# to change depending on the environment.
#
*.tfvars

# Ignore override files as they are usually used to override resources locally and so
# are not checked in
override.tf
override.tf.json
*_override.tf
*_override.tf.json

# Include override files you do wish to add to version control using negated pattern
#
# !example_override.tf

# Include tfplan files to ignore the plan output of command: terraform plan -out=tfplan
# example: *tfplan*

# Ignore CLI configuration files
.terraformrc
terraform.rc

Vercelのプロジェクトを作成する

次に Vercel のプロジェクトを作成します。

project.tf

resource "vercel_project" "with_git" {
  name = "sample-app-for-vercel"
  git_repository = {
    type = "github"
    # ユーザー名/リポジトリ名
    repo = "<リポジトリのパス>"
  }
}

この状態で差分を確認してみます。

$ terraform plan

Terraform used the selected providers to generate the following execution
plan. Resource actions are indicated with the following symbols:
  + create

Terraform will perform the following actions:

  # vercel_project.with_git will be created
  + resource "vercel_project" "with_git" {
      + git_repository = {
          + repo = "<リポジトリのパス>"
          + type = "github"
        }
      + id             = (known after apply)
      + name           = "sample-app-for-vercel"
    }

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

問題なさそうであれば、続けてリソースを作成します。

$ terraform apply

実行後、 https://vercel.com/dashboard に遷移すると、作成されたプロジェクトが表示されていると思います。この状態で、master or main ブランチに変更を加えてみましょう。自動でデプロイが始まり、このようにプレビューが表示されれば成功です🎉

プレビュー

終わりに

ここまで Terraform を使って、Vercel の環境を作成してみました。今回は取り上げてませんが、ドメインなども Terraform から設定できるようです。リリースの履歴を見る限り、活発に開発が行われているようなので、今後も動向を追っていこうと思います！

参考

Author And Source

この問題について(TerraformでVercelの環境を作ってみる), 我々は、より多くの情報をここで見つけました https://zenn.dev/keita_hino/articles/3044d2af6dec61

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Collection and Share based on the CC protocol

Spring BootアプリケーションをGitHub ActionsでDocker BuildしてPushする

SolidJS + Capacitor 現時点の所感