Hero img
cloudflareのローカルテストwranglerを使う

cloudflareのworkersのローカル環境でのテストをwranglerで実行する。

miniflareが統一されwranglerでcloudflare workersをローカル環境でテストできるのでwindowsでテストしてみる。


目次

  • wrangler
  • wranglerが使えるまで
  • デプロイする。
  • まとめ

wrangler

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

wranglerが使えるまで

  1. 2.wranglerをグローバルにインストールします。
npm install -g wrangler
  1. 2.cloudflareにログインする。

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

wrangler login
  1. 3.プロジェクトを作成します。
wrangler init #ではなく。非推奨になっている。
#こっち
npm create cloudflare@latest

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

  • 作成するフォルダーは?
  • テンプレート使用する?
  • Typescript使用する?
  • git管理しますか?
  • デプロイしますか?
こんな感じ
D:\tmp\workerstest>npm create cloudflare@latest
Need to install the following packages:
  create-cloudflare@2.13.0
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!

  1. 4.フォルダーを移動してローカルでテストをする
cd workertest
#起動は以下なんでも可
npm run dev
npm run start
wrangler dev

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

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

wrangler-open-browser

デプロイする。

デプロイコマンド
npm run deploy
デプロイ例
D:\tmp\workerstest\workertest>npm run deploy
> workertest@0.0.0 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の使い方を覚えても汎用性は...あまりないのかな?

関連記事

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください