{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/2022-09-30_workerd-hello-world/", "result": {"data":{"site":{"siteMetadata":{"title":"365"}},"markdownRemark":{"id":"741e6238-98c6-5abb-a09f-fbf88dad3c71","excerpt":"Cloudflare Workers のランタイム workerd が出たので Hello World をやってみる https://github.com/cloudflare/workerd やってみる プロジェクトを作成して、 workerd を入れる Hello World…","html":"

Cloudflare Workers のランタイム workerd が出たので Hello World をやってみる
\nhttps://github.com/cloudflare/workerd

\n

やってみる

\n

プロジェクトを作成して、 workerd を入れる

\n
$ yarn init -y\n$ yarn add -D workerd
\n

Hello World を返すスクリプト hello.js を作成

\n
addEventListener(\"fetch\", event => {\n    event.respondWith(new Response(\"Hello World\"));\n});
\n

設定 config.capnp を作成
\n中で hello.js を指定する

\n
using Workerd = import \"/workerd/workerd.capnp\";\n\nconst config :Workerd.Config = (\n  services = [\n    (name = \"main\", worker = .mainWorker),\n  ],\n\n  sockets = [\n    # Serve HTTP on port 8080.\n    ( name = \"http\",\n      address = \"*:8080\",\n      http = (),\n      service = \"main\"\n    ),\n  ]\n);\n\nconst mainWorker :Workerd.Worker = (\n  serviceWorkerScript = embed \"src/hello.js\",\n  compatibilityDate = \"2022-09-16\",\n);
\n

動かしてみる

\n
$ yarn workerd serve config.capnp\n\n## other terminal\n$ curl -XGET http://localhost:8080/\nHello World
\n

Hono でやってみる

\n

実は先にこっちで試してた
\n流れはだいたい同じ

\n

プロジェクトを作成して、 workerd と hono を入れる

\n
$ yarn init -y\n$ yarn add -D workerd\n$ yarn add hono
\n

Hono を使った src/index.ts を作成

\n
import { Hono } from \"hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => c.text(\"Hello workerd\"));\n\nexport default app;
\n

JavaScript で動かすので esbuild を実行

\n
$ yarn esbuild --bundle --format=esm --outfile=dist/worker.mjs src/index.ts
\n

設定 config.capnp を作成

\n
using Workerd = import \"/workerd/workerd.capnp\";\n\nconst config :Workerd.Config = (\n\tservices = [\n\t\t(name = \"main\", worker = .mainWorker),\n\t],\n\n\tsockets = [\n\t\t# Serve HTTP on port 8080.\n\t\t( name = \"http\",\n\t\t\taddress = \"*:8080\",\n\t\t\thttp = (),\n\t\t\tservice = \"main\"\n\t\t),\n\t]\n);\n\nconst mainWorker :Workerd.Worker = (\n\tcompatibilityDate = \"2022-09-17\",\n\n\tmodules = [\n\t\t( name = \"dist/worker.mjs\", esModule = embed \"dist/worker.mjs\" ),\n\t]\n);
\n

動かしてみる

\n
$ yarn workerd serve config.capnp\n\n## other terminal\n$ curl -XGET http://localhost:8080/\nHello workerd
\n

参考

\n","frontmatter":{"title":"Cloudflare Workers のランタイム workerd で Hello World","date":"2022/09/30","description":"Cloudflare Workers のランタイム workerd が出たので Hello World をやってみる"}},"previous":{"fields":{"slug":"/2022-09-16_lefthook_run/"},"frontmatter":{"title":"Git hooks の Lefthook を使ってみる"}},"next":{"fields":{"slug":"/2022-10-09_chrome-bookmark-backup/"},"frontmatter":{"title":"macOS Google Chrome ブックマークと Session Buddy 拡張機能の保存場所"}}},"pageContext":{"id":"741e6238-98c6-5abb-a09f-fbf88dad3c71","previousPostId":"6728a4a8-8572-5b36-820d-f9ee527fd5ca","nextPostId":"47cc0665-2ef6-5ddf-a7f2-31b89dee542a"}}, "staticQueryHashes": ["2841359383","3257411868"]}