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

4.2K Views

September 20, 23

スライド概要

Cloudflare Meetup Kobe Kick Off! 2023/09

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.
[beta]
リクエストを中継(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
},
};

11.

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

12.
[beta]
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

13.

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

14.

wp-adminにBasic認証を設定

15.

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

16.

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

17.

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

18.

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

19.

DNS設定も移行しよう

20.

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

21.

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

22.

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

23.

https://zenn.dev/yusukebe

24.

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