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

知って得する @cloudflare/vite-pluginのあれこれ Cloudflare Workers Tech Talks in Kyoto #1 2025.07.18

Index 1. @cloudflare/vite-pluginの役割 2. Viteのセットアップ 3. @cloudflare/vite-pluginの注意点 4. まとめ

@cloudflare/vite-pluginの役割 Vite上でCloudflare Workersランタイムが動作するプラグインで @cloudflare/vite-pluginの1.0が2025年4月8日に公開 https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin/

@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/

Viteのセットアップ @cloudflare/vite-pluginの導入自体は非常に簡単。 npm i -D vite @cloudflare/vite-plugin 1. Viteおよび@cloudflare/vite-pluginを入れる（余談だが、Vite
7.0も既にサポートされている）

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()], });

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を一緒に実行するのがとても大事

Vite setup Complate

もう少し注意すること 🚨Caution🚨

@cloudflare/vite-pluginの注意点デプロイの設定を分けるためにwrangler.jsoncにコレ書いてますか？ "env": { "staging": { "vars": { "MESSAGE": "Staging
Message" } }, "production": { "vars": { "MESSAGE": "Production Message" } } } wrangler deploy --env stagingで stagingの設定でデプロイする

@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オプションは使用できる場合もある

@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が生成され、それを使用してデプロイしようとするため

まとめ〼 Cloudflare WorkersでもViteを使用しての開発やビルドは可能（React Router v7などは移行すると良い）〼 buildやdeployは今までと異なる部分があるので移行するならとりあえずデプロイまで確認すること
◦ 今のうちに慣れておくとよい（まずはやってみる精神大事）

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

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

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

chimame

More Decks by chimame

Other Decks in Programming

Featured

Transcript