継続的インテグレーションでの直接アップロードの使用

Cloudflare Pagesは、事前にビルドされたアセットを直接アップロードすることをサポートしており、アプリケーションのカスタムビルドステップを使用して、Wranglerを使ってPagesにデプロイできます。このガイドでは、継続的インテグレーションを使用してアプリケーションをPagesにデプロイする方法を学びます。

Wranglerを使用してデプロイ

プロジェクトディレクトリで、次のコマンドを実行して、事前にビルドされたアセットのフォルダーをデプロイできるようにWranglerをインストールします。

# 作成したプロジェクトを公開
$ CLOUDFLARE_ACCOUNT_ID=<ACCOUNT_ID> npx wrangler pages deploy <DIRECTORY> --project-name=<PROJECT_NAME>

Cloudflareからの認証情報の取得

APIトークンの生成

APIトークンを生成するには：

Cloudflareダッシュボード ↗にログインします。
ダッシュボードの右上にあるユーザーアイコンのドロップダウンメニューからMy Profileを選択します。
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ダッシュボードにログインし、Account Homeでゾーンを選択し、右側のメニューのAPIの下のOverviewでアカウントIDを見つけます。ゾーンを追加していない場合は、Add siteを選択して追加します。ドメインはCloudflareのレジストラから購入できます。

GitHub Actionsの使用

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

プロジェクトを設定した後、Wranglerを使用してその後のデプロイを自動化するGitHub Actionを設定できます。

Cloudflareの認証情報をGitHubシークレットに追加

設定したGitHub Actionでは、Cloudflare Pagesにプロジェクトをプッシュするために環境変数が必要です。これらの環境変数の値をプロジェクトのGitHubリポジトリに追加するには：

GitHubのプロジェクトリポジトリに移動します。
リポジトリ名の下でSettingsを選択します。
Secrets > Actions > New repository secretを選択します。
1つのシークレットを作成し、名前にCLOUDFLARE_ACCOUNT_IDを、値にCloudflareアカウントIDを入力します。
別のシークレットを作成し、名前に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: Cloudflare Pagesにデプロイ
    steps:
      - name: チェックアウト
        uses: actions/checkout@v3
      # プロジェクトのビルドステップを実行
      # - name: Build
      #   run: npm install && npm run build
      - name: 公開
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: YOUR_PROJECT_NAME # 例：'my-project'
          directory: YOUR_DIRECTORY_OF_STATIC_ASSETS # 例：'dist'
          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アクションがあなたの代わりにデプロイメントを作成できるようになります。

CircleCIを使用したCI/CD

CircleCI ↗は、ビルド、テスト、デプロイメントパイプラインを自動化できる別の継続的インテグレーションおよび継続的デリバリープラットフォームです。キャッシング、Dockerレイヤーキャッシング、リソースクラスを使用して、効率的に複雑なパイプラインを実行するように構成できます。

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

Cloudflareの認証情報をCircleCIに追加

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

環境変数を追加するには、CircleCIウェブアプリケーションで：

Pagesプロジェクトに移動 > Settingsを選択します。
サイドメニューでProjectsを選択します。
プロジェクトの行にある省略記号(…)ボタンを選択します。環境変数を追加するオプションが表示されます。
Environment Variables > Add Environment Variableを選択します。
新しい環境変数の名前と値を入力します。これはCloudflareの認証情報（CLOUDFLARE_ACCOUNT_IDおよびCLOUDFLARE_API_TOKEN）です。

CircleCI設定に環境変数を追加するための手順に従ってください

ワークフローの設定

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

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

   steps:
     - checkout
     # プロジェクトのビルドステップを実行
     - run: npm install && npm run build
     # wranglerで公開
     - run: npx wrangler pages deploy dist --project-name=<PROJECT NAME> # distをビルドフォルダーの名前に置き換え、プロジェクト名を入力

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ダッシュボードから生成したCloudflareの認証情報を追加して、travis.ymlファイルでアクセスできるようにします。Travis CIダッシュボードに移動し、現在のプロジェクトを選択 > More options > Settings > Environment Variablesを選択します。

環境変数の名前と値、およびそれを関連付けたいブランチを設定します。値のプライバシーも設定できます。

セットアップ

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

language: node_js
node_js:
  - "18.0.0" # CIプロセスがサポートするNodeのバージョンをさらに指定できます
branches:
  only:
    - travis-ci-test # CIプロセスを実行したいブランチを指定
install:
  - npm install

script:
  - npm run build # ビルドコマンドに置き換えるか、ビルドステップがない場合は削除
  - 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.0.0としてリストしています。これはWrangler v2がこのNodeバージョン以上に依存しているためです。また、継続的インテグレーションを実行したいブランチを設定しています。最後に、スクリプトセクションにPROJECT NAMEを入力し、CIプロセスが期待通りに動作するはずです。

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

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings