Cloudflare Workersを使う with Hono

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

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)

"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!"}

curl https://9db1d30b.cold-violet-5111.pages.dev/api/hello
{"message":"Hello from Hono!"}