Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
知って得する@cloudflare_vite-pluginのあれこれ
Search
chimame
July 17, 2025
Programming
1
190
知って得する@cloudflare_vite-pluginのあれこれ
Cloudflare Workers Tech Talks in Kyoto #1
chimame
July 17, 2025
Tweet
Share
More Decks by chimame
See All by chimame
Boost Your Web Performance with Hyperdrive
chimame
1
320
RemixでVersion skewに立ち向かう
chimame
2
1.2k
私がエッジを使う理由
chimame
10
4.1k
GraphQL Server on Edge after that
chimame
1
1.6k
Accelerating App Dev with Cloudflare Workers
chimame
1
450
GraphQL Server on Edge
chimame
12
6.1k
エッジで輝くフロントエンド
chimame
11
6.8k
Cloudflare Workersと状態管理
chimame
4
1.8k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
660
Other Decks in Programming
See All in Programming
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.1k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
CSC305 Lecture 02
javiergs
PRO
1
260
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
920
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
930
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
Code Review Best Practice
trishagee
72
19k
Agile that works and the tools we love
rasmusluckow
331
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Language of Interfaces
destraynor
162
25k
A Tale of Four Properties
chriscoyier
160
23k
How to Ace a Technical Interview
jacobian
280
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Transcript
知って得する @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