<p data-line="1" class="code-line">Terraform（またはOpenTofu）を使用してCloudflare PagesにAstroプロジェクトをGithub連携でデプロイしたので備忘録として残します。</p>
<p data-line="3" class="code-line">Terraformを使用することで、インフラをコードとして管理し、デプロイプロセスを自動化できます。</p>
<h2 id="%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6" data-line="5" class="code-line"><a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6" aria-hidden="true"></a> 前提条件</h2>
<ul data-line="6" class="code-line">
<li data-line="6" class="code-line">Terraform（またはOpenTofu）がインストールされていること</li>
<li data-line="7" class="code-line">Cloudflareアカウントとアクセストークン</li>
<li data-line="8" class="code-line">GitHubアカウントとリポジトリにプッシュされたAstroプロジェクト</li>
</ul>
<p data-line="10" class="code-line">また、今回は個人開発前提なので下記の運用とします。</p>
<ul data-line="11" class="code-line">
<li data-line="11" class="code-line">Astroプロジェクトのgitレポジトリにそのままtfファイルを追加(モノレポ)</li>
<li data-line="12" class="code-line">tfstateファイルはローカルでのみ管理</li>
</ul>
<h2 id="%E6%89%8B%E9%A0%86" data-line="14" class="code-line"><a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 手順</h2>
<h3 id="terraform%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="16" class="code-line"><a class="header-anchor-link" href="#terraform%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Terraformプロジェクトの設定</h3>
<p data-line="18" class="code-line">まず、Terraformの設定ファイルを作成します。</p>
<p data-line="20" class="code-line"><strong>bash/zsh:</strong></p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="21"><span class="token function">touch</span> main.tf variables.tf
</code></pre></div><p data-line="25" class="code-line"><strong>PowerShell:</strong></p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="26">New-Item main.tf variables.tf
</code></pre></div><h3 id="variables.tf%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" data-line="30" class="code-line"><a class="header-anchor-link" href="#variables.tf%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> variables.tfファイルの作成</h3>
<p data-line="32" class="code-line"><code>variables.tf</code>ファイルに必要な変数を定義します。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">variables.tf</span></div><pre class="language-terraform"><code class="language-terraform code-line" data-line="34">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
}
</code></pre></div><h3 id="main.tf%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" data-line="62" class="code-line"><a class="header-anchor-link" href="#main.tf%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> main.tfファイルの作成</h3>
<p data-line="64" class="code-line"><code>main.tf</code>ファイルにCloudflare Pagesプロジェクトのリソースを追加します。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">main.tf</span></div><pre class="language-terraform"><code class="language-terraform code-line" data-line="66">terraform {
    required_providers {
        cloudflare = {
            source  = "cloudflare/cloudflare"
            version = "~&gt; 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"
            }
        }
    }
}
</code></pre></div><p data-line="118" class="code-line">pnpmを使う場合は、<code>build_command</code>を<code>npm i -g pnpm &amp;&amp; pnpm i &amp;&amp; pnpm build</code>に変更してください。</p>
<h3 id="tfvars%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90(%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3)" data-line="120" class="code-line"><a class="header-anchor-link" href="#tfvars%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90(%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3)" aria-hidden="true"></a> tfvarsファイルの作成(オプション)</h3>
<p data-line="122" class="code-line"><code>terraform.tfvars</code>ファイルにCloudflare API TokenとアカウントIDを追加します。</p>
<p data-line="124" class="code-line">これを書いておくと、<code>terraform apply</code>コマンドを実行する際に変数の値を入力する必要がなくなります。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">terraform.tfvars</span></div><pre class="language-terraform"><code class="language-terraform code-line" data-line="126">cloudflare_api_token = "自分のCloudflare API Token"
cloudflare_account_id = "自分のCloudflare Account ID"
github_repo_name = "Astroプロジェクトのリポジトリ名"
github_owner = "Astroプロジェクトのリポジェクトのオーナー名"
</code></pre></div><p data-line="133" class="code-line">branchはデフォルトで<code>main</code>になっていますが、変更したい場合は<code>terraform.tfvars</code>に追加してください。</p>
<h3 id="%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%88%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%89" data-line="135" class="code-line"><a class="header-anchor-link" href="#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%88%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%89" aria-hidden="true"></a> カスタムドメインの設定（オプション）</h3>
<p data-line="137" class="code-line">カスタムドメインを設定する場合は、以下のリソースを<code>main.tf</code>に追加します。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">main.tf</span></div><pre class="language-terraform"><code class="language-terraform code-line" data-line="139">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"
}
</code></pre></div><h3 id="terraform%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96%E3%81%A8%E9%81%A9%E7%94%A8" data-line="147" class="code-line"><a class="header-anchor-link" href="#terraform%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96%E3%81%A8%E9%81%A9%E7%94%A8" aria-hidden="true"></a> Terraformの初期化と適用</h3>
<p data-line="149" class="code-line">以下のコマンドを実行して、Terraformプロジェクトを初期化し、リソースを作成します。</p>
<p data-line="151" class="code-line">TerraformはライセンスがBSL1.1であるため、オープンソースの代替としてOpenTofuを使用することもできます。</p>
<p data-line="153" class="code-line"><strong>Terraform:</strong></p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="154">terraform init
terraform apply -auto-approve
</code></pre></div><p data-line="159" class="code-line"><strong>OpenTofu:</strong></p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="160">tofu init
tofu apply -auto-approve
</code></pre></div><p data-line="165" class="code-line">変数の値を入力するよう求められたら、適切な値を入力します。(terraform.tfvarsを作成している場合は不要)</p>
<h3 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%AE%E7%A2%BA%E8%AA%8D" data-line="167" class="code-line"><a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%AE%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> デプロイの確認</h3>
<p data-line="169" class="code-line">Terraformの適用が完了したら、Cloudflareダッシュボードで新しく作成されたPagesプロジェクトを確認できます。</p>
<p data-line="171" class="code-line">GitHubリポジトリへの変更がプッシュされると、自動的にビルドとデプロイが開始されます。</p>


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