静的ページをサクッとdeployしたい場合
2025/09/13に実行・執筆
https://developers.cloudflare.com/workers/framework-guides/web-apps/react/
Cloudflare Pages + React + Viteでやってみることに。
pnpm create cloudflare@latest my-app --framework=reactvariantはTypeScript + SWCを選択してみる。
╰ Select a variant:
○ TypeScript
● TypeScript + SWC
○ JavaScript
○ JavaScript + SWCSWCは意識して使ったことなかったけどRust製でbuild速いらしい。シングルスレッドでBavelの20倍...ほんとか？
あとはCloudflareにアカウントがある状態でデプロイを選択するとdeploy完了。
├ Do you want to deploy your application?
│ yes deploy via `pnpm run deploy`
このままだと<app name>.<account-name>.workers.devにデプロイされるので、適宜紐づけたいドメインを紐づければ完成。
CloudflareのconsoleからWorkers & Pages > (workers名) > Settings > Domains & Routesでカスタムドメインを指定すれば良い。不要であればworkers.devの機能は無効化しておくとより良い感じ。
おまけ: tailwindcssをViteアプリに適用する
https://tailwindcss.com/docs/installation/using-vite
に従ってインストールを行う。
pnpmを利用しているのでほんの少しだけ書き換える。
pnpm add tailwindcss @tailwindcss/vitevite.config.tsを書き換える。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { cloudflare } from "@cloudflare/vite-plugin";
import tailwindcss from '@tailwindcss/vite'; // 追加
// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
cloudflare(),
tailwindcss(), // 追加
],
})tailwind.config.tsを追加する。
import type { Config } from 'tailwindcss';
export default {
content: [
'./index.html',
'./public/**/*.html',
],
theme: {
extend: {},
},
plugins: [],
} satisfies Config;style.cssを追加する
@import 'tailwindcss';使用するhtmlファイルで読み込む
<link rel="stylesheet" href="/style.css" />↑の２つはReactに則ってもう少しうまいこと設定できる方法があると思うので後々修正する。