目次
蟲神器を題材にカードゲーム作成中
友人の紹介でDAISOで販売されている面白いカードゲームとして蟲神器を知るが、Webアプリが無かったので個人範囲で開発を進めた。
テストアカウントはこちら
- test@example.com
- password
Cloudflareを使って無料公開
Cloudflare Workers 入門【はじめからそうやって教えてくれればいいのに！】
https://zenn.dev/ak/articles/a2bd28a258b615
上記の手順で作成したハローワールドのtestプロジェクトから各種パーツを持ってくることで、デプロイしました。
project配下
.wranglerフォルダまるごと
wrangler.jsoncファイル
worker-configuration.d.tsファイル
node_modules配下
wrangler
package.jsonを修正する
"scripts": {
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview",
"deploy": "wrangler deploy",
"dev": "wrangler dev",
"start": "wrangler dev",
"test": "vitest",
"cf-typegen": "wrangler types"
},
上記でいうと、wrangluer ○○あたりは全てテンプレートのpackage.jsonからコピペ
"devDependencies": {
"@eslint/js": "^9.9.1",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@types/uuid": "^10.0.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.18",
"eslint": "^9.9.1",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.11",
"globals": "^15.9.0",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"typescript": "^5.5.3",
"typescript-eslint": "^8.3.0",
"vite": "^5.4.19",
"@cloudflare/vitest-pool-workers": "^0.8.19",
"vitest": "~3.0.7",
"wrangler": "^4.14.4"
}上記も、最終行4行分がコピペで追加した部分。
Copilotとのやり取り
https://copilot.microsoft.com/shares/H96LXZdsvGfbPLmdtZCMF
wrangler.jsoncファイルを修正する
デプロイできる静的ファイルのみを格納したdistなので以下構成に変更
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "mushigingi-online",
"compatibility_date": "2025-05-14",
"assets": {
"directory": "./dist"
},
"observability": {
"enabled": true
}
}プロジェクト更新→静的ファイル作成
vite buildコマンドでアップロードする
コマンドプロンプトで以下コマンド押してデプロイ完了
npx wrangler deployビルド結果
