WordPressとhonoで、 Cloudflare Workersプロキシパターンをやってみた
7.5K Views
September 20, 23
スライド概要
Cloudflare Meetup Kobe Kick Off! 2023/09
Developer
関連スライド
各ページのテキスト
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://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/
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://zenn.dev/yusukebe
まとめ • Cloud are Workersで、サーバーの外からサイトを触れる • ZarasやImagesなども最適化に役立つが、DNSに注意 • サーバー / プラグインに続く「第三の方法」として、 fl エッジコンピューティングをWebサイト運用に活用しよう