はじめに
↑の続き。
アプリケーションを作りたいので、動的なサイトを作ってみる。
CloudFlare Workersを使えばできるようなので試してみる。
結論
簡単に動的なサイトを作ることができた。
犬の画像を取ってきて表示することができた。
CloudFlare Workersは無料だと1日10万回まで実行可能。
↓に例がいろいろあるので参考になる。
https://developers.cloudflare.com/workers/examples/
詳細
CloudFlare Workersで簡易なサイトができるまでの流れは以下の通り。
初期設定
最初に設定ウィザードが表示されるので設定する。
無料でサブドメインを使えるらしい。
地域は「地球」。壮大な感じが味わえる。
無料を選択。
「サービスを作成」で画面上で作れちゃうのは確認。
今後のために「Wrangler CLI をセットアップ」の方でやることにする。
Wrangler CLI の設定
ドキュメントの通りに実行。
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回やってるから必要なかったかもしれない。
C:\donraku\cloudflare>wrangler login
⛅️ wrangler 2.0.5
-------------------
Attempting to login via OAuth...
Successfully logged in.
これも同様。
簡易サイトの作成
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が要るらしい。
:\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」。
フォルダとソースが生成されたのを確認。
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」でブラウザで開ける。
ソースを直すと感知してサーバが再起動する。
ブラウザをリロードすると画面も変わることを確認。
「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で公開。
ダッシュボードでみるとできている。
これだけでサイトは完成！
デフォルトでhttpsなのでたぶん安心。
name = "second-app"
compatibility_date = "2022-05-17"
main = "src/index.js"
設定ファイルに「main = ...」の設定を書けば「wrangler publish」だけで良くなる。
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);
},
};
試しに、犬の画像を取ってきて表示するように変更。
:\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
リリース。
リロードする度に犬画像が変わるようになった。
以上です。