TerraformでCloudflare PagesにAstroをデプロイ(GitHub連携)

公開日:
目次

Terraform(またはOpenTofu)を使用してCloudflare PagesにAstroプロジェクトをGithub連携でデプロイしたので備忘録として残します。

Terraformを使用することで、インフラをコードとして管理し、デプロイプロセスを自動化できます。

前提条件

  • Terraform(またはOpenTofu)がインストールされていること
  • Cloudflareアカウントとアクセストークン
  • GitHubアカウントとリポジトリにプッシュされたAstroプロジェクト

また、今回は個人開発前提なので下記の運用とします。

  • Astroプロジェクトのgitレポジトリにそのままtfファイルを追加(モノレポ)
  • tfstateファイルはローカルでのみ管理

手順

Terraformプロジェクトの設定

まず、Terraformの設定ファイルを作成します。

bash/zsh:

touch main.tf variables.tf

PowerShell:

New-Item main.tf variables.tf

variables.tfファイルの作成

variables.tfファイルに必要な変数を定義します。

variables.tf
variable "cloudflare_api_token" {
    description = "Cloudflare API Token"
    type        = string
}

variable "cloudflare_account_id" {
    description = "Cloudflare Account ID"
    type        = string
}

variable "production_branch" {
    description = "Production branch name"
    type        = string
    default     = "main"
}

variable "github_repo_name" {
    description = "Name of GitHub repository"
    type        = string
}

variable "github_owner" {
    description = "Owner of GitHub repository"
    type        = string
}

main.tfファイルの作成

main.tfファイルにCloudflare Pagesプロジェクトのリソースを追加します。

main.tf
terraform {
    required_providers {
        cloudflare = {
            source  = "cloudflare/cloudflare"
            version = "~> 3.0"
        }
    }
}

provider "cloudflare" {
    api_token = var.cloudflare_api_token
}

resource "cloudflare_pages_project" "astro_project" {
    account_id        = var.cloudflare_account_id
    name              = var.github_repo_name
    production_branch = var.production_branch

    source {
        type = "github"
        config {
            owner                         = var.github_owner
            repo_name                     = var.github_repo_name
            production_branch             = "main"
            pr_comments_enabled           = true
            deployments_enabled           = true
            production_deployment_enabled = true
        }
    }

    build_config {
        build_command   = "npm run build"
        destination_dir = "dist"
        root_dir        = "/"
    }

    deployment_configs {
        preview {
            environment_variables = {
                NODE_VERSION = "20.9.0"
            }
        }
        production {
            environment_variables = {
                NODE_VERSION = "20.9.0"
            }
        }
    }
}

pnpmを使う場合は、build_commandnpm i -g pnpm && pnpm i && pnpm buildに変更してください。

tfvarsファイルの作成(オプション)

terraform.tfvarsファイルにCloudflare API TokenとアカウントIDを追加します。

これを書いておくと、terraform applyコマンドを実行する際に変数の値を入力する必要がなくなります。

terraform.tfvars
cloudflare_api_token = "自分のCloudflare API Token"
cloudflare_account_id = "自分のCloudflare Account ID"
github_repo_name = "Astroプロジェクトのリポジトリ名"
github_owner = "Astroプロジェクトのリポジェクトのオーナー名"

branchはデフォルトでmainになっていますが、変更したい場合はterraform.tfvarsに追加してください。

カスタムドメインの設定(オプション)

カスタムドメインを設定する場合は、以下のリソースをmain.tfに追加します。

main.tf
resource "cloudflare_pages_domain" "custom_domain" {
    account_id   = var.cloudflare_account_id
    project_name = cloudflare_pages_project.astro_project.name
    domain       = "your-custom-domain.com"
}

Terraformの初期化と適用

以下のコマンドを実行して、Terraformプロジェクトを初期化し、リソースを作成します。

TerraformはライセンスがBSL1.1であるため、オープンソースの代替としてOpenTofuを使用することもできます。

Terraform:

terraform init
terraform apply -auto-approve

OpenTofu:

tofu init
tofu apply -auto-approve

変数の値を入力するよう求められたら、適切な値を入力します。(terraform.tfvarsを作成している場合は不要)

デプロイの確認

Terraformの適用が完了したら、Cloudflareダッシュボードで新しく作成されたPagesプロジェクトを確認できます。

GitHubリポジトリへの変更がプッシュされると、自動的にビルドとデプロイが開始されます。