##2024/9/19 20:47:53:
cloudflare 如何创建一个 react+vite 的前端项目，并发布到 cloudflare
创建一个 worker 或者 page 项目
使用 cloudflare@lates 创建一个 worker 或者 page 项目， 过程中会安装cloudflare@lates，如果已经安装了就会省略
npm create cloudflare@lates
创建过程
qy@QY [20:42:59] [~/Documents/git_rep/cloudflare]
-> % npm create cloudflare@latest
npm http fetch GET 200 https://registry.npmmirror.com/create-cloudflare 16ms (cache stale)
> npx
> create-cloudflare
╭──────────────────────────────────────────────────────────────╮
│ 👋 Welcome to create-cloudflare v2.27.2! │
│ 🧡 Let's get started. │
╰──────────────────────────────────────────────────────────────╯
╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./broad-paper-dcef
│
├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework React
│
├ Select a variant:
│ variant TypeScript
│
├ Continue with React via `npx create-vite@5.2.3 broad-paper-dcef --template react-ts`
│
npm http fetch GET 200 https://registry.npmmirror.com/create-vite 13ms (cache stale)
Scaffolding project in /Users/qy/Documents/git_rep/cloudflare/broad-paper-dcef...
Done. Now run:
cd broad-paper-dcef
npm install
npm run dev
├ Installing dependencies
│ installed via `npm install`
│
╰ Application created
╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `npm install wrangler --save-dev`
│
├ Installing @cloudflare/workers-types
│ installed via npm
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Updating `package.json` scripts
│ updated `package.json`
│
├ Do you want to use git for version control?
│ no git
│
╰ Application configured
╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
╰ Done
╭──────────────────────────────────────────────────────────────╮
│ 🎉 SUCCESS Application created successfully! │
│ │
│ 💻 Continue Developing │
│ Change directories: cd broad-paper-dcef │
│ Start dev server: npm run dev │
│ Deploy: npm run deploy │
│ │
│ 📖 Explore Documentation │
│ https://developers.cloudflare.com/pages │
│ │
│ 💬 Join our Community │
│ https://discord.cloudflare.com │
╰──────────────────────────────────────────────────────────────╯
本地调试
cd broad-paper-dcef
npm run dev
本地构建
npm run build
构建的内容在 dist 目录中
本地启动静态服务器
npx http-server dist
本地启动静态服务器后终端的输出
qy@QY [20:50:16] [~/Documents/git_rep/cloudflare/broad-paper-dcef]
-> % npx http-server dist
Starting up http-server, serving dist
http-server version: 14.1.1
http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none
Available on:
http://127.0.0.1:8080
http://172.20.10.2:8080
http://169.254.14.110:8080
Hit CTRL-C to stop the server
部署到 cloudflare
先登录 cloudflare npx wrangler login
npm run deploy
这行命令实际上是："npm run build && wrangler pages deploy ./dist"
遇到网络问题，提交不上去，通过终端代理来解决
export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890
##2024/9/20 15:40:19:
基于 github 仓库的方式部署到 cloudflare
前面提到可以将构建好的代码发布到 cloudflare, 现在用一种新的方式来发布
先把整个工程上传到 github ：
https://github.com/qyzhizi/cloudflare_getStarted_react_vite_tsx_demo/tree/main
然后登录 cloudflare ，进入 worker 与 page 页面，选择 page 然后授权
cloudflare_getStarted_react_vite_tsx_demo 仓库
之后进行部署设置
架构可以选择 vue
构建命令 ：npm run build
构建命令可以在 package.json 中找到
构建输出目录：dist
最终的网页地址： https://cloudflare-getstarted-react-vite-tsx-demo.pages.dev/