1. React项目打包基础操作先说说React项目打包这件事。用create-react-app脚手架创建的项目打包简直不要太简单只需要在项目根目录执行npm run build这个命令会在项目下生成一个build文件夹Vue项目通常是dist文件夹里面就是优化过的静态资源文件。我实测过多次这个打包过程会自动完成以下工作压缩JavaScript和CSS文件自动添加文件哈希值解决缓存问题生成生产环境优化的React代码提取第三方依赖到单独文件关键点来了如果你用的是BrowserRouter类似Vue的history模式直接双击打开index.html是看不到页面的控制台会报错。这是因为前端路由需要服务器配合处理非真实路径的请求。2. Node.js Serve部署方案2.1 本地测试运行先说最简单的serve方案这个适合快速验证打包结果。全局安装serve工具npm install -g serve然后在build目录下执行serve -s这个-s参数特别重要它会让所有路由请求都回退到index.html。我刚开始用的时候没加这个参数结果路由跳转全部404排查了半天才发现问题。实用技巧如果想指定端口比如4000可以这样serve -s -l 40002.2 服务器部署实战在Linux服务器上用Node.js部署核心是要让服务持续运行。我推荐用nohupnohup serve -s build -l 3000 这里有几个坑要特别注意一定要用nohup和末尾的否则SSH断开连接服务就停了建议指定端口号如3000方便后续管理记得在云服务器安全组开放对应端口性能实测在我的2核4G服务器上serve能轻松应对日均5000的访问量。但如果是高并发场景建议还是用Nginx。3. Nginx部署方案3.1 基础配置Nginx的配置稍微复杂点但优势明显。这是我的标配配置server { listen 80; server_name yourdomain.com; root /var/www/react-project/build; location / { try_files $uri $uri/ /index.html; index index.html; } }重点说明try_files指令是处理前端路由的关键root路径要指向build文件夹的绝对路径记得把yourdomain.com换成你自己的域名3.2 高级优化配置这是我优化过的生产环境配置server { listen 80; server_name yourdomain.com; root /var/www/react-project/build; # 开启gzip压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml; # 缓存设置 location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 1y; add_header Cache-Control public; } location / { try_files $uri $uri/ /index.html; index index.html; } # 禁止访问敏感文件 location ~ /\. { deny all; } }这个配置做了三件事开启gzip压缩减少传输体积设置静态资源长期缓存禁止访问.git等隐藏文件4. 两种方案深度对比对比项Node.js ServeNginx安装复杂度需安装Node环境直接yum安装内存占用~50MB~10MB并发处理一般优秀配置灵活性简单高度灵活静态文件缓存需额外配置原生支持适合场景开发/测试/小型项目生产环境个人经验临时演示用serve最方便5分钟就能跑起来正式项目一定要用Nginx性能好太多如果要做负载均衡Nginx是唯一选择5. 常见问题解决方案5.1 路由刷新404问题这个问题我遇到过无数次解决方案就一个确保所有路由请求都返回index.html。在Nginx中就是location / { try_files $uri $uri/ /index.html; }5.2 静态资源加载失败如果发现CSS/JS文件加载失败通常是路径问题。检查两点package.json中是否设置了正确的homepageNginx配置的root是否指向了正确的build目录5.3 跨域问题开发环境可以在webpack配置proxy生产环境建议location /api { proxy_pass http://backend-server; proxy_set_header Host $host; }6. 最佳实践建议根据我多年部署经验推荐以下方案组合开发环境直接用create-react-app的开发服务器测试环境Node.js serve快速部署生产环境Nginx CDN 负载均衡特别提醒如果用了PWA记得在Nginx中配置service-worker的缓存策略location /service-worker.js { add_header Cache-Control no-cache; proxy_cache_bypass $http_pragma; proxy_cache_revalidate on; expires off; access_log off; }最后说个真实案例我们有个React项目最开始用serve部署日均1万UV时CPU经常跑满。切换到Nginx后同样的服务器配置可以轻松应对5万 UV这就是静态文件服务器的威力。
React项目打包后，用Nginx和Node.js serve两种方式部署到服务器的实战对比
1. React项目打包基础操作先说说React项目打包这件事。用create-react-app脚手架创建的项目打包简直不要太简单只需要在项目根目录执行npm run build这个命令会在项目下生成一个build文件夹Vue项目通常是dist文件夹里面就是优化过的静态资源文件。我实测过多次这个打包过程会自动完成以下工作压缩JavaScript和CSS文件自动添加文件哈希值解决缓存问题生成生产环境优化的React代码提取第三方依赖到单独文件关键点来了如果你用的是BrowserRouter类似Vue的history模式直接双击打开index.html是看不到页面的控制台会报错。这是因为前端路由需要服务器配合处理非真实路径的请求。2. Node.js Serve部署方案2.1 本地测试运行先说最简单的serve方案这个适合快速验证打包结果。全局安装serve工具npm install -g serve然后在build目录下执行serve -s这个-s参数特别重要它会让所有路由请求都回退到index.html。我刚开始用的时候没加这个参数结果路由跳转全部404排查了半天才发现问题。实用技巧如果想指定端口比如4000可以这样serve -s -l 40002.2 服务器部署实战在Linux服务器上用Node.js部署核心是要让服务持续运行。我推荐用nohupnohup serve -s build -l 3000 这里有几个坑要特别注意一定要用nohup和末尾的否则SSH断开连接服务就停了建议指定端口号如3000方便后续管理记得在云服务器安全组开放对应端口性能实测在我的2核4G服务器上serve能轻松应对日均5000的访问量。但如果是高并发场景建议还是用Nginx。3. Nginx部署方案3.1 基础配置Nginx的配置稍微复杂点但优势明显。这是我的标配配置server { listen 80; server_name yourdomain.com; root /var/www/react-project/build; location / { try_files $uri $uri/ /index.html; index index.html; } }重点说明try_files指令是处理前端路由的关键root路径要指向build文件夹的绝对路径记得把yourdomain.com换成你自己的域名3.2 高级优化配置这是我优化过的生产环境配置server { listen 80; server_name yourdomain.com; root /var/www/react-project/build; # 开启gzip压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml; # 缓存设置 location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 1y; add_header Cache-Control public; } location / { try_files $uri $uri/ /index.html; index index.html; } # 禁止访问敏感文件 location ~ /\. { deny all; } }这个配置做了三件事开启gzip压缩减少传输体积设置静态资源长期缓存禁止访问.git等隐藏文件4. 两种方案深度对比对比项Node.js ServeNginx安装复杂度需安装Node环境直接yum安装内存占用~50MB~10MB并发处理一般优秀配置灵活性简单高度灵活静态文件缓存需额外配置原生支持适合场景开发/测试/小型项目生产环境个人经验临时演示用serve最方便5分钟就能跑起来正式项目一定要用Nginx性能好太多如果要做负载均衡Nginx是唯一选择5. 常见问题解决方案5.1 路由刷新404问题这个问题我遇到过无数次解决方案就一个确保所有路由请求都返回index.html。在Nginx中就是location / { try_files $uri $uri/ /index.html; }5.2 静态资源加载失败如果发现CSS/JS文件加载失败通常是路径问题。检查两点package.json中是否设置了正确的homepageNginx配置的root是否指向了正确的build目录5.3 跨域问题开发环境可以在webpack配置proxy生产环境建议location /api { proxy_pass http://backend-server; proxy_set_header Host $host; }6. 最佳实践建议根据我多年部署经验推荐以下方案组合开发环境直接用create-react-app的开发服务器测试环境Node.js serve快速部署生产环境Nginx CDN 负载均衡特别提醒如果用了PWA记得在Nginx中配置service-worker的缓存策略location /service-worker.js { add_header Cache-Control no-cache; proxy_cache_bypass $http_pragma; proxy_cache_revalidate on; expires off; access_log off; }最后说个真实案例我们有个React项目最开始用serve部署日均1万UV时CPU经常跑满。切换到Nginx后同样的服务器配置可以轻松应对5万 UV这就是静态文件服务器的威力。
