2023/2/25

長いことCloudflareを触っているらしい

概要や類似サービスとの比較

もともとの立ち位置はclientとoriginの間にあるやつ

用途の例としては、ABテスト、responseの書き換え、cache、loggingなど

ただ、CDNで色々できるんなら、わざわざorigin用意しなくてよくね？という思想を推し進める

ファイル制限は5MB

なので大きいlibraryとかも使えなくて辛い

昔は1MBだった

Node.jsに依存するlibraryは使えない

Web標準のlibraryしか使えない

無料プランではログを使う機能が使えない

console.logの結果が表示されない

リージョンが固定される

CDNとしての弱さがある

東京、大阪、福岡、沖縄

起動が速い

なんでもできる

外部サイトに飛ばすとか

edgeとしてはcloudflareが強い

世界のネットワークの20%はcloudflare

使うとcloudflareのサービスに依存してしまう

他のサービスに変えづらい

みんな依存してるので、落ちるとみんな一気に落ちる

$ npx wrangler init edge

$ npm run start -- --local

localでcloudflare workersを起動

localでの起動は昔は大変だったらしい

最終的には本家に取り込まれたかパクられたかしたらしい

code:ts

export default {

async fetch(

request: Request,

env: Env,

ctx: ExecutionContext

): Promise<Response> {

return new Response("Hello World!");

},

};

↑今はOriginは存在しなく、途中のCDN部分のみを立てた状態

ただ、originを用意する必要があるのか？という思想でもある

originをedge側に持っていきたい

Cloudflare Workers上ではnode.jsが動かない

Web Workersで動かす

なので、node.jsに依存しているlibraryが使えない

file systemなども扱えない(?)

だから、Node.jsに依存するlibraryを使うとなると、そこだけoriginで動かすなどしないといけない

HonoはWeb標準に則って作られているのでCloudflare Workers上でも動く

他には、Remix, Astro, Qwikなどは動くらしい

Cloudflare上にdeployする

web上でアカウントの認証とかやったらいけた

$ npm run deploy

これを実行するとURLが発行される

Next.jsを導入する

next.jsをoriginとする

8787(cw)にアクセスが来たものを、3000(next)に飛ばす

ABテストしてみる

静的に作ったHTMLを2つ用意しておいて、それをSWできりかえて配信したりできる

フロントのコードなどに条件分岐を書かなくて済む

next.js上で、aとbの2種類のページを作り、

workersで、特定のユーザのみaを見せる、みたいなことをする

とりあえずランダムで

Cookieを使って、ABテストのユーザを切り替える

Cookieの設定をするのはWorkers

一度A or Bのページを見たら、それ以降は同じページが表示される

外部サイトに飛ばせる

routingしてる感じ

Workerの中からDDosする人がたまにいるらしい

CW上でcacheさせる

時刻を返すAPIを30秒間cacheさせる

web標準ではない

code:ts

app.get("/api/cache", (c) => {

headers: c.req.headers,

body: c.req.body,

cf: {

cacheTtl: 30,

},

});

});

wranglerで入れたからか?

cache-controlを使ったときの注意

データセンターごとにキャッシュする

北海道でキャッシュされたものは、沖縄では再利用されない、という感じ

なのでちょっとキャッシュヒット率が悪いように見えてしまう

HTMLを書き換える

Originから受け取ったHTMLを書き換えて返却できる

ハンズオンでは、外部のサイト(example.com)のタイトルを書き換えて返却した

https://gyazo.com/0f78144bd75b6d69d2cc08433d09a1d9

例えば、全体は静的ページでキャッシュしてるが、ページ内の一部分のみを動的に書き換えたい、とかに使える

サイドバーの一部とか

カートの中身のアイコンとか？

マイクロフロントエンドみたいに、サイドバーはこのoriginから、ヘッダーはこのoriginから、ということができる

SPAとは相性が悪いらしい

そんな多用する感じではないらしい

非同期的にresponseを捌きたい

Next.js側で重い処理を書く

5秒待つような処理

これをSWでは待たずにresしたい

Node.jsを使って非同期的に処理できない問題(?)

対策

便利らしい

POSTに対して使える

時間かかる処理でもclientが待たなくていい

重い処理、待つ

非同期的に処理できる

req時に、originからのresを待たずに、clientに返せる

workersで例外が起きた時

その時はoriginに飛ばしたい

エンドポイントごとに設定できる

Originありきのedgeではなく、edgeだけでやっていきたい

remix, qwik, sveltekit, astroらへんが、edgeだけで動く

Remixを入れる

$ npx create-remix@latest edge-application

https://gyazo.com/1894923391fc2c28a32f46b2a54365d2

Cloudflare Pagesが選択肢にあるのでそれを選択

Remix

web標準

front/backが一緒になっているものを作る場合はNext.jsより楽らしい

formのsubmitの扱いとかが楽らしい

これめっちゃ良いらしい

defaultでSSR

deployする

$ npm run build

$ npx wrangler pages publish ./public/

https://gyazo.com/a7653d344d3c5043f55c08d69c5505c1

次回

cloudflare独自の認証ができたりする

zero trust

R2

KV

D1