Cloudflare

Cloudflare” の投稿: 4 件

Cloudflare PagesでNode.jsのバージョンを変更したいとき

2025/03/20

Cloudflare Pagesのビルド時にNode.jsのデフォルトバージョンが古くてエラーになることがありました。

Node.jsのバージョンを変更できたので、その方法を備忘録として残します。

デフォルトのNode.jsバージョン

Cloudflare Pagesのガイドによると、デフォルトでNode.js 10が使用されるとされています。ただし、実際のビルドログを確認すると、v12.18.0が使用されているケースもあるようです。これはプロジェクトの設定やランタイムによって異なる可能性があります。

Node.jsバージョンの変更方法

Node.jsのバージョンを変更するには、以下の2つの方法があります。

1. Cloudflare Pagesの環境変数を使用
2. ローカルファイルで環境変数を指定

どちらの方法でも、使用したいNode.jsのバージョンを指定することができます。

Cloudflare Pagesの環境変数を使用

1. Cloudflareダッシュボードにログインします。
2. 「Workers & Pages」を選択し、該当するPagesプロジェクトを開きます。
3. 「設定」→「変数とシークレット」と進み、NODE_VERSIONという名前の変数を追加します。
4. 値に希望するNode.jsのバージョン（例：20.9.0）を入力します。

ローカルファイルで環境変数を指定

プロジェクトのルートディレクトリに.nvmrcまたは.node-versionファイルを作成し、使用したいNode.jsのバージョンを記述します。

.nvmrc または .node-version

20.9.0

タグ:

• Cloudflare
• Node

Cloudflare PagesでNode.JS Compatibility Errorが出たとき

2025/03/20

Cloudflare PagesでNext.jsプロジェクトをデプロイする際に、Node.JS Compatibility Errorに遭遇して解決したので備忘録。

エラー内容

デプロイ後、以下のようなエラーメッセージがページに表示されました。

エラー内容

Node.JS Compatibility Error no nodejs_compat compatibility flag set

このエラーは、Cloudflare PagesプロジェクトでNode.jsの組み込みモジュールにアクセスできないことを示しています。

解決方法

Cloudflareダッシュボードから設定する方法

1. Cloudflareダッシュボードにログインします。
2. 「Workers & Pages」を選択し、該当するPagesプロジェクトを開きます。
3. 「設定」→「ランタイム」→「互換性フラグ」と進みます。
4. 「nodejs_compat」フラグを追加します。

注意: フラグは nodejs_compat とだけ入力します。引用符やその他の文字は不要です。

wrangler.tomlファイルで設定する方法

プロジェクトのルートディレクトリにある wrangler.toml ファイルに以下の行を追加します：

compatibility_flags = [ "nodejs_compat" ]

注意点

• Compatibility Flagsを設定した後は、変更を反映させるために再デプロイが必要です。
• 設定方法によっては、ダッシュボードの「Functions」オプションが見つからない場合があります。その場合は wrangler.toml ファイルでの設定をお試しください。

参考リンク

• Cloudflare Developers - Compatibility Flags
• Stack Overflow - Cloudflare Pages Node.JS Compatibility Error

このエラーに遭遇した際は、ぜひこの方法をお試しください。デプロイの成功をお祈りしています！

タグ:

• Cloudflare
• Node
• Next

Cloudflareでドメインを購入してPagesに登録する

2025/03/14

今まではお名前.comやAWSでドメインを購入していましたが、Cloudflareでデプロイすることが多くなり、ドメインもCloudflareで購入することにしました。

購入方法を備忘録として残します。

Cloudflare Pagesでドメインを購入する

1. Cloudflareのダッシュボードの左側のメニューから「ドメイン登録」を選択します。

   

2. 追加したいドメインを検索して、「確認」ボタンをクリックします。

   

3. 登録を完了するページに遷移するので、支払い情報を入力して「購入完了」ボタンをクリックします。

   

4. 購入が完了すると、下記のようなメッセージが表示されます。

   

エラーが発生した場合

ドメイン購入時に下記のようなエラーが発生した場合の対処方法です。

申し訳ありませんが、問題が発生しました。

購入の詳細を確認してもう一度お試しください。詳細については、失敗した支払いのトラブルシューティングガイドをご覧ください。

実際には下記の画像のようなエラーが表示されます。

調べてみると、楽天カードだとCloudflareの決済が失敗するらしいです。

https://blog.stin.ink/articles/sitn-ink-from-google-to-cloudflare

これ以外の可能性もありますが、一度他のクレジットカードで試してみると良いかもしれません。

私の場合は、SMBCに切り替えたら購入することができました。

ドメインの設定

ドメインを購入したら、Pagesに登録して使えるように設定します。

1. Cloudflareのダッシュボードから「Workers & Pages」を選択し、購入したドメインを利用したいプロジェクトを選択します。

   

2. 続いて「カスタムドメイン」タブを選択し、「カスタムドメインを設定」ボタンをクリックします。

   

3. ドメイン名を入力し、「続行」ボタンをクリックします。

   

4. 設定を確認し、問題なければ「ドメインをアクティブにする」ボタンをクリックします。

   

これでドメインの設定が完了しました。

実際に使えるようになるまでには少し時間がかかるので、気長に待ちましょう。(最大48時間)

タグ:

• Cloudflare

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

2025/03/14

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_command`を`npm 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リポジトリへの変更がプッシュされると、自動的にビルドとデプロイが開始されます。

タグ:

• Astro
• Terraform
• Cloudflare