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

发布时间：2021-12-13 21:30:44 作者：柒染
来源：亿速云阅读：255

# 如何把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

六、常见问题排查

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

API请求404

配置Nginx反向代理：

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

缓存更新失效
- 在build/asset-manifest.json中检查文件哈希值
- 考虑添加版本查询参数

结语

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

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

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