如何把React.js 项目部署到服务器

# 如何把React.js 项目部署到服务器 ## 前言 React.js 作为当前最流行的前端框架之一，开发完成后如何部署到生产环境是开发者必须掌握的技能。本文将详细介绍从项目构建到服务器部署的全流程，涵盖本地打包、服务器配置、Nginx部署、HTTPS配置等核心环节。 --- ## 一、项目构建准备 ### 1. 优化生产环境配置 在部署前需确保项目已针对生产环境优化： ```bash # 检查package.json中的生产依赖 npm install --only=prod # 清理无用依赖 npm prune 

2. 环境变量配置

创建.env.production文件配置生产环境变量：

REACT_APP_API_BASE_URL=https://api.yourdomain.com REACT_APP_ENV=production 

3. 生成生产环境构建包

npm run build 

构建完成后会在项目根目录生成build/文件夹，包含所有静态资源。

---

二、服务器环境配置

1. 服务器基础要求

• Linux服务器（推荐Ubuntu/CentOS）
• Node.js 16+ 运行环境
• Nginx/Apache 网页服务器
• 域名及SSL证书（可选但推荐）

2. 安装必要软件

# Ubuntu示例 sudo apt update sudo apt install -y nginx nodejs npm 

3. 上传构建文件

通过SFTP/SCP或Git将build/目录上传至服务器：

scp -r build/ user@your_server_ip:/var/www/react-app/ 

---

三、Nginx服务器配置

1. 创建Nginx配置文件

/etc/nginx/sites-available/yourdomain.com：

server { listen 80; server_name yourdomain.com www.yourdomain.com; root /var/www/react-app/build; index index.html; location / { try_files $uri $uri/ /index.html; } # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 1y; add_header Cache-Control "public, no-transform"; } } 

2. 启用配置并重启Nginx

sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled sudo nginx -t # 测试配置 sudo systemctl restart nginx 

---

四、HTTPS安全配置（Let’s Encrypt）

1. 安装Certbot工具

sudo apt install -y certbot python3-certbot-nginx 

2. 获取SSL证书

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com 

3. 自动续期配置

证书默认90天有效期，添加自动续期：

sudo certbot renew --dry-run 

---

五、高级部署方案

1. PM2进程管理（适用于服务端渲染）

npm install -g pm2 pm2 serve /var/www/react-app/build 3000 --spa pm2 startup pm2 save 

2. Docker容器化部署

创建Dockerfile：

FROM node:16-alpine as builder WORKDIR /app COPY . . RUN npm install && npm run build FROM nginx:alpine COPY --from=builder /app/build /usr/share/nginx/html EXPOSE 80 

构建并运行：

docker build -t react-app . docker run -d -p 80:80 react-app 

---

六、常见问题排查

1. 白屏问题

   • 检查Nginx的try_files配置
   • 确认资源路径是否正确（尤其使用basename时）

2. API请求404

   • 配置Nginx反向代理：

   location /api/ { proxy_pass https://api.yourdomain.com; } 

3. 缓存更新失效

   • 在build/asset-manifest.json中检查文件哈希值
   • 考虑添加版本查询参数

---

结语

通过以上步骤，您的React应用已成功部署到生产环境。建议定期： - 监控服务器资源使用情况 - 设置CI/CD自动化部署流程 - 启用Gzip压缩和CDN加速提升性能

部署只是开始，持续优化才能保证最佳用户体验！ “`

注：实际部署时请根据项目具体情况调整配置参数，不同服务器环境可能存在细微差异。