omuronの備忘録

個人的な備忘録

「Cloudflare Meetup Osaka Kick Off!」 #CloudflareUG 受講メモ

cfm-cts.connpass.com

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%)
    • 無償機能がたくさんあるため
    • Project Safekeeping
      • 公的機関に無償で提供、病院など
    • Project Galileo
      • 芸術、人権、市民団体などに無償で提供
      • ロシアからの VPN 接続利用
  • 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なので容量注意
    • コールドスタートがない
      • コンテナが保持される
  • Storage
    • Workers KV : DynamoDB のエッジ版みたいなもの
      • 結果整合性モデル
    • Durable Objects : オブジェクトストレージ、最初にアクセスしたところのエッジに作成されて、それ以外にコピーされる
    • R2 : オブジェクトストレージだけどリージョンの概念を唯一持ってる
      • S3 互換で、AWS CLI がそのまま動く
      • 価格が S3 より半分
    • D1 : SQL Like
  • ドメインが安く買える
    • 卸値でそのまま販売

ハンズオン

  • アカウント開設
    • ハンズオンで複数人が同じ場所からサインアップするとエラーになるトラブル
    • 攻撃されたと思われた?

環境セットアップ

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 ツール
    • CDNドメイン操作は flarectl という違うツール
      • Python, Node.js, Go(V1が出てないので安定してない)
  • ローカルで 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 を指定するとデータのアクセス元に近い地理的な場所を指定できる
    • ベストエフォートなので保証はしない
    • Amazon S3 の互換 API のみで設定できる
      • Wrangler からできない
      • wnam, enam, weur, eeur, apac (北米西、北米東、西ヨーロッパ、東ヨーロッパ、アジア太平洋)
  • カスタムドメイン使うと更に早くなる

所感

Cloudflare は初体験でした。
全くの初心者だと難しいかもしれませんが、CDN をある程度知っていると使うことはできそうな感じです。
料金体系が AWS と違って段階的だったり、R2 とかは S3 互換だけど半額だったりするので、勉強や構築のコストはかかっても長い目で見ると安くする構成にできるかもと感じました。
まずは S3 で使っているところを置き換えるのを試すところからかな。