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
160
知って得する@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
310
RemixでVersion skewに立ち向かう
chimame
2
1.2k
私がエッジを使う理由
chimame
10
4.1k
GraphQL Server on Edge after that
chimame
1
1.5k
Accelerating App Dev with Cloudflare Workers
chimame
1
450
GraphQL Server on Edge
chimame
12
6k
エッジで輝くフロントエンド
chimame
11
6.7k
Cloudflare Workersと状態管理
chimame
4
1.8k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
650
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
140
Ruby Parser progress report 2025
yui_knk
1
140
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
Understanding Ruby Grammar Through Conflicts
yui_knk
1
140
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
RDoc meets YARD
okuramasafumi
3
140
AIコーディングAgentとの向き合い方
eycjur
0
240
パスタの技術
yusukebe
1
490
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
A Gopher's Guide to Vibe Coding
danicat
0
180
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
740
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Documentation Writing (for coders)
carmenintech
73
5k
Building Adaptive Systems
keathley
43
2.7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Site-Speed That Sticks
csswizardry
10
790
Writing Fast Ruby
sferik
628
62k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Scaling GitHub
holman
462
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Visualization
eitanlees
147
16k
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