CloudflareWorkersに入門してみる

参考

公式のチュートリアルを読みながら、Workersに入門してみます。

プロジェクトを作成する。

ターミナルで下記を叩きます。

$ npm create cloudflare@latest

アプリケーションを作成する場所を指定して、新しいWorkerディレクトリに名前をつけます。

Create an application with Cloudflare Step 1 of 3
│ 
├ In which directory do you want to create your application?
│ dir ./test
│

作成するアプリケーションの種類をHello World scriptを選択します。

├ What type of application do you want to create?
│ type "Hello World" Worker

TypeScriptを使うかどうかを選択します。

├ Do you want to use TypeScript?
│ yes typescript

├ Do you want to use git for version control?
│ yes git

Cloudflareにデプロイするかどうかを尋ねられます。
ログインしていない場合、ブラウザでCloudflareが開くのでログインします。

╭ Deploy with Cloudflare Step 3 of 3
│ 
├ Do you want to deploy your application?
│ yes deploy via `npm run deploy`
├ Deploying your application 
│ deployed via `npm run deploy`
│ 
├  SUCCESS  View your deployed application at https://プロダクト名.アカウント名.workers.dev
│ 
│ Navigate to the new directory cd dlscraping
│ Run the development server npm run start
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/workers
│ Stuck? Join us at https://discord.gg/cloudflaredev
│ 

無事プロジェクトディレクトリが作成されると、下記が生成されます。

.
├── node_modules 
├── package-lock.json
├── package.json
├── src
├── tsconfig.json
└── wrangler.toml

##　ローカルサーバーの起動

下記のコマンドを叩くことで、開発するためのローカルサーバーを起動します。
開発中にローカルでWorkerをテストすることができます。

$ npx wrangler dev

 ⛅️ wrangler 3.21.0
-------------------
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:8787

表示されている、http://localhost:8787 にブラウザでアクセスしてみましょう。
HelloWorldが表示されているはずです。

コードを書く。

src/index.js

src/index.js

export default {
	async fetch(request, env, ctx) {
		return new Response('Hello World!');
	},
};

export default

export default は、JavaScriptモジュールを定義するために必要なJavaScriptの構文です。あなたのWorkerには、Workerが処理するべきイベントに対応するプロパティを持つオブジェクトのデフォルトエクスポートが必要です。

async fetch(request)

このイベントハンドラは、Workerがfetchイベントを受け取ったときに呼び出されます。
エクスポートされたオブジェクトに追加のイベントハンドラを定義して、異なるタイプのイベントに対応できます。
例えば、スケジュールされたイベントに対応するために async scheduled(event) {} などを追加もできます。

request, env, context

fetchイベントハンドラには常に3つのパラメータが渡されます：request、env、context。

Responseオブジェクト

Workersランタイムは、fetchイベントがResponseオブジェクトを返すことを期待しています。
この例では、文字列 "Hello World!" を含む新しいResponseを返します。