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
170
知って得する@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.7k
Cloudflare Workersと状態管理
chimame
4
1.8k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
650
Other Decks in Programming
See All in Programming
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
6.5k
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
3
710
チームのテスト力を鍛える
goyoki
3
1.1k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
6.5k
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
5
1.3k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
190
Introducing FrankenPHP gRPC
dunglas
2
630
Learn CPU architecture with Assembly
akkeylab
1
130
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
580
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
800
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.6k
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
2
180
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
4 Signs Your Business is Dying
shpigford
184
22k
Writing Fast Ruby
sferik
628
62k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
It's Worth the Effort
3n
187
28k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
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