Direct Upload を継続的インテグレーションで使う

Cloudflare Pages は事前ビルドしたアセットの直接アップロードに対応します。アプリケーションにカスタムビルド手順を使い、Wrangler で Pages にデプロイできます。このガイドでは、継続的インテグレーションを使ってアプリケーションを Pages にデプロイする方法を説明します。

Wrangler でデプロイする

プロジェクトディレクトリで Wrangler をインストールし、次のコマンドで事前ビルドしたアセットのフォルダーをデプロイします。

# Publish created project
$ CLOUDFLARE_ACCOUNT_ID=<ACCOUNT_ID> npx wrangler pages deploy <DIRECTORY> --project-name=<PROJECT_NAME>

Cloudflare から資格情報を取得する

API トークンを生成する

API トークンを生成する手順は次のとおりです。

Cloudflare ダッシュボードで、API Tokens ページを開きます。
Account API tokens を開く ↗
Create Token を選びます。
Custom Token の下で Get started を選びます。
Token name フィールドに API トークン名を付けます。
Permissions で Account、Cloudflare Pages、Edit を選びます。
Continue to summary > Create Token を選びます。

上記の手順に従い、Cloudflare Pages 用の API トークンを作成します

API トークンを作成したら、継続的インテグレーションプラットフォームからプロジェクトをプッシュするために使えます。

プロジェクトのアカウント ID を取得する

アカウント ID を見つけるには、Cloudflare ダッシュボードの Zone Overview ページを開きます。

Overview を開く ↗

右側メニューの API セクションでアカウント ID を確認します。

ゾーンを追加していない場合は、Add > Connect a domain を選んで追加します。ドメインは Cloudflare の Registrar から購入できます。

GitHub Actions を使う

GitHub Actions ↗ は、GitHub を使うときのビルド、テスト、デプロイパイプラインを自動化できる継続的インテグレーションおよび継続的デリバリー（CI/CD）プラットフォームです。リポジトリへのすべてのプルリクエストをビルドおよびテストするワークフローや、マージされたプルリクエストを本番にデプロイするワークフローを作成できます。

プロジェクトをセットアップしたあと、GitHub Action を設定し、Wrangler で以降のデプロイを自動化できます。

Cloudflare の資格情報を GitHub secrets に追加する

セットアップした GitHub Action では、プロジェクトを Cloudflare Pages へプッシュするために環境変数が必要です。プロジェクトの GitHub リポジトリにこれらの環境変数の値を追加する手順は次のとおりです。

GitHub でプロジェクトのリポジトリを開きます。
リポジトリ名の下で Settings を選びます。
Secrets > Actions > New repository secret を選びます。
1 つ目のシークレットを作成し、名前を CLOUDFLARE_ACCOUNT_ID、値を Cloudflare アカウント ID にします。
もう 1 つのシークレットを作成し、名前を CLOUDFLARE_API_TOKEN、値を Cloudflare API トークンにします。

Cloudflare アカウント ID と Cloudflare API トークンの値を、それぞれ CLOUDFLARE_ACCOUNT_ID と CLOUDFLARE_API_TOKEN として追加します。これでシークレットは安全に保たれ、Action が実行されるたびにこれらのシークレットにアクセスします。

ワークフローをセットアップする

プロジェクトのルートに .github/workflows/pages-deployment.yaml ファイルを作成します。.github/workflows/pages-deployment.yaml ファイルには、リクエストで指定したジョブが含まれます。この例では on: [push] です。プルリクエストでも構いません。GitHub Actions の構文の詳細は公式ドキュメント ↗ を参照してください。

pages-deployment.yaml ファイルに次の内容をコピーします。

on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Deploy to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v6
      # Run your project's build step
      # - name: Build
      #   run: npm install && npm run build
      - name: Deploy
        uses: cloudflare/wrangler-action@v4
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy YOUR_DIRECTORY_OF_STATIC_ASSETS --project-name=YOUR_PROJECT_NAME
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

上記のコードブロックでは、リポジトリにコードをプッシュしたときに実行される Action を設定しています。YOUR_PROJECT_NAME を Cloudflare Pages のプロジェクト名に、YOUR_DIRECTORY_OF_STATIC_ASSETS をプロジェクトの出力ディレクトリに置き換えます。

${{ secrets.GITHUB_TOKEN }} は、contents: read と deployments: write 権限付きで GitHub Actions が自動提供します。これにより Cloudflare Pages の Action が、あなたの代わりに Deployment を作成できます。

CircleCI を CI/CD に使う

CircleCI ↗ も、ビルド、テスト、デプロイパイプラインを自動化できる継続的インテグレーションおよび継続的デリバリー（CI/CD）プラットフォームです。キャッシュ、docker layer caching、リソースクラスにより、複雑なパイプラインを効率よく実行できます。

GitHub Actions と同様に、CircleCI は Wrangler を使い、コードをプッシュするたびにプロジェクトを継続的にデプロイできます。

Cloudflare の資格情報を CircleCI に追加する

Cloudflare API トークンを生成し、ダッシュボードでアカウント ID を見つけたあと、プロジェクトで環境変数を使うために CircleCI ダッシュボードへ追加します。

環境変数を追加するには、CircleCI の Web アプリケーションで次を行います。

Pages プロジェクト > Settings を開きます。
サイドメニューで Projects を選びます。
プロジェクト行の省略記号（...）ボタンを選びます。環境変数を追加するオプションが表示されます。
Environment Variables > Add Environment Variable を選びます。
新しい環境変数の名前と値を入力します。これが Cloudflare の資格情報（CLOUDFLARE_ACCOUNT_ID と CLOUDFLARE_API_TOKEN）です。

ワークフローをセットアップする

プロジェクトのルートに .circleci/config.yml ファイルを作成します。このファイルには、ワークフローの順序に基づいて実行されるジョブが含まれます。config.yml ファイルに次の内容をコピーします。

version: 2.1
jobs:
  Publish-to-Pages:
    docker:
      - image: cimg/node:18.7.0

    steps:
      - checkout
      # Run your project's build step
      - run: npm install && npm run build
      # Publish with wrangler
      - run: npx wrangler pages deploy dist --project-name=<PROJECT NAME> # Replace dist with the name of your build folder and input your project name

workflows:
  Publish-to-Pages-workflow:
    jobs:
      - Publish-to-Pages

CircleCI を使うとき、継続的インテグレーションのワークフローはジョブに分かれます。上記のコードブロックでは、まず各コミットで実行するジョブの一覧を定義します。たとえば、リポジトリは事前ビルド済みの Docker イメージ cimg/node:18.7.0 上で実行されます。まず、イメージで指定した Node バージョンでリポジトリをチェックアウトします。

Wrangler コマンドは、任意の wrangler pages deploy オプションで変更できます。

指定したステップのあと、ファイルの末尾で workflow を定義します。CircleCI でカスタムプロセスを作る方法の詳細は公式ドキュメント ↗ を参照してください。

Travis CI を CI/CD に使う

Travis CI は、プルリクエストやコードプッシュなど、プロジェクトワークフローの特定タスクを扱うオープンソースの継続的インテグレーションツールです。Travis CI は GitHub プロジェクト、データベース、ビルド設定で有効にしたその他の事前インストールサービスに統合できます。Travis CI を使うには、GitHub、Bitbucket、GitLab、または Assembla アカウントが必要です。

Cloudflare の資格情報を TravisCI に追加する

Travis プロジェクトで、ダッシュボードから生成した Cloudflare の資格情報を追加し、travis.yml ファイルからアクセスできるようにします。Travis CI ダッシュボードを開き、現在のプロジェクト > More options > Settings > Environment Variables を選びます。

環境変数の名前と値、および紐づけるブランチを設定します。値のプライバシーも設定できます。

セットアップ

Travis-ci.com ↗ を開き、希望するプロバイダーでログインしてリポジトリを有効にします。このガイドでは GitHub を使います。次に .travis.yml ファイルを作成し、次をファイルにコピーします。

language: node_js
node_js:
  - "18.0.0" # You can specify more versions of Node you want your CI process to support
branches:
  only:
    - travis-ci-test # Specify what branch you want your CI process to run on
install:
  - npm install

script:
  - npm run build # Switch this out with your build command or remove it if you don't have a build step
  - npx wrangler pages deploy dist --project-name=<PROJECT NAME>

env:
  - CLOUDFLARE_ACCOUNT_ID: { $CLOUDFLARE_ACCOUNT_ID }
  - CLOUDFLARE_API_TOKEN: { $CLOUDFLARE_API_TOKEN }

これで Node.js のバージョンが 18 に設定されます。継続的インテグレーションを実行するブランチも設定しています。最後に、script セクションに PROJECT NAME を入力すると、CI プロセスは期待どおり動きます。

Wrangler コマンドは、任意の wrangler pages deploy オプションで変更できます。