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
140
知って得する@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
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
970
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
420
画像コンペでのベースラインモデルの育て方
tattaka
3
1.3k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
Workers を定期実行する方法は一つじゃない
rokuosan
0
140
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
1
1.1k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
260
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
JetBrainsのAI機能の紹介 #jjug
yusuke
0
190
iOS開発スターターキットの作り方
akidon0000
0
240
QA x AIエコシステム段階構築作戦
osu
0
240
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Optimizing for Happiness
mojombo
379
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Facilitating Awesome Meetings
lara
54
6.5k
Fireside Chat
paigeccino
38
3.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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