Cloudflare Workersで静的コンテンツのhostingを試す

この記事は[Global Mobility Service Advent Calander 2020](https://qiita.com/advent-calendar/2020/global-mobility-service)の投稿です。
私は現在フロントエンドの開発に関わっているのですが、開発の際に手軽な選択肢としてJAMstackと呼ばれる構成にする話や、また、その知見を目にする機会も増えてきました。この記事では、hostingサービスの簡単な比較する中で気になった[Cloudlare Workers](https://workers.cloudflare.com/)を試したことをまとめています。


## JAMstackのhostingについて
そもそもJAMstackとはJavaScript, APIs, Markupを使用した構成の総称とされます。prebulidした静的サイトを[CDN](https://jamstack.org/glossary/cdn/)もしくは他のhostingサービスにて提供を行うことになるのですが、特にCDNを利用することで低コスト、セキュアなサイト構築、かつパフォーマンス、スケーラビリティを高いレベルでの実現が可能といったメリットをより得ることができます。
> https://jamstack.org/why-jamstack/


静的サイトジェネレーター(SSG)としてGatsby、Hugo、NextJSを利用しhostingを検討する場合、Netlify、Vercel、AWS Amplifyなどが候補にあがるのではないでしょうか。現在、私自身のブログの構成にはNuxtJS、headless CMSとしてcontentfulを利用し、HostingサービスはこれまでNetlifyを利用していました。今回は、Cloudflare Workersを新たな候補として検討してみました。理由として先日アナウンスされた[Cloudflare Pages](https://blog.cloudflare.com/cloudflare-pages/)が気になっており、PagesのベースとなるCloudflare Workers(正確にはWorkers Site)へNetlifyから移行することでパフォーマンスが改善したという[話](https://brianli.com/migrating-from-netlify-to-cloudflare-workers-sites-for-2x-performance/)も目にしたこともあり今回自身でも試してみました。

### 静的サイトのhosting先としてのCloudflare Workers

Cloudflare workersとはJavaScript(V8)とWeb-AssemblyをCloudflareのnetwork [Edge](https://www.cloudflare.com/learning/serverless/glossary/what-is-edge-computing/)にて実行可能なサーバレスプラットフォームです。Workersによってユーザーのリクエストは自動的に最寄りのデータセンターへルーティングされることにより低遅延のwebサイト、アプリケーション、APIの実現が可能になります。

Cloudflare workersはWorkers KVと呼ばれるグローバルに分散した永続的なストレージソリューションにアクセスすることができます。Workers KVは、高読み取り量に最適化されたキーバリューデータストアであり、Cloudflare Workers上で動作するアプリやその他のサービスに最適な軽量ストレージオプションです。

Workers KVは静的サイトの提供を行う場合はその保存先になります。静的サイトにアクセスするときは、ブラウザ固有のURLを指定すると、サーバーが事前に生成された静的HTMLファイルを返します。URLが「キー」であり、HTMLファイルの内容が「値」となります。静的サイトはWorkers KVのような、キーとバリューのデータストアに格納することができます。

公式の説明は以下
> CFWのCLIツールである[Wrangler](https://github.com/cloudflare/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/


昨年度より静的サイトの[対応](https://www.coywolf.news/webmaster/cloudflare-static-website/)が行われたことによりJAMstackのhostingサービスの候補になりました。


## lighthouse にてhosting サービス比較
以下、Workers、Netlify、Vercelでの比較を行いました。利用したのはSSGを使ったNuxtとheadless CMSを組み合わせたblogの構成になります。

### Workers
![](https://i.imgur.com/3tVYdSs.png)


### Netlify

![](https://i.imgur.com/EnUEpch.png)



### Vercel
![](https://i.imgur.com/ZjfQole.png)


### 雑感
NetlifyとVercelでの比較を行った記事を以前拝見したことがあり、Vercelのperformanceが非常に優れていることを知っていたのですがWorkersに関してもVercelと同様に高い結果を得ることができました。まだ情報を追いきれておらず理解できていない部分も多いため、別の機会にまとめる事ができたらと思っています。Githubとの連携などに対応したCloudflare Pagesを早く試してみたいです。PVほとんどない個人blogにここまでのパフォーマンス求める意味はないですが、新しい技術に関心があるため今後も新規サービスを追っていきたいと思います。

## その他

### Workersの設定

設定はこの[記事](https://scotch.io/tutorials/deploying-a-static-nuxtjs-site-to-cloudflare-workers)を参考にしました。


- アカウントを登録するhttps://workers.cloudflare.com/
![](https://i.imgur.com/Izy7fVg.png)


- CLIツールのwranglerのインストールします

```
npm i @cloudflare/wrangler -g

```

- ```wrangler　config```コマンド入力後Cloudflare workerのToken入力を求めらます

```
wrangler config
```

- Global APIでの登録は非推奨になっています。CloudflareのアカウントページからAPI Tokenを発行しましょう

![](https://i.imgur.com/xCMaHfh.png)

- Profileページ、API Tokensからcreate Token に進みます

![](https://i.imgur.com/0CTtFKo.png)

- 設定を行い、発行されたTokenをコピーします
![](https://i.imgur.com/LZKBy14.png)

- 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](https://github.com/cloudflare/wrangler-action)への対応も行われているためGithubとのスムーズに連携が可能です。




### Cloudfalre Pages
現在Beta版ではありますが[Cloudflare Pages](https://blog.cloudflare.com/cloudflare-pages/)というJAMstackのhostingにより特化したサービスが発表されました。
![](https://i.imgur.com/dbYUjPc.png)
基本的に使用技術は変わらない印象ですが、Githubとの連携によるbranchごとのstaging環境が簡単にできるなどより便利な機能が提供されるとのことです。利用可能なれば試してみたいと思います。



### 参考記事
- https://workers.cloudflare.com/

- https://brianli.com/migrating-from-netlify-to-cloudflare-workers-sites-for-2x-performance/

- https://levelup.gitconnected.com/use-cloudflare-javascript-workers-to-deploy-you-static-generated-site-ssg-1c518e078646

- https://scotch.io/tutorials/deploying-a-static-nuxtjs-site-to-cloudflare-workers

- https://www.coywolf.news/webmaster/cloudflare-static-website/

- https://mizchi.dev/202009122126-cloudflare-workers