环境准备：别小看这个环节
很多人直接跳过环境配置，后面会吃大亏。首先确保服务器有Node.js环境，推荐用nvm管理版本：
检查npm版本是否在8以上，低版本会遇到依赖解析问题。接着在项目根目录执行构建命令：
这时会生成dist或build文件夹，记住这个路径，后面配置nginx要用到。有个坑要注意：如果用了第三方UI库，记得在package.json里把依赖移到dependencies里，我就因为把antd放在devDependencies里导致构建失败。
nginx配置：关键在这里
新手最容易栽在nginx配置上。贴一份亲测可用的配置：
重点解释try_files那句：它让所有路由都回退到index.html，这是解决React Router路由问题的关键。之前没加这句，直接访问子路由全是404。
静态资源路径问题
如果打开页面发现静态资源加载失败，检查build/static目录下的文件路径。在package.json里添加这个字段：
这个配置会让构建时使用相对路径。有次我忘了加这个，结果所有css和js文件都从根目录加载，页面直接裸奔。
HTTPS配置
现在不上HTTPS都不好意思说部署过网站。用Certbot申请免费证书：
配置会自动更新，记得设置证书自动续期：
进程守护：别让服务挂了
直接用node跑服务？太天真了，一断开SSH进程就没了。推荐用pm2：
这样即使服务器重启，应用也会自动恢复。有次服务器维护后我的网站还能正常访问，多亏提前配置了pm2。
CDN加速
如果用户反映加载慢，可以考虑加上CDN。把静态资源上传到对象存储，然后在nginx里配置反向代理：
踩坑记录
浏览器缓存问题：更新后用户还是看到老页面。解决方法是在构建输出文件名中加入哈希值，webpack 4以上版本自动支持。
接口代理：开发时用的proxy在生产环境无效，需要在nginx额外配置：
内存不足：小内存服务器构建时容易卡死，加个交换空间：
部署完成后要做全面测试：在不同浏览器检查页面渲染、测试所有路由功能、验证表单提交、检查控制台报错。特别是移动端访问，很容易被忽略。
最后建议把部署过程写成脚本，下次再部署就能一键完成了。自动化部署能节省大量时间，特别是需要频繁更新的项目。
这次部署经历让我深刻体会到，从开发到上线真的是一道鸿沟。不过踩过这些坑后，再遇到问题都能淡定解决了。希望你的部署过程能顺利一些，如果还是遇到问题，欢迎在评论区交流。