今更ながらCloudflare Workersを触ってみる

# 概要

Cloudflareを業務で利用する機会が増えており、何となくで使うのは辞めたいなあ
ということで、今更ながら[Cloudflare Workers](https://workers.cloudflare.com/)について一から触って理解を深めたいと思います。

## [Cloudflare Workers](https://workers.cloudflare.com/)とは
エッジサーバーでJavaScriptを実行できるサーバレスのサービスです。

特徴的な部分として下記が挙げられるかと思います。

* 0msコールドスタート
    * リクエストを処理できるようになるまでの待ち時間がない
    * どうやって実現しているかは[こちらの記事](https://zenn.dev/msy/articles/4c48d9d9e06147)が参考になりました
* エッジサーバーで展開できる
    * ユーザーの物理距離の近いサーバーから配信されるためレイテンシーが低い
    * オリジンサーバーに到達するまでの間で処理を実行できる
        * ABテストの実現
        * User-Agentに応じたリダイレクトなど




### [料金](https://www.cloudflare.com/ja-jp/developer-platform/workers/)
* 100万リクエストにつき `$0.15` (最低 `$5`~)

かなり安く使えますね！シンプルな料金体系なのもありがたいです。
また、無料プランでも1日10万リクエストまで使えるので、私用で使う分には十分ですね！

cf: lambdaが100万リクエストで `$0.6` + GB-秒あたり 0.00005001USDのコンピューティング料金


## チュートリアル

Web Consoleで試す場合は、ワーカーの作成を押すだけで、サンプルスクリプトが作られて、デプロイが完了します。

![スクリーンショット 2023-11-16 0.54.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224825/8c37fd0b-41de-d654-a28f-196d14648761.png)

あっという間にHello Worldを全世界に向けて発信できます。
これは、かなり楽ですね。衝撃的です。

![スクリーンショット 2023-11-16 0.57.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224825/a28bc7d7-e5c6-0252-35c4-f52a6edc2b51.png)

ただ、これだと個人で使う分にはいいですが、複数人で開発しているサービスだと、ちゃんとデプロイの管理やスクリプトをコード管理したいですよね。

そこで出てくるのが、[Wrangler](https://developers.cloudflare.com/workers/wrangler/)です。
Cloudflare Workersのプロジェクトの作成や、ビルド、デプロイを行えるCLIツールです。

今はVersion3となっており、[Version4では削除される予定の機能](https://developers.cloudflare.com/workers/wrangler/deprecations/)もあるので、使う前に必ず確認してから使いましょう。

### Wranglerのセットアップ

まずnpm経由(またはyarn)でwranglerのパッケージをインストールします。

```
npm create cloudflare@latest
```

上記コマンドを叩くだけで、あとは質問に対して答えていくだけで、作成されます。

今回はHello World Workerを選択します。

![スクリーンショット 2023-11-16 1.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224825/1f881e57-b823-ea24-24b7-7247aec60309.png)

途中、ブラウザが開いて権限を渡しても問題ないか聞かれるので、承認すればあとは自動で完成します。
めっちゃ楽ですね。

下記のようなディレクトリ構成でベースが作られているはずです。

```
- node_modules
    - etc...
- package-lock.json
- package.json
- src
    - index.ts
- tsconfig.json
- wrangler.toml
```

wrangler.tomlはCloudflare Workersを管理するための設定ファイルです。
いろいろ設定ができるので、[こちらのドキュメント](https://developers.cloudflare.com/workers/wrangler/configuration)を参照すると良いです。

CI/CDで使いたい場合は、[APIトークン作成ページ](https://dash.cloudflare.com/profile/api-tokens)からトークンを作成するをクリックし、テンプレートからCloudflare Workersを編集するというのがあるので、それをベースにAPIトークンを作成すればOKです。
![スクリーンショット 2023-11-16 1.27.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224825/2d58bc0b-1b7b-769e-8b35-fd7a3b0f80cb.png)

作成したAPIトークンはCLOUDFLARE_API_TOKENとして環境変数に設定すれば、それだけであとは
`npx wrangler deploy --env production`　で[デプロイ](https://developers.cloudflare.com/workers/wrangler/commands/#deploy)ができます。

~~こんな楽でいいんだろうか~~


## おわりに

Cloudflare Workers めっちゃ楽ですね。
今まで知らなかったのが勿体無いくらいに。
それでいてパフォーマンスもいいとなるとそりゃ流行るわけだと思いました。
実際にベンチマークしてみたり、まだまだ実験してみようかなと思いました。
最後までご覧いただきありがとうございました！


## 参考記事
* [AWS Lambda vs Cloudflare Workers](https://upstash.com/blog/aws-lambda-vs-cloudflare-workers)
* https://zenn.dev/msy/articles/4c48d9d9e06147
* https://www.codegrid.net/articles/2021-cloudflare-workers-1/
* https://zenn.dev/moutend/articles/97c98a277f4bae#worker%E3%81%AF%E4%B8%96%E7%95%8C%E4%B8%AD%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%95%E3%82%8C%E3%82%8B