React应用部署方法：从开发到上线的实用指南

本地构建生成静态文件

ref="/tag/156/" style="color:#874873;font-weight:bold;">开发完一个React应用后，第一步是把代码打包成浏览器能直接运行的静态资源。在项目根目录下执行 npm run build 命令，create-react-app 会自动把所有JS、CSS和图片压缩合并，输出到 build 文件夹里。这个文件夹就是后续部署要用的核心内容。

npm run build

生成的文件结构通常包含 index.html、static/js 和 static/css 等目录。这些文件可以直接扔到任意支持静态页面托管的地方。

使用GitHub Pages免费发布

如果你只是想快速展示作品，比如做个个人简历页或者小工具演示，GitHub Pages 是最省事的选择。先在项目中安装 gh-pages 包：

npm install --save-dev gh-pages

然后在 package.json 里添加两个字段：homepage 指向你的 GitHub 仓库地址，再修改或添加 deploy 脚本。

"homepage": "https://yourusername.github.io/react-app",
"scripts": {
  "deploy": "npm run build && gh-pages -d build"
}

运行 npm run deploy 后，页面会自动推送到 GitHub 的 gh-pages 分支，并在线上生效。刷新就能看到自己的 React 应用跑起来了。

部署到Nginx服务器

公司内部系统或者正式项目更常见的是部署到自有服务器。Linux 上装个 Nginx，把 build 目录里的文件复制到 /usr/share/nginx/html 下就行。记得配置好 location 规则，让所有路由都指向 index.html，否则刷新页面会出现 404。

server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

改完配置重启 Nginx：sudo systemctl restart nginx，网站就可访问了。这种方式稳定又高效，适合对性能有要求的场景。

借助Vercel一键部署

现在越来越多开发者喜欢用 Vercel 这类现代化平台。它和 Git 深度集成，只要把代码推到 GitHub 仓库，Vercel 自动拉取、构建、部署，全程不用碰命令行。注册账号后导入项目，选择根目录，其他保持默认即可。

每次提交代码，Vercel 都会生成一个预览链接，方便测试。上线后还能自动分配 HTTPS 证书，域名也支持自定义。对于不想折腾服务器的人来说，这几乎是零成本的方案。

处理路由刷新问题

React Router 做单页应用时，跳转没问题，但一刷新就报错，这是常见坑点。根本原因是服务端没做路径回退处理。不管是 Nginx、Apache 还是云函数，都要确保所有非静态资源请求最终返回 index.html。否则像 /user/profile 这样的路径会被当作真实文件查找，自然找不到。

优化加载速度的小技巧

打包后的 JS 文件如果太大，首屏加载会慢。可以在 package.json 里加个分析脚本：

"scripts": {
  "analyze": "source-map-explorer 'build/static/js/*.js'"
}

运行 npm run analyze 能看到哪个模块占空间最多。第三方库过大可以考虑按需引入，或者用动态 import() 拆分代码块。图片资源尽量压缩，SVG 图标建议内联或用字体代替。