UGREEN USB Type Cケーブル PD対応 100W/5A 超急速充電 USB C to USB C ナイロン編み 断線防止 iPhone 15/16/iPad/MacBook Pro/Galaxy S24/Matebook/iPad/Xperia等USB-C各種対応(1m, ブラック)
￥1,199 (2025年5月3日 13:12 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
Logicool G ゲーミングヘッドセット G335 ゲーミング ヘッドセット G335BK 超軽量 222g 3.5mm 有線 立体音響 ステレオ 2.1ch フリップミュート マイク付き PS5 PS4 PC Switch Xbox スマホ 対応 ヘッドホン ヘッドフォン ブラック 国内正規品
￥8,060 (2025年5月3日 13:12 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
SPA アプリケーションをデプロイするのにずっと、Cloudflare Pages を使っていましたが、Cloudflare 公式のドキュメントにも 「新しいプロジェクトにはCloudflare PagesよりもCloudflare Workersの使用を推奨しています。」という記述が追加されたので、Cloudflare Workers に移行することにしました。
移行ドキュメントがかなりわかりやすいのであまり困ることはないかもしれませんが、新たにプロジェクトを作成してデプロイする術を残しておきます。
よく利用されるフレームワークはフレームワークのガイドに書かれていたりしますのでそちらをご確認ください！
手順
サンプル的なプロジェクトを作成してありますので、コードをご覧になりたいかたはこちらからどうぞ！
1. SPA アプリケーションの作成
Vite + React の SPA アプリケーションを作成します。
Terminal
$ pnpm create vite@latest vite-spa-workers-deploy-example
◇ Select a framework:
│ React
│
◇ Select a variant:
│ TypeScript + SWC
│
◇ Scaffolding project in /home/Developer/nekoyasan/vite-spa-workers-deploy-example...
│
└ Done. Now run:
cd vite-spa-workers-deploy-example
pnpm install
pnpm run dev
$ cd vite-spa-workers-deploy-example
$ pnpm install
$ pnpm run dev
こんなふうないつも通りの画面がみえればOKです
2. Project への Wrangler のセットアップ
Wrangler CLI をインストール
Terminal
$ pnpm add -D wrangler
Wrangler の設定ファイルを作成します
一気に設定ファイルつくるような便利なコマンドはないのでサクッとファイルつくります
Terminal
$ touch wrangler.jsonc
wrangler.jsonc の中身は以下のようにします
wrangler.jsonc
{
"name": "vite-spa-workers-deploy-example",
"compatibility_date": "2025-04-01",
"assets": {
"directory": "./dist/"
}
}
assets.directory には、Vite でビルドしたファイルの出力先を指定します。
この assets に指定したディレクトリは Static Assets として Cloudflare Workers にデプロイされ、Workers の起動・課金対象になりません。
package.json にスクリプトを追加
あわせて便利なので package.json にスクリプトを追加しておきましょう
package.json
diff --git a/package.json b/package.json
index b38dc6c..cf59680 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
- "preview": "vite preview"
+ "preview": "wrangler dev",
+ "deploy": "pnpm run build && wrangler deploy"
},
お試しで preview を確認します
Terminal
$ pnpm run build
> vite-spa-workers-deploy-example@0.0.0 build /home/Developer/nekoyasan/vite-spa-workers-deploy-example
> tsc -b && vite build
vite v6.3.4 building for production...
✓ 32 modules transformed.
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB
dist/assets/index-D8b4DHJx.css 1.39 kB │ gzip: 0.71 kB
dist/assets/index-9_sxcfan.js 188.05 kB │ gzip: 59.21 kB
✓ built in 576ms
$ pnpm run preview
> vite-spa-workers-deploy-example@0.0.0 preview /home/Developer/nekoyasan/vite-spa-workers-deploy-example
> wrangler dev
⛅️ wrangler 4.13.2
-------------------
No bindings found.
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:8787
アクセスすると普通に見れてますし、Counterも動きますね
3. Workers へのデプロイ
Wrangler に未ログインの場合は wrangler login でログインしておいてください
Terminal
$ wrangler deploy
> vite-spa-workers-deploy-example@0.0.0 deploy /home/Developer/nekoyasan/vite-spa-workers-deploy-example
> pnpm run build && wrangler deploy
> vite-spa-workers-deploy-example@0.0.0 build /homeDeveloper/nekoyasan/vite-spa-workers-deploy-example
> tsc -b && vite build
vite v6.3.4 building for production...
✓ 32 modules transformed.
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB
dist/assets/index-D8b4DHJx.css 1.39 kB │ gzip: 0.71 kB
dist/assets/index-9_sxcfan.js 188.05 kB │ gzip: 59.21 kB
✓ built in 576ms
⛅️ wrangler 4.13.2
-------------------
🌀 Building list of assets...
✨ Read 6 files from the assets directory /home/Developer/nekoyasan/vite-spa-workers-deploy-example/dist
🌀 Starting asset upload...
🌀 Found 5 new or modified static assets to upload. Proceeding with upload...
+ /index.html
+ /assets/react-CHdo91hT.svg
+ /assets/index-D8b4DHJx.css
+ /assets/index-9_sxcfan.js
+ /vite.svg
Uploaded 2 of 5 assets
Uploaded 3 of 5 assets
Uploaded 5 of 5 assets
✨ Success! Uploaded 5 files (4.43 sec)
Total Upload: 0.34 KiB / gzip: 0.24 KiB
No bindings found.
Uploaded vite-spa-workers-deploy-example (10.20 sec)
Deployed vite-spa-workers-deploy-example triggers (0.68 sec)
https://vite-spa-workers-deploy-example.nekoyasan.workers.dev
Current Version ID: 6ed75fab-6fef-4322-91fc-e6cef5d65e0b
これでデプロイは完了です！なんて簡単なんでしょう…
404エラー や trailing slashes に関しては各種フレームワーク・ルーティングライブラリによっていろいろと変わってくると思いますので、以下のドキュメントをご覧いただくのが良いと思います！
（SPAであれば、not_found_handling = "single-page-application"で基本的には良いはずですが…404.htmlをつくる場合は "404-page" です）
おまけ
Pages Functionsっぽいことをする
Advanced な _worker.js をつくっていた人向けですが、Workersになったことで自由度が広がり直感的になりました。
Worker の TypeScript ファイルを作成する
worker/index.ts
import { WorkerEntrypoint } from "cloudflare:workers";
export default class extends WorkerEntrypoint {
async fetch(request: Request) {
if(request.method !== "GET") {
return new Response("Method Not Allowed", {
status: 405,
statusText: "Not Allowed",
})
}
const url = new URL(request.url);
if (url.pathname === "/api/now") {
return new Response(new Date().toISOString());
}
return new Response("Not Found", {
status: 404,
statusText: "Not Found"
})
}
}
wrangler.json を設定する
wrangler.json
diff --git a/wrangler.jsonc b/wrangler.jsonc
index a7ea0e1..30bd04a 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -1,6 +1,7 @@
{
"name": "vite-spa-workers-deploy-example",
"compatibility_date": "2025-04-01",
+ "main": "./worker/index.ts",
"assets": {
"directory": "./dist/"
}
これでStatic でヒットしないときはWorkerが使われるようになりました。
せっかくなのでReact 側も書き換えたものをDeployしてあります
おわり
今回は紹介しませんでしたがPages同様にCI/CDを設定することも出来ますし、PullRequestのPreviewも利用できます
また、WorkersなのでBinding経由でKVやDO、D1、R2なども利用できるので幅も大きく広がります
ぜひこれを機に Cloudflare Workers を使ってみてはいかがでしょうか！
Views: 2
【整備済み品】 【Microsoft Office2019＆Win11搭載】超軽量Panasonic Let's note CF-SZ6■第7世代 Intel Core i5-7200U＠2.5GHz/メモリ8GB/SSD 1TB/12.1インチ(FHD) (SSD1TB) (整備済み品)
￥16,100 (2025年5月3日 13:14 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
タブレット スタンド アルミ ホルダー 角度調整可能 Lomicall stand : 卓上 縦置き スタンド タブレット 置き台 デスク台 立てる 設置 aluminium テレワーク 在宅 ワーク Zoom 会議 タブレット対応(4~13'') ミニ エア プロ ipad 10 第十世代 ipad9 第九世代 ipad Air mini Pro第六世代 S7 S8 Note 対応 - シルバー
￥1,759 (2025年5月3日 13:07 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
