Zenn
Closed6

SvelteKit + Cloudflare Workers メモ

Svelte
voluntasvoluntas

結論

Remix v2 を使っていくことにした

モチベーション

  • Remix が思った以上に Cloudflare Workers 対応を頑張ってくれない
  • Remix が Shopify に買収されてどこに向かうか気になってる
  • React 覚えたくない
  • Facebook を信じてないので React を信じられない
  • SvelteKit が 1.0 になった

期待する内容

  • Cloudflare Workers との連携
    • DO や D1 を気軽に利用できる
  • Cloudflare KV や DO を利用したセッション管理向けライブラリ
    • なければ作る
  • 部分レンダリング
voluntasvoluntas

資料

公式

voluntasvoluntas

導入

$ npm create svelte@latest my-app
  • npm install とかは省略
  • デフォルトの .prettierrc が思った以上に癖が強かったので普段使ってるのに置き換えた

Cloudflare Workers アダプター

$ npm i -D @sveltejs/adapter-cloudflare-workers
  • サクッと入る

VScode

wrangler.toml

main = "./.cloudflare/worker.js"

[site]
bucket = "./.cloudflare/public"

[build]
command = "npm run build"

svelte.config.js

Cloudflare Workers を使うように指定する

// ここを auto から変更するだけで良い
import adapter from '@sveltejs/adapter-cloudflare-workers';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // デフォルトは wrangler.toml を見るので変更したい場合はこれ
    // adapter: adapter({ config: '<your-wrangler-name>.toml' })
    adapter: adapter()
  }
};

export default config;

src.app.d.ts

  • /// <reference types="@sveltejs/kit" /> を追加
  • /// <reference types="@sveltejs/adapter-cloudflare-workers" /> を追加
    • ちゃんと最新版に追従してる、大変良い
  • Platform のところに Cloudflare Workers を指定できる、大変良い
/// <reference types="@sveltejs/kit" />
/// <reference types="@sveltejs/adapter-cloudflare-workers" />

declare namespace App {
  // interface Error {}
  // interface Locals {}
  // interface PageData {}
  interface Platform {
    env: {
      YOUR_KV_NAMESPACE: KVNamespace
      YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace
    }
  }
}

呼び出す時は以下のように書ける。凄くきれいでよい。これが欲しかった。

export async function actions({ request, platform }) {
  const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}
voluntasvoluntas

npm run dev

$ npm run dev

> my-app@0.0.1 dev
> vite dev



  VITE v4.0.1  ready in 410 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

npm run build

$ npm run build

> my-app@0.0.1 build
> vite build


vite v4.0.1 building for production...
✓ 38 modules transformed.
10:44:09 AM [vite-plugin-svelte] dom compile done.
package      	files	  time	   avg
my-app       	    2	32.6ms	16.3ms
@sveltejs/kit	    2	19.9ms	 9.9ms

vite v4.0.1 building SSR bundle for production...
✓ 46 modules transformed.
10:44:09 AM [vite-plugin-svelte] ssr compile done.
package      	files	 time	  avg
my-app       	    2	5.0ms	2.5ms
@sveltejs/kit	    2	2.8ms	1.4ms
Generated an empty chunk: "hooks".
.svelte-kit/output/server/vite-manifest.json                   1.13 kB
.svelte-kit/output/server/chunks/hooks.js                      0.00 kB
.svelte-kit/output/server/entries/fallbacks/layout.svelte.js   0.24 kB
.svelte-kit/output/server/entries/pages/_page.svelte.js        0.32 kB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js    0.79 kB
.svelte-kit/output/server/chunks/index.js                      3.22 kB
.svelte-kit/output/server/index.js                            78.71 kB

Run npm run preview to preview your production build locally.
.svelte-kit/output/client/_app/version.json                                          0.03 kB
.svelte-kit/output/client/vite-manifest.json                                         2.27 kB
.svelte-kit/output/client/_app/immutable/chunks/1-eb604b7f.js                        0.09 kB │ gzip:  0.10 kB
.svelte-kit/output/client/_app/immutable/chunks/0-04ae84d6.js                        0.09 kB │ gzip:  0.10 kB
.svelte-kit/output/client/_app/immutable/chunks/2-ff982b2b.js                        0.10 kB │ gzip:  0.10 kB
.svelte-kit/output/client/_app/immutable/components/layout.svelte-cd8f1078.js        0.54 kB │ gzip:  0.36 kB
.svelte-kit/output/client/_app/immutable/components/pages/_page.svelte-84041f18.js   0.83 kB │ gzip:  0.48 kB
.svelte-kit/output/client/_app/immutable/components/error.svelte-03b3ffcb.js         0.98 kB │ gzip:  0.57 kB
.svelte-kit/output/client/_app/immutable/chunks/singletons-c1916556.js               2.58 kB │ gzip:  1.34 kB
.svelte-kit/output/client/_app/immutable/chunks/index-7f3551f2.js                    6.87 kB │ gzip:  2.79 kB
.svelte-kit/output/client/_app/immutable/start-49f8c643.js                          26.42 kB │ gzip: 10.34 kB

> Using @sveltejs/adapter-cloudflare-workers
  ✔ done

npm run test

  • npx playwright install の実行が必要
$ npm run test

> my-app@0.0.1 test
> playwright test


Running 1 test using 1 worker

[WebServer]
[WebServer]
[WebServer] Generated an empty chunk: "hooks".
[WebServer]
  ✓  1 test.ts:3:1 › index page has expected h1 (200ms)


  1 passed (5s)
このスクラップは2023/05/03にクローズされました