Open9
Cloudflare Workersを使う with Hono
Cloudflare Workersを使ってみたい。
参考:「入門Cloudflare Workers」
npm install -g wrangler
npx wrangler login
⛅️ wrangler 3.1.0
------------------
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth...
Successfully logged in.
✔ Would you like to help improve Wrangler by sending usage metrics to Cloudflare? … no
Your choice has been saved in the following file: ../../../../Library/Preferences/.wrangler/metrics.json.
You can override the user level setting for a project in `wrangler.toml`:
- to disable sending metrics for a project: `send_metrics = false`
- to enable sending metrics for a project: `send_metrics = true`
npm create cloudflare@2
using create-cloudflare version 2.0.9
╭ Create an application with Cloudflare Step 1 of 3
│
├ Where do you want to create your application?
│ dir cold-violet-5111
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework Hono
│
╰ Continue with Hono via `npx create-hono@0.2.0 cold-violet-5111 --template cloudflare-pages`
create-hono version 0.1.1
cloned honojs/starter#main to /Users/kentaro/src/github.com/kentaro/cold-violet-5111
✔ Copied project files
╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `npm install wrangler --save-dev`
│
├ Adding command scripts for development and deployment
│ added commands to `package.json`
│
├ Do you want to use git?
│ git yes
│
├ Committing new files
│ git initial commit
│
╰ Application configured
╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ yes deploying via `npm run deploy`
│
├ Logging into Cloudflare checking authentication status
│ logged in
│
├ Selecting Cloudflare account retrieving accounts
│ account Kentarok@gmail.com's Account
│
├ Creating Pages project
│ created via `npx wrangler pages project create cold-violet-5111 --production-branch main `
│
├ Deploying your application
│ deployed via `npm run deploy`
│
├ SUCCESS View your deployed application at https://cold-violet-5111.pages.dev
│
│ Run the development server npm run dev
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/pages
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
├ Waiting for DNS to propagate
│ DNS propagation complete.
│
├ Waiting for deployment to become available
│ deployment is ready at: https://cold-violet-5111.pages.dev
│
├ Opening browser
│
╰ See you again soon!
ls -la cold-violet-5111/
total 144
drwxrwxr-x 10 kentaro staff 320 Jun 21 00:50 ./
drwxr-xr-x 69 kentaro staff 2208 Jun 21 00:49 ../
drwxr-xr-x 12 kentaro staff 384 Jun 21 00:56 .git/
-rw-r--r-- 1 kentaro staff 91 Jun 13 22:40 README.md
drwxrwxr-x 3 kentaro staff 96 Jun 21 00:49 functions/
drwxr-xr-x 109 kentaro staff 3488 Jun 21 00:50 node_modules/
-rw-r--r-- 1 kentaro staff 57586 Jun 21 00:50 package-lock.json
-rw-r--r-- 1 kentaro staff 290 Jun 21 00:50 package.json
drwxrwxr-x 3 kentaro staff 96 Jun 21 00:49 pages/
-rw-r--r-- 1 kentaro staff 276 Jun 13 22:40 tsconfig.json
functions/api/[[route]].ts
import { Hono } from 'hono'
import { handle } from 'hono/cloudflare-pages'
const app = new Hono().basePath('/api')
app.get('/hello', (c) => {
return c.json({
message: 'Hello from Hono!',
})
})
export const onRequest = handle(app)
package.json
"scripts": {
"dev": "wrangler pages dev --compatibility-date=2023-01-01 ./pages",
"deploy": "wrangler pages deploy ./pages"
}
npm run dev
> dev
> wrangler pages dev --compatibility-date=2023-01-01 ./pages
🚧 'wrangler pages <command>' is a beta command. Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose
Compiling worker to "/var/folders/fj/hwdkxnqj3bscsbc1cj1l53km0000gn/T/functionsWorker-0.3396365282424909.mjs"...
✨ Compiled Worker successfully
⛅️ wrangler 3.1.0
------------------
wrangler dev now uses local mode by default, powered by 🔥 Miniflare and 👷 workerd.
To run an edge preview session for your Worker, use wrangler dev --remote
⎔ Starting local server...
[mf:inf] Ready on http://127.0.0.1:8788/
diff --git a/functions/api/[[route]].ts b/functions/api/[[route]].ts
index a05e9fb..e826374 100644
--- a/functions/api/[[route]].ts
+++ b/functions/api/[[route]].ts
@@ -5,7 +5,7 @@ const app = new Hono().basePath('/api')
app.get('/hello', (c) => {
return c.json({
- message: 'Hello from Hono!',
+ message: 'Hono is SUPER!',
})
})
npm run deploy
> deploy
> wrangler pages deploy ./pages
▲ [WARNING] Warning: Your working directory is a git repo and has uncommitted changes
To silence this warning, pass in --commit-dirty=true
✨ Compiled Worker successfully
🌍 Uploading... (1/1)
✨ Success! Uploaded 0 files (1 already uploaded) (0.77 sec)
✨ Uploading Functions bundle
✨ Deployment complete! Take a peek over at https://3aa6e04a.cold-violet-5111.pages.dev
curl https://3aa6e04a.cold-violet-5111.pages.dev/api/hello
{"message":"Hono is SUPER!"}
curl https://cold-violet-5111.pages.dev/api/hello
{"message":"Hono is SUPER!"}
3aa6e04a
が付いてるのとついてないのとの違いは?→デプロイごとに別のURLが発行されるようだ。
以下は、最初のデプロイ。元のレスポンスが表示されている。
curl https://9db1d30b.cold-violet-5111.pages.dev/api/hello
{"message":"Hello from Hono!"}