今回、実現した内容は

1. GitHubレポジトリのPushをトリガーに、CloudflareがNext.jsをデプロイ（SSG）し、静的HTMLとリソースをサーバレスで配信（※下の図の緑矢印）
2. Strapiから、CloudflareのWebhooks（デプロイフック）が叩かれたのをトリガーに、CloudflareがNext.jsをデプロイ（SSG）し、静的HTMLとリソースをサーバレスで配信（※下の図のオレンジ矢印）

となります。

Cloudflareでデプロイのセットアップ

まず、GitHubレポジトリのPushをトリガーに、CloudflareがNext.jsをデプロイ（SSG）し、静的HTMLとリソースをサーバレスで配信する設定（※下の図の緑矢印）についてです。

Cloudflareにアクセスして、左メニューの「Workers & Pages」を選択、「アプリケーションを作成」ボタンをクリックします。「アプリケーションを作成する」ページにて「Pages」タブを選択し、「Gitに接続」ボタンをクリックします。

リポジトリの選択

「GitHub」タブを選択、「GitHubに接続」ボタンをクリック。

対象レポジトリのあるGitHubアカウントを選択します。

「Only select repositories」をチェックして、対象レポジトリを選択したら、「Install & Authorize」ボタンをクリックします。

2段階認証のコードを入力します。

CloudflareにGitHubのレポジトリが登録されたら、「セットアップの開始」ボタンをクリックします。

ビルドとデプロイのセットアップ

「ビルドとデプロイのセットアップ」画面にて、対象ブランチや、フレームワークの選択や、ビルドコマンド、ビルド出力ディレクトリを設定し、「保存してデプロイする」ボタンをクリックします。

サイトをデプロイ

サイトのデプロイに成功すると、https://レポジトリ名 + .page.devにてサイトが公開されます。pages.devのサブドメインではありますが、ドメイン取得もSSLの設定もDNSの設定もする必要がないのは、手軽で素敵です。

今回「main」ブランチを対象にしましたが、mainブランチにPushされるたびに、登録した「npm run build」コマンドが自動で実行されて、サイトがデプロイされます。

ちなみに、プレビュー環境のデプロイを設定することも可能です。

StrapiでCloudflareのデプロイフックのセットアップ

Strapiから、CloudflareのWebhooks（デプロイフック）が叩かれたのをトリガーに、CloudflareがNext.jsをデプロイ（SSG）し、静的HTMLとリソースをサーバレスで配信する設定（※下の図のオレンジ矢印）についてです。

Strapiにアクセスして、左メニューの「Marketplace」を選択します。（※Marketplaceを選択するには、権限付与が必要になります）マニュアルに従って「Cloudflare pages」をインストールします。npmコマンドでインストールします。

npm install strapi-plugin-cloudflare-pages

Cloudflareに戻り、「Works & Pages」にて、アプリケーションを選択。アプリケーションのページにて「設定」タブを選択、左メニューの「ビルド & デプロイ」を選択します。ページ下部にある「デプロイ フック」にてWebhookのURLを発行します。

「config/plugins.js」を開き、cloudflare-pagesの設定を追記し、hooks_urlに、先ほど発行された、WebhookのURLを登録します。

▼ config/plugins.js

module.exports = ({ env }) => ({

  ```

  'cloudflare-pages': {
    enabled: true,
    config: {
      instances: [
        {
          name: "production website",
          hook_url: 'https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/5d8c7a2e-dee7-4e3d-aa93-2ec641e918c3'
        },
      ]
    }
  },
  
  ```
  
})

Strapiを再起動すると、左メニューに「Cloudflare Pages publishing」が追加されます。「Publish at production website」ボタンをクリックすることで、Strapiから任意のタイミングで、Cloudflareのデプロイを実行することができるようになりました。

次は、プレビュー機能を実装していきたいと思います。