wrangler

cloudflare workersをローカル環境でテストできるcliです。
c3と略される様。
wranglerを使うことで毎回デプロイして確認を取らなくても大丈夫になる。

wranglerが使えるまで

1. 2.wranglerをグローバルにインストールします。

npm install -g wrangler

2. 2.cloudflareにログインする。

ブラウザーが開くのでログイン承認をします。

wrangler login

3. 3.プロジェクトを作成します。

wrangler init #ではなく。非推奨になっている。
#こっち

npm create cloudflare@latest

初期設定時に聞かれること

• 作成するフォルダーは？
• テンプレート使用する？
• Typescript使用する？
• git管理しますか？
• デプロイしますか？

D:\tmp\workerstest>npm create cloudflare@latest
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

using create-cloudflare version 2.13.0

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./workertest
│
├ What type of application do you want to create?
│ type "Hello World" Worker
│
├ Do you want to use TypeScript?
│ yes typescript
│
├ Copying template files
│ files copied to project directory
│
├ Updating name in `package.json`
│ updated `package.json`
│
├ Installing dependencies
│ installed via `npm install`
│
╰ Application created

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing @cloudflare/workers-types
│ installed via npm
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Retrieving current workerd compatibility date
│ compatibility date 2024-02-23
│
├ Do you want to use git for version control?
│ yes git
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run deploy
│
│ Navigate to the new directory cd workertest
│ 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
│
╰ See you again soon!

4. 4.フォルダーを移動してローカルでテストをする

cd workertest
#起動は以下なんでも可
npm run dev
npm run start
wrangler dev

起動すると次のような画面になります。

この画面でbを押すとブラウザーを開けます。

デプロイする。

npm run deploy

D:\tmp\workerstest\workertest>npm run deploy
> [email protected] deploy
> wrangler deploy

 ⛅️ wrangler 3.30.0
-------------------
Total Upload: 0.19 KiB / gzip: 0.16 KiB
Uploaded workertest (1.46 sec)
Published workertest (3.67 sec)
  https://workertest.accountname.workers.dev #<-アクセス先
Current Deployment ID: 111111-11111111-111111-1111

まとめ

公式のサンプルも充実しているので、cloudflare workersの開発がだいぶ楽になりました。
個人使用であれば、workersを使ってコストをかけずデーターベース(d1)、ストレージ(r2)が使える。かなり太っ腹。
ただし、workersは普通のnode.jsではないので、できることが限られてくる。また、workdersの使い方を覚えても汎用性は...あまりないのかな？