部署你的
React app
上传 Vite、Create React App 或其他 React SPA 的正式 build，发布时保留刷新不坏的路由、HTTPS、全球边缘网络，以及需要时可接的自定义域名。
请上传构建输出，不是原始项目
React 原始文件是开发用。DeployPages 提供的是正式 build 生成的静态文件。
Vite React
Vite 默认静态输出是 dist。如果 vite.config.js 修改了 build.outDir 或 base，请部署实际输出文件夹，并在上传后测试资源 URL。
Create React App
CRA 会把正式构建文件写到 build。如果 app 会放在子路径，homepage 设置可能影响生成出的资源 URL。
其他 React SPA
只要能生成 index.html、JavaScript bundle、CSS、图片、字体和静态资源，任何 React 设置都能走这个流程。
React app 为什么部署后会坏
React SPA 仍然从一个 HTML 文件开始
多数 React single-page app 会提供一个 HTML 进入点，再由 client-side router 在 JavaScript 加载后决定要渲染哪个画面。
本机可行，是因为 dev server 知道找不到路由时要回到 index.html。基础静态托管未必知道，所以 /dashboard 在站内导航可用，刷新却可能变成 404。
刷新时会坏在哪里
静态文件服务器收到 GET /settings 时，会查找真实存在的 settings 文件或文件夹。
React build 通常只有 index.html 和带 hash 的资源，所以服务器会在 React Router 读到网址前就回 404。
DeployPages 怎么处理
DeployPages 会对找不到的 document route 套用 SPA 回退，改提供 index.html，而不是直接回硬 404。
HTML 文件加载后，React 启动、router 读取当前网址，正确画面就能渲染，不需要你维护 redirect 文件。
团队为什么用它
上传 dist 或 build 文件夹。路由回退、HTTPS、压缩和全球边缘网络都属于部署流程，不需要每个小型 React app 都重建一次清单。
React app 上线前该检查的事
App 能编译，不代表在线一定正常。分享链接前先看这些。
资源 base path
如果 JavaScript 或 CSS 从错误 URL 加载，页面可能变空白。Vite base 和 CRA homepage 是最常需要检查的地方。
Client-side routes
测试 /login、/pricing、/dashboard 和所有重要分享深层链接的直接访问与刷新。
API endpoints
静态 React 部署可以呼叫外部 API，但本身不会执行后端程序。请不要把服务器私密信息和私人 API key 放进前端 bundle。
环境变量
多数 React 构建工具会在构建时把公开环境值写进 bundle。上传后才改变量，通常需要重新构建。
React 部署流程
构建 app
在本机执行正式 build，让 React、CSS 和资源打包成可部署的静态文件夹。
检查输出
确认输出文件夹包含 index.html 和生成后的资源。Vite 通常是 dist，Create React App 通常是 build。
上传整个文件夹
把完整 dist 文件夹拖进 DeployPages。不要只上传 index.html，否则样式和 script 会缺失。
测试路由页
打开嵌套路由、刷新浏览器，确认 app 仍正常加载，而不是回到主机层级 404。
常见 React 部署问题
部署后白画面
先开 DevTools 看 JS 或 CSS 是否缺失。错误 base path、缺少资源或上传错文件夹，是常见原因。
嵌套路由刷新回 404
静态托管服务正在为该路由找真实文件。使用 SPA 回退，让找不到的 document route 回到 index.html。
资源本机正常，在线失效
检查绝对路径、public base 设置，以及上传的输出文件夹是否包含生成后的 assets 目录。
环境变量修改没有生效
用新的公开变量重新构建 app，再上传新的输出。已部署的 bundle 无法在 runtime 读取私人 server env。
React 部署常见问题
Q:为什么 React app 部署后是白画面？
多数白画面来自错误的资源路径或缺少 bundle。Vite 请确认 base 符合部署目标；CRA 请检查 homepage，并确认上传文件夹包含生成的资源。
Q:需要手动设置 nginx 或 redirects 吗？
不用。DeployPages 会在边缘处理找不到路由时的 SPA 回退，不需要你自己维护 server rewrites。
Q:应该上传项目文件夹还是 dist？
请上传正式输出文件夹，不是原始项目。Vite 通常是 dist，Create React App 通常是 build。
Q:可以使用环境变量吗？
可以，但它们会在本机 build 时解析。DeployPages 托管的是最后静态输出，因此执行期间的 server-side environment injection 不属于这个流程。
Q:React app 部署后可以呼叫 API 吗？
可以。静态 React app 可以从浏览器呼叫外部 API。请记得任何打包进前端代码的内容都会被用户看到，私人 secret 需要放在后端。
Q:Next.js 也可以部署在这里吗？
可以，前提是导出成静态网站。使用 output: 'export' 并上传生成的 out 目录。Server-rendered Next.js 路由需要静态托管以外的 runtime。
Q:之后可以接自定义域名吗？
可以。网站上线后，在 Console 新增你的域名并依 DNS 指示设置。记录解析后，DeployPages 会自动提供 HTTPS。