知って得する@cloudflare_vite-pluginのあれこれ

Cloudflare Workers Tech Talks in Kyoto #1

1. 知って得する @cloudflare/vite-pluginのあれこれ Cloudflare Workers Tech Talks in Kyoto #1 2025.07.18
2. Index 1. @cloudflare/vite-pluginの役割 2. Viteのセットアップ 3. @cloudflare/vite-pluginの注意点 4. まとめ
3. @cloudflare/vite-pluginの役割 Vite上でCloudflare Workersランタイムが動作するプラグインで @cloudflare/vite-pluginの1.0が2025年4月8日に公開 https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin/
4. @cloudflare/vite-pluginの役割 特徴 ✓ Vite Environment APIを使用してWorkersランタイムでの実行を行う ✓ Cloudflare Workersで使用できるAPIなどを直接呼び出せるようにする ✓ Cloudflare WorkersのビルドをViteにて行えるようにする @cloudflare/vite-pluginの大きな目的としてはViteを使用す る環境下で、実行コードをWorkerdで実行して開発やデプロ イの信頼性を上げることが目的です。 https://developers.cloudflare.com/workers/vite-plugin/
5. Viteのセットアップ @cloudflare/vite-pluginの導入自体は非常に簡単。 npm i -D vite @cloudflare/vite-plugin 1. Viteおよび@cloudflare/vite-pluginを入れる （余談だが、Vite 7.0も既にサポートされている）
6. Viteのセットアップ @cloudflare/vite-pluginの導入自体は非常に簡単。 2. vite.config.tsのpluginsに@cloudflare/vite-pluginを追加する import { defineConfig } from "vite"; import { cloudflare } from "@cloudflare/vite-plugin"; export default defineConfig({ plugins: [cloudflare()], });
7. Viteのセットアップ @cloudflare/vite-pluginの導入自体は非常に簡単。 3. viteを使用するようにpackage.jsonを修正する { "type": "module", "scripts": { "deploy": "npm run build && wrangler deploy" , "dev": "vite dev", "build": "vite build", ... }, } buildとdeployを一緒に実行するのがとても大事
8. Vite setup Complate
9. もう少し注意すること 🚨Caution🚨
10. @cloudflare/vite-pluginの注意点 デプロイの設定を分けるためにwrangler.jsoncにコレ書いてますか？ "env": { "staging": { "vars": { "MESSAGE": "Staging Message" } }, "production": { "vars": { "MESSAGE": "Production Message" } } } wrangler deploy --env stagingで stagingの設定でデプロイする
11. @cloudflare/vite-pluginの注意点 @cloudflare/vite-pluginを使うとvite buildに依存する場合は--envオプションは 使用出来ない 。wrangler.jsoncのenvを使用するには CLOUDFLARE_ENV という環境変数に使用するenvを指定してビルドおよびデプロイを行う必要がある。 # 下記が npx wrangler deploy --env staging と同等 CLOUDFLARE_ENV=staging npx vite build && \ npx wrangler deploy 少しややこしいが vite buildに頼らないで wrangler deployだけで完結する場合は --envオプションは使用できる場合もある
12. @cloudflare/vite-pluginの注意点 同じくvite buildに依存する場合は--configオプションも使用出来ない。 # 環境変数を展開したデプロイ用のファイルを作成 envsubst < ./wrangler.jsonc > ./wrangler.deploy.jsonc wrangler deploy --config ./wrangler.deploy.jsonc # npx wrangler deploy --env staging --config ./wrangler.deploy.jsonc envsubst < ./wrangler.jsonc > ./wrangler.deploy.jsonc cp ./wrangler.deploy.jsonc ./wrangler.jsonc CLOUDFLARE_ENV=staging npx vite build && \ npx wrangler deploy 詳しい理由は割愛するが、 build時にdeployするwrangler.jsonが生成され、 それを使用してデプロイしようとするため
13. まとめ 〼 Cloudflare WorkersでもViteを使用しての開発や ビルドは可能（React Router v7などは移行すると良い） 〼 buildやdeployは今までと異なる部分があるので 移行するならとりあえずデプロイまで確認すること ◦ 今のうちに慣れておくとよい （まずはやってみる精神大事）
14. Thanks!! job: Webエンジニア field: Cloudflare, GCP, AWS, Ruby, Node.js, TypeScript, React, Next.js, Remix, Docker etc company: Goens株式会社( https://about.goen-s.com ) x(twitter): @chimame_rt GitHub: chimame Name : chimame/rito