WordPressサイトに Cloudflareを入れてみた話

WordPressサイトに Cloudflareを入れてみた話 Cloudflare Meet-up Osaka #5

Hidetaka Okamoto (@hidetaka_dev) - WordCamp Kyoto 2017 WordCamp Kansai 2024 Stripe Dev Advocate AWS Samurai 2017 Alexa Champions https://hidetaka.dev

• https://hidetaka.dev

今日の話を3分で ● 個人サイトにCloudflare入れてみた ● モニタリングやキャッシュ管理がお手軽 ● Zarazを使えば、WordPressの外からいろいろできる ● DNSにこだわりないなら、とりあえずCloudflareでよさそう

いろいろサイトを 運用している

課題: WordPressをカスタムしたくない だけどサイトはカスタムしたい

プラグインや カスタムコードの 保守管理を 最小限にしたい

WPプラグインはYak Shavingになりやすい ● お知らせ機能と多少の固定ページがあればいい ● SEO周りの機能がほしいので、１つプラグインをいれよう ● 外部サイトのデータを埋め込みたいので、連携プラグインを追加 ● フィードの情報を記事として扱いたい ● ○ カスタム投稿タイププラグイン ○ フィードを投稿として取り込むプラグイン 検索・データマッシュアップ・キャッシュ管理・etc…

問題が起きた際の 調査対象は プラグイン数に比例する

理想は だれが 何に責任を持つかを 明確にすること https://aws.amazon.com/jp/complia nce/shared-responsibility-model/

• https://aws.amazon.com/jp/complia

WordPressでやること WPの外でやることの切り分け

サードパーティツールの 追加や管理を外に出す Analytics tools / CRM tools / etc..

GTM or Zaraz ? ● どっちかは入れておこう ○ ● スクリプトの挿入タイミングは、Zarazの方が早い ○ ● 「間違ってプラグイン止めた / 消しちゃった」対策にもなる ZarazはCDN エッジで挿入, GTMはページ読み込み後 料金とDNSレコードの管理方法 vs 速度と集約管理

カスタムスクリプトも Zarazで挿入できる

現在のページのURLやスクロールなども取得できる

より複雑な実装は Managed Components https://zenn.dev/mizchi/articles/zara z-is-edge-gtm

• https://zenn.dev/mizchi/articles/zara

「100万イベントまで無料」をどう活用するか？ ● PVだけなら月間100万PVまで無料とも考えれる ○ PV数 + カスタムイベントの有無やツールの数でコスト見積もり ○ 100万1イベント目からは100万イベントごとに5ドルの従量課金 ● 承諾UIやモニタリング等の機能を使いたいか否かも選定材料 ● 3rd partyツールのパフォーマンスが気になる人も要検討

キャッシュやパフォーマンス管理も WPの外でやりたい

Weekly Speed test

RUM

キャッシュ分析

キャッシュルー ルで調整

柔軟に管理できる・・・が、まだよくわかっていない ● キャッシュしたいページ・してはいけないページの区別 ● 更新タイミングの調整（SWRができるかどうか） ● RuleのテンプレートやRUMを見ながら試行錯誤できるのは便利

one more things

WordPressでは 記事の管理だけやりたい

Cloudflare Pages with WP API ● フロントエンドをJavaScript FWで構築（Remix / Next.js / etc..） ● 記事データはWP APIから取得する ● リニューアルやローカル開発時のデータ同期や取得がとても楽 ● Pages pluginやKVなどの周辺ツールを活用したユーザー機能の追加 ● （ Learn JavaScript more deeply ）

Cloudflare たのしいよ