---
title: WordPressサイトに Cloudflareを入れてみた話
tags:  #cloudflare #wordpress  
author: [Hidetaka Okamoto](https://convert.docswell.com/user/hideokamoto)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/2EVDL3NGEQ.jpg?width=480
description: Cloudflare Meet-up Osaka #5
published: November 16, 24
canonical: https://convert.docswell.com/s/hideokamoto/KR26W9-2024-11-16-223245
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/2EVDL3NGEQ.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/57GYX35D7L.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4EQM85ZXJP.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/KJ4V2932E1.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LE13MK1KJG.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GEWP3D8PJ2.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/47ZKVG8673.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/YJ6Q5YPLJV.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/GJ5RYGKM74.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LE3P5RZ9J5.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/8EDLDYR8JG.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/V7P2X6WW78.jpg)



# Page. 13

![Page Image](https://bcdn.docswell.com/page/2JVDL389JQ.jpg)



# Page. 14

![Page Image](https://bcdn.docswell.com/page/5EGYX354EL.jpg)



# Page. 15

![Page Image](https://bcdn.docswell.com/page/4JQM85ZR7P.jpg)



# Page. 16

![Page Image](https://bcdn.docswell.com/page/K74V293QJ1.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LJ13MK1L7G.jpg)



# Page. 18

![Page Image](https://bcdn.docswell.com/page/GJWP3D8Q72.jpg)



# Page. 19

![Page Image](https://bcdn.docswell.com/page/4EZKVG83E3.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/Y76Q5YPZ7V.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/G75RYGK9E4.jpg)



# Page. 22

![Page Image](https://bcdn.docswell.com/page/9J2DGYW5JR.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/DEY2VGL6EM.jpg)



# Page. 24

![Page Image](https://bcdn.docswell.com/page/VJN8MGL178.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/YE9KNW4YE3.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GE8RKNQKJD.jpg)

Weekly
Speed test


# Page. 27

![Page Image](https://bcdn.docswell.com/page/LELKZPXPJR.jpg)

RUM


# Page. 28

![Page Image](https://bcdn.docswell.com/page/4JM2V4L2JW.jpg)

キャッシュ分析


# Page. 29

![Page Image](https://bcdn.docswell.com/page/PJRM2WK5E9.jpg)

キャッシュルー
ルで調整


# Page. 30

![Page Image](https://bcdn.docswell.com/page/PEXVDPLX7X.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/3EKQXDL9ED.jpg)

one more things


# Page. 32

![Page Image](https://bcdn.docswell.com/page/L73P5R39E5.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/87DLDY48EG.jpg)



# Page. 34

![Page Image](https://bcdn.docswell.com/page/VJP2X6MWJ8.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/2EVDL399EQ.jpg)



# Page. 36

![Page Image](https://bcdn.docswell.com/page/57GYX3Z47L.jpg)

Cloudflare たのしいよ


