コンテンツの更新時にCloudflare Pagesでデプロイを行う
Table of contents
このチュートリアルでは、Webhook を利用して、コンテンツの更新時に Cloudflare Pages でビルド・デプロイを行う手順を紹介します。
前提条件![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
- デプロイを行うGitリポジトリは既にCloudflare Pagesに接続されていること
- Gitリポジトリを介してCloudflare Pagesへのデプロイが成功していること
GitリポジトリのCloudflare Pagesへの接続についてはCloudflare Pagesの Get started のドキュメントをご確認ください。
リポジトリの接続後、ビルドやデプロイが失敗する場合は、ビルドの設定に問題ないか、Cloudflare Pagesの Build configuration のドキュメントをご確認ください。
概要![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
Cloudflare Pagesの Deploy Hooks を利用します。
Deploy Hooksとは、指定したブランチのデプロイをトリガーするためのURLで、このURLにリクエストを送ることで、自動でデプロイを実行できます。
1. Deploy Hooksを作成する![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
Cloudflareの管理画面に入り、「Pages」から該当のプロジェクトを選択します。
設定 > ビルド&デプロイ から「デプロイフックを追加します」を押します。
名前とブランチを指定して、「追加」を押します。
これでデプロイフックが作成されました。
2. Webhookを作成する![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
次にNewtの管理画面に入り、スペース設定 > Webhook のページから「Webhookを作成」を押し、「Webhookテンプレート」を選択します。
「Cloudflare Pages」のテンプレートを選んだ後、ステップ1で作成したURLを入力し、Webhookを作成します。
以上で設定は終了です。
一部のコンテンツが更新された時にのみ、Webhookをトリガーする場合は、Webhookの編集画面に入り、「通知対象にするモデル」を指定してください。
これで、通知対象のコンテンツの公開・非公開が変更された時、および公開コンテンツの更新時にリクエストが送信され、Cloudflare Pagesでビルド・デプロイが実行されます。