参考

環境構築

SveletKitを使ってCloudflare Workersにデプロイしてみる

Svelteの初期化

TyepScript
ESLint, Prettierを有効化

$ npm create svelte@latest svelte_starter
$ cd svelte_starter
$ yarn dev -- --open

Cloudflare Workers Adapterの追加

adapterのインストール

$ yarn add -D @sveltejs/adapter-cloudflare-workers

svelte.config.js の書き換え

import adapter from '@sveltejs/adapter-cloudflare-workers';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter()
	}
};

export default config;

app.d.ts の書き換え

declare namespace App {
	// interface Locals {}
	interface Platform {
    env: {
      COUNTER: DurableObjectNamespace;
    };
    context: {
      waitUntil(promise: Promise<any>): void;
    };
    caches: CacheStorage & { default: Cache };
  }
	// interface PrivateEnv {}
	// interface PublicEnv {}
}

Cloudflare Workersへのデプロイ

wrangler.toml の作成

name = "<your-service-name>"
account_id = "<your-account-id>"

main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"

build.command = "npm run build"

compatibility_date = "2021-11-12"
workers_dev = true

wrangler CLIの初期化

$ npm i -g wrangler
$ wrangler login

デプロイ

$ wrangler publish

Keisuke Numata 2022/08/25に更新

CI/CDの設定

GitHub Actionsを利用する
Nodeのセットアップと wrangler-action を利用

TokenはCloudflareのTokenのページから Edit Cloudflare Workers テンプレートから生成する

最終的なGitHub Actions

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'yarn'
      - run: yarn install --frozen-lockfile
      - name: Publish
        uses: cloudflare/wrangler-action@2.0.0
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}

Keisuke Numata 2022/08/29に更新

UI開発

ライブラリ

ライブラリはTailwindを利用したことがないので、TailwindベースのSveleteライブラリを利用する

設定

ライブラリの設定を組み込む

app.postcss

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

body { @apply bg-surface-100 dark:bg-surface-900 text-black dark:text-white p-4; }

layout.svelte

<script>
	import '../app.postcss';
  import '../theme.postcss';
</script>

<slot />

ログイン画面

フォームは @tailwind/form を利用する
app.postcss に設定を追加

app.postcss

...
fieldset { @apply block; }

/* Inputs */
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select {
    @apply w-full text-black bg-surface-50 border-surface-300 rounded-lg shadow-sm focus:border-accent-500 focus:ring-accent-500;
    @apply dark:text-white dark:bg-surface-600 dark:border-surface-500;
}

/* Selectable */
[type="checkbox"],
[type="radio"] {
    @apply border-surface-500 rounded text-accent-600 focus:ring-accent-500;
}

/* Invalid - https://www.bram.us/2021/01/28/form-validation-you-want-notfocusinvalid-not-invalid/ */
input:not(:focus):not(:placeholder-shown):invalid {
    @apply bg-warning-300 border-warning-500;
}

/* Placeholders */
input::-moz-placeholder, textarea::-moz-placeholder { @apply text-surface-400; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { @apply text-surface-400; }
input::placeholder, textarea::placeholder { @apply text-surface-400; }

/* Labels */
label { @apply block overflow-visible; }
label span, legend { @apply block text-surface-700 dark:text-surface-300 text-sm mb-2; }

/* Accent Color - https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
[type="range"]:not(.range-input) { @apply w-full accent-accent-500; }

このスクラップは2022/12/04にクローズされました