CloudFlareというサービスを試す(2) Workers

# はじめに
https://qiita.com/donraku/items/1f2fd6becc802ba6b41f

↑の続き。

アプリケーションを作りたいので、動的なサイトを作ってみる。
CloudFlare Workersを使えばできるようなので試してみる。

# 結論
簡単に動的なサイトを作ることができた。
犬の画像を取ってきて表示することができた。
CloudFlare Workersは無料だと1日10万回まで実行可能。

↓に例がいろいろあるので参考になる。
https://developers.cloudflare.com/workers/examples/

# 詳細
CloudFlare Workersで簡易なサイトができるまでの流れは以下の通り。

## 初期設定
最初に設定ウィザードが表示されるので設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/08b58438-d9af-e3de-3512-ee599345da60.png)
無料でサブドメインを使えるらしい。
地域は「地球」。壮大な感じが味わえる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/32deb0f0-7198-7080-8387-e0f902c3b1d0.png)
無料を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/387bfcc6-ecc8-98b5-c5ec-558d156331b4.png)
「サービスを作成」で画面上で作れちゃうのは確認。
今後のために「Wrangler CLI をセットアップ」の方でやることにする。

## Wrangler CLI の設定
ドキュメントの通りに実行。

```console
C:\donraku\cloudflare>npm install -g wrangler
npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.

changed 56 packages, and audited 58 packages in 12s

found 0 vulnerabilities
```
たぶん、前に1回やってるから必要なかったかもしれない。

```console
C:\donraku\cloudflare>wrangler login
 ⛅️ wrangler 2.0.5
-------------------
Attempting to login via OAuth...
Successfully logged in.
```
これも同様。

## 簡易サイトの作成

```console
C:\donraku\cloudflare>wrangler init second-app
 ⛅️ wrangler 2.0.5
-------------------
Using npm as package manager.
✨ Created second-app\wrangler.toml

X [ERROR] Command failed with exit code 1: git --version

  'git' �́A�����R�}���h�܂��͊O���R�}���h�A
  ����\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B


If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new.
```
gitが要るらしい。

```console
:\donraku\cloudflare>wrangler init second-app
 ⛅️ wrangler 2.0.5
-------------------
Using npm as package manager.
▲ [WARNING] second-app\wrangler.toml already exists!


Do you want to continue initializing this project? (y/n)
Would you like to use TypeScript? (y/n)
Would you like to create a Worker at second-app\src\index.js? (y/n)
✨ Created second-app\src\index.js

To start developing your Worker, run `npx wrangler dev` src/index.js
To publish your Worker to the Internet, run `npx wrangler publish` src/index.js
```
gitを使える状態にして、やり直して作成完了。
入力は全部「y」。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/d677ac82-9b2b-6301-2539-3f52b3190ddf.png)
フォルダとソースが生成されたのを確認。

```console
C:\donraku\cloudflare\second-app>wrangler dev src/index.js
 ⛅️ wrangler 2.0.5
-------------------
⬣ Listening at http://localhost:8787
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [l] turn on local mode, [c] clear console, [x] to exit                        │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
```
ローカルで動かす。
書いてるとおり「b」でブラウザで開ける。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/8352fdfd-0fac-d312-054e-f6efe167f111.png)
ソースを直すと感知してサーバが再起動する。
ブラウザをリロードすると画面も変わることを確認。
「x」で終了。

```
C:\donraku\cloudflare\second-app>wrangler publish src/index.js
 ⛅️ wrangler 2.0.5
-------------------
Uploaded second-app (0.60 sec)
Published second-app (3.48 sec)
  second-app.donraku.workers.dev
```
publishで公開。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/0620dea9-9fad-333e-f128-c85afdc2fc2f.png)
ダッシュボードでみるとできている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/4ae720ce-3b4d-488c-477d-166d90e7b759.png)
これだけでサイトは完成！
デフォルトでhttpsなのでたぶん安心。

```wrangler.toml
name = "second-app"
compatibility_date = "2022-05-17"
main = "src/index.js"
```
設定ファイルに「main = ...」の設定を書けば「wrangler publish」だけで良くなる。

```src/index.js
export default {
  async fetch(request) {
    //犬の画像を取ってくる
    const url = "https://dog.ceo/api/breeds/image/random";
    const response = await fetch(url);
    const json = await response.json();
    const img_url = json.message;
    //HTML生成
    const html = `
      <html>
      <body>Hello World! World!<br>
      <img src="${img_url}"></img>
      </body>
      <html>
    `;
    //返す
    const init = {
      headers: {
        'content-type': 'text/html;charset=UTF-8',
      },
    };
    return new Response(html, init);
  },
};
```
試しに、犬の画像を取ってきて表示するように変更。

```console
:\donraku\cloudflare\second-app>wrangler publish
 ⛅️ wrangler 2.0.5
-------------------
Uploaded second-app (0.60 sec)
Published second-app (0.32 sec)
  second-app.donraku.workers.dev
```
リリース。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/b3cb8201-d5ab-7b35-6826-1fccc8cfb9d8.png)
リロードする度に犬画像が変わるようになった。

https://second-app.donraku.workers.dev/

以上です。