Cloudflare Meetup Osaka の Kick Off! に参加してきました。
とりあえずアカウント作っただけなのでハンズオンで試すところからです。
セッション
はじめてのCloudflare サービス紹介
Cloudflare 亀田さん
- AWS と違いリージョンがない
- すべてが285の Edge で動く
- 海底ケーブルがあるところに PoP がある
- 東京、大阪、福岡、沖縄
- 192Tbps のネットワーク
- HTTPS, L3/L4, SaaS で接続
- サービス郡
- Cloudflare Platform
- Cloudflare Zero Trust Services
- Cloudflare Network Services
- Cloudflare Applications Services
- セキュリティがメイン商品
- 世界のインターネットトラフィックの20%（現在は22%）
- DNS 1.1.1.1
- （自称）正解最速 DNS
- インターネットを安全にしたいポリシーが APNIC に認められて 1.1.1.1 がもらえた
- コンピュート : Workers
- Edge で動くコンピューティングリソース、L@E みたいなもの
- リージョンはない
- Node.js は使えません
- JavaScript に加えて Web Assembly をサポート
- Chrome とおなじ V8 エンジンが動いている
- Web Workers(HTML5) ベースで JavaScript を実行
- Service Workers で実現
- JS のポリモルフィルで Node モジュールは読み込める
- 無償だと1MBなので容量注意
- コールドスタートがない
- コンテナが保持される
- Edge で動くコンピューティングリソース、L@E みたいなもの
- Storage
- ドメインが安く買える
- 卸値でそのまま販売
ハンズオン
- アカウント開設
- ハンズオンで複数人が同じ場所からサインアップするとエラーになるトラブル
- 攻撃されたと思われた？
環境セットアップ
Wranglerのインストール
npm install -g wrangler
権限の設定
wrangler login
Allow Wrangler to make changes to your Cloudflare account? の画面がでるので、Cloudflare から wrangler へのアクセス許可する。
テスト
$ wrangler init test ⛅️ wrangler 2.12.3 -------------------- Using npm as package manager. ✨ Created test/wrangler.toml ✔ Would you like to use git to manage this Worker? … no ✔ No package.json found. Would you like to create one? … yes ✨ Created test/package.json ✔ Would you like to use TypeScript? … no ✔ Would you like to create a Worker at test/src/index.js? › Fetch handler ✨ Created test/src/index.js ✔ Would you like us to write your first test? … no $ cd test $ wrangler dev ⛅️ wrangler 2.12.3 -------------------- ⬣ Listening at http://0.0.0.0:8787 - http://127.0.0.1:8787 - http://172.30.0.188:8787 ✘ [ERROR] Error: You need to register a workers.dev subdomain before running the dev command in remote mode
エラーが発生。
どうやらサブドメインの設定が先にいるとのこと。
wrangler publish コマンドでできるっぽい。
$ wrangler publish ⛅️ wrangler 2.12.3 -------------------- Total Upload: 0.19 KiB / gzip: 0.16 KiB ▲ [WARNING] You need to register a workers.dev subdomain before publishing to workers.dev ✔ Would you like to register a workers.dev subdomain now? … yes ✔ What would you like your workers.dev subdomain to be? It will be accessible at https://<subdomain>.workers.dev … omurontest ✔ Creating a workers.dev subdomain for your account at https://omrontest.workers.dev. Ok to proceed? … yes Success! It may take a few minutes for DNS records to update. Visit https://dash.cloudflare.com/xxxxxxxxxxxxxxx/workers/subdomain to edit your workers.dev subdomain Uploaded omuron2test (1.26 sec) Published omuron2test (31.96 sec) https://omuron2test.omurontest.workers.dev Current Deployment ID: xxxxxxxxxxxx
適当なサブドメインつけて Visit の URL にアクセスしてサブドメインの登録作業をする。
生成されたドメインにアクセスして Hello World! が表示されたらOK。
あとは Cloudflare Workers と KV でTodoListアプリを作る などを試す。
LT
Wrangler って何だ？
Iret 鈴木さん
- wrangler : 口論者、カウボーイなど
- Cloudflare Workers を操作する CLI ツール
- ローカルで Workers を実行可能
- コマンド
- init, login, dev, publish, delete
Remix アプリを Wrangler でデプロイ
Stripe 岡本さん
- wrangler で Remix 簡単にデプロイ
wrangler pages publish- Remix には Cloudflare Pages / Workers が標準である
- Pages へのデプロイは Node のバージョン注意
- NODE_VERSION で指定
- Prisma 使うときは別途 DB 必要
- D1 には対応してない
Cloudflare R2 の場所を改めて確認してみる
クラスメソッド 大栗さん
- R2
- エグレス料金発生しない
- グローバルなオブジェクト
- 一番近い場所にバケットができる
- Route53 のレイテンシーで概ねの場所を把握してみた
- Location Hints を指定するとデータのアクセス元に近い地理的な場所を指定できる
- カスタムドメイン使うと更に早くなる
所感
Cloudflare は初体験でした。
全くの初心者だと難しいかもしれませんが、CDN をある程度知っていると使うことはできそうな感じです。
料金体系が AWS と違って段階的だったり、R2 とかは S3 互換だけど半額だったりするので、勉強や構築のコストはかかっても長い目で見ると安くする構成にできるかもと感じました。
まずは S3 で使っているところを置き換えるのを試すところからかな。
