この記事はGlobal Mobility Service Advent Calander 2020の投稿です。
私は現在フロントエンドの開発に関わっているのですが、開発の際に手軽な選択肢としてJAMstackと呼ばれる構成にする話や、また、その知見を目にする機会も増えてきました。この記事では、hostingサービスの簡単な比較する中で気になったCloudlare Workersを試したことをまとめています。
JAMstackのhostingについて
そもそもJAMstackとはJavaScript, APIs, Markupを使用した構成の総称とされます。prebulidした静的サイトをCDNもしくは他のhostingサービスにて提供を行うことになるのですが、特にCDNを利用することで低コスト、セキュアなサイト構築、かつパフォーマンス、スケーラビリティを高いレベルでの実現が可能といったメリットをより得ることができます。
静的サイトジェネレーター(SSG)としてGatsby、Hugo、NextJSを利用しhostingを検討する場合、Netlify、Vercel、AWS Amplifyなどが候補にあがるのではないでしょうか。現在、私自身のブログの構成にはNuxtJS、headless CMSとしてcontentfulを利用し、HostingサービスはこれまでNetlifyを利用していました。今回は、Cloudflare Workersを新たな候補として検討してみました。理由として先日アナウンスされたCloudflare Pagesが気になっており、PagesのベースとなるCloudflare Workers(正確にはWorkers Site)へNetlifyから移行することでパフォーマンスが改善したという話も目にしたこともあり今回自身でも試してみました。
静的サイトのhosting先としてのCloudflare Workers
Cloudflare workersとはJavaScript(V8)とWeb-AssemblyをCloudflareのnetwork Edgeにて実行可能なサーバレスプラットフォームです。Workersによってユーザーのリクエストは自動的に最寄りのデータセンターへルーティングされることにより低遅延のwebサイト、アプリケーション、APIの実現が可能になります。
Cloudflare workersはWorkers KVと呼ばれるグローバルに分散した永続的なストレージソリューションにアクセスすることができます。Workers KVは、高読み取り量に最適化されたキーバリューデータストアであり、Cloudflare Workers上で動作するアプリやその他のサービスに最適な軽量ストレージオプションです。
Workers KVは静的サイトの提供を行う場合はその保存先になります。静的サイトにアクセスするときは、ブラウザ固有のURLを指定すると、サーバーが事前に生成された静的HTMLファイルを返します。URLが「キー」であり、HTMLファイルの内容が「値」となります。静的サイトはWorkers KVのような、キーとバリューのデータストアに格納することができます。
公式の説明は以下
CFWのCLIツールであるWranglerを使って、作成した静的サイトをKV(storage)に直接アップロードすることができます。リクエストがWorker SiteにヒットするとWranglerによって生成されたCloudflare WorkerがKVにあるアセットを読み込み、適切なヘッダーと共に提供を行います。
Using Wrangler (our CLI), you can upload your site’s assets directly into KV. When a request hits your Workers Site, the Cloudflare Worker generated by Wrangler, will read and serve the asset from KV, with the appropriate headers (no need to worry about Content-Type, and Cache-Control; we’ve got you covered).
https://blog.cloudflare.com/workers-sites/
昨年度より静的サイトの対応が行われたことによりJAMstackのhostingサービスの候補になりました。
lighthouse にてhosting サービス比較
以下、Workers、Netlify、Vercelでの比較を行いました。利用したのはSSGを使ったNuxtとheadless CMSを組み合わせたblogの構成になります。
Workers
Netlify
Vercel
雑感
NetlifyとVercelでの比較を行った記事を以前拝見したことがあり、Vercelのperformanceが非常に優れていることを知っていたのですがWorkersに関してもVercelと同様に高い結果を得ることができました。まだ情報を追いきれておらず理解できていない部分も多いため、別の機会にまとめる事ができたらと思っています。Githubとの連携などに対応したCloudflare Pagesを早く試してみたいです。PVほとんどない個人blogにここまでのパフォーマンス求める意味はないですが、新しい技術に関心があるため今後も新規サービスを追っていきたいと思います。
その他
Workersの設定
設定はこの記事を参考にしました。
-
アカウントを登録するhttps://workers.cloudflare.com/
-
CLIツールのwranglerのインストールします
npm i @cloudflare/wrangler -g
-
wrangler configコマンド入力後Cloudflare workerのToken入力を求めらます
wrangler config
- Global APIでの登録は非推奨になっています。CloudflareのアカウントページからAPI Tokenを発行しましょう
- Profileページ、API Tokensからcreate Token に進みます
-
設定を行い、発行されたTokenをコピーします
-
Tokenを入力することで初期設定は完了です
💁 Validating credentials...
✨ Successfully configured. You can find your configuration file at:
- 続いてdeployするprojestのrepository rootに移動してwrangler init --siteコマンドを実行します
$ wrangler init --site
⬇️ Installing cargo-generate v0.5.0...
🔧 Creating project called `workers-site`...
✨ Done! New project created /Users/hoge/hogehoge/workers-site
✨ Successfully scaffolded workers site
✨ Succesfully created a `wrangler.toml`
- いくつかファイルが作成されますがrepository rootに作成されたwrangler.tomlにて必要情報を入力していきます
初期ファイル
account_id = ""
name = ""
type = "webpack"
route = ""
workers_dev = true
zone_id = ""
[site]
bucket = ""
entry-point = "workers-site"
必須項目
-
account IDは cloudflare workerのoverviewページの右に表示されているAccout IDをコピーし入力します
-
nameはworkerのproject nameになり自由に編集できます。設定するとデプロイしたサイトURLは以下のようになります。sub-domainはworkerの登録をしたときに入力した名前です。
ここに反映される.<workers-sub-domain>.workers.dev
- bucketは静的サイトファイルのfolderになります。Nuxt だとgenerateして作成されるフォルダ名の
distになります
編集後
account_id = "******************"
name = "editableName"
type = "webpack"
route = ""
workers_dev = true
zone_id = ""
[site]
bucket = "dist"
entry-point = "workers-site"
- Nuxtなのでgenerateコマンド実行後、作成された
distフォルダの静的サイトをwrangler publishコマンドでdepoyします
npm run generate
wrangler publish
- 問題なければアクセスするためのURLが出力されます
✨ Built successfully, built project size is 13 KiB.
🌀 Created namespace for Workers Site "__editableName-workers_sites_assets"
✨ Success
🌀 Uploading site files
✨ Successfully published your script to
https://editableName.<workers-sub-domain>.workers.dev
という流れでスムーズにdeployまで行うことができました。
今回はcliでのdeplyまでおこないましたが、公式からgithub actionへの対応も行われているためGithubとのスムーズに連携が可能です。
Cloudfalre Pages
現在Beta版ではありますがCloudflare PagesというJAMstackのhostingにより特化したサービスが発表されました。
基本的に使用技術は変わらない印象ですが、Githubとの連携によるbranchごとのstaging環境が簡単にできるなどより便利な機能が提供されるとのことです。利用可能なれば試してみたいと思います。