WordPressとhonoで、 Cloudflare Workersプロキシパターンをやってみた

WordPressとhonoで、 Cloudflare Workersプロキシパターンをやってみた Cloudflare Meetup Kobe Kick Off! 2023/09

今日伝えたいこと インフラの設定・最適化は、 インフラ側で管理しよう

アジェンダ • Cloud are Workersで、「CMSの外」からサイトを操作できる • ドメイン( DNS )をCloud areで管理する必要があるのに注意 fl fl • インフラの設定・最適化は、インフラ側で管理しよう

HELLO! ✋ 岡本 秀高 (Hide) • Stripe Developer Advocate • WordCamp Kyoto 2017 • @hidetaka_dev • https://hidetaka.dev

• https://hidetaka.dev

https://templates.microcms.io/templates/detail/61ad8e9d-77db-4155-964b-aa8acb6d7f41

• https://templates.microcms.io/templates/detail/61ad8e9d-77db-4155-964b-aa8acb6d7f41

アジェンダ • Cloud are Workersで、「CMSの外」からサイトを操作できる • ドメイン( DNS )をCloud areで管理する必要があるのに注意 fl fl • インフラの設定・最適化は、インフラ側で管理しよう

CMSに付随する「サーバー側作業」 • 特定期間・特定のURLでアクセス制限を行いたい • サイトの速度を上げるため、キャッシュを使いたい • サーバーへの負荷を減らしたい • ヘッダーやレスポンスのカスタマイズを行いたい

fl https://www.cloud are.com/ja-jp/developer-platform/workers/

• https://www.cloudflare.com/ja-jp/developer-platform/workers/

Cloudflare WorkersをCMSに • Cloud areのエッジサーバー上でコードを実行 • Workersへのリクエストを、別のサーバーに転送できる fl • Nginxなどのような、「プロキシーサーバー」をJSで構築

リクエストを中継（Proxy）する例
export default {
async fetch(
request: Request,
env: Env
): Promise<Response> {
const url = new URL(request.url)
url.hostname = 'example.com'
const res = await fetch(url, {
headers: request.headers,
body: request.method.toLocaleUpperCase() === 'GET' ? undefined: request.body
})
return res
},
};

Honoを使えば、 パス・メソッド別の 処理もeasyに

Honoで、レスポンスヘッダーを編集
import { Hono } from 'hono'
const app = new Hono()
app.get('/*', async (c) => {
const res = await fetch(c.req.raw)
const newResponse = new Response(res.body, res)
newResponse.headers.set('X-Custom', 'Foo')
return newResponse
})
export default app

Middlewareで、機能追加をお手軽に

wp-adminにBasic認証を設定

Cloudflare WorkersをCMSの前に置く • 「CMSやサーバーの外」でサイトに手を入れられる • 管理画面へのアクセス制限 • トラッキングコードの追加 etc.. • Honoを使って、 パス・メソッドごとの設定やmiddlewareを活用しよう

アジェンダ • Cloud are Workersで、「CMSの外」からサイトを操作できる • ドメイン( DNS )をCloud areで管理する必要があるのに注意 fl fl • インフラの設定・最適化は、インフラ側で管理しよう

独自ドメインは、登録したサイトのみ

レジストラで、NSの設定を変更

DNS設定も移行しよう

アジェンダ • Cloud are Workersで、「CMSの外」からサイトを操作できる • ドメイン( DNS )をCloud areで管理する必要があるのに注意 fl fl • インフラの設定・最適化は、インフラ側で管理しよう

プラグイン / サーバーシステムとの使い分け • 大体のことは、NginxやWordPressプラグインでもできる • 「実装方法」や「デプロイ方法」によって使い分け • 「顧客が機能や設定を誤って操作しないようにする」ために、 fl Cloud are Worker上で設定を行うことも

fl fl fl https://www.cloud are.com/ja-jp/developer-platform/cloud are-images/ https://developers.cloud are.com/zaraz/

• https://www.cloudflare.com/ja-jp/developer-platform/cloudflare-images/
• https://developers.cloudflare.com/zaraz/

https://zenn.dev/yusukebe

• https://zenn.dev/yusukebe

まとめ • Cloud are Workersで、サーバーの外からサイトを触れる • ZarasやImagesなども最適化に役立つが、DNSに注意 • サーバー / プラグインに続く「第三の方法」として、 fl エッジコンピューティングをWebサイト運用に活用しよう