对于部署 React 应用，我推荐以下方案（20241127使用方案1Nginx+PM2）：

对于部署 React 应用，我推荐以下方案（20241127使用方案1Nginx+PM2）：

方案1：Nginx + PM2（推荐）

这是最常用的生产环境部署方式：

1. 构建项目:

# 本地构建
npm run build

# 将 build 目录上传到服务器
scp -r build/* root@your-server:/www/video-app/

2. Nginx 配置:

server {
    listen 80;
    server_name xoxome.top;

    # 静态文件目录
    root /www/video-app/build;
    index index.html;

    # 处理前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 如果有后端 API，配置代理
    location /api {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

3. 使用 PM2 管理后端服务:

# 安装 PM2
npm install -g pm2

# 启动后端服务
pm2 start server/index.js --name "video-app-api"

# 设置开机自启
pm2 startup
pm2 save

方案2：Docker 部署

如果使用容器化部署：

1. 前端 Dockerfile:

FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

2. 后端 Dockerfile:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --production
COPY . .
CMD ["npm", "start"]

3. Docker Compose:

version: '3'
services:
  frontend:
    build:
      context: ./client
      dockerfile: Dockerfile.client
    ports:
      - "80:80"
    depends_on:
      - backend

  backend:
    build:
      context: ./server
      dockerfile: Dockerfile.server
    ports:
      - "3001:3001"
    environment:
      - NODE_ENV=production

方案3：使用 CI/CD（持续集成/持续部署）

使用 GitHub Actions 或 GitLab CI：

name: Deploy
on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Build
        run: |
          npm install
          npm run build
          
      - name: Deploy
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.SSH_KEY }}
          source: "build/*"
          target: "/www/video-app/"

建议和最佳实践：

1. 安全性：

   • 使用 HTTPS（Let’s Encrypt）
   • 设置适当的 CORS 策略
   • 使用环境变量存储敏感信息

2. 性能优化：

   • 启用 Nginx 缓存
   • 使用 CDN 加速静态资源
   • 开启 Gzip 压缩

3. 监控：

   • 使用 PM2 监控进程
   • 设置日志收集
   • 配置错误报警

4. 备份策略：

   • 定期备份数据
   • 保存多个版本的备份
   • 测试恢复流程

我建议使用方案1（Nginx + PM2），因为：

• 部署简单直观
• 维护成本低
• 性能好
• 容易扩展
• 适合大多数中小型项目

如果团队已经在使用容器技术，那么方案2（Docker）也是很好的选择。

在 CentOS 9 上部署之前，需要进行以下准备工作：

1. 系统更新和基础工具安装

# 更新系统
dnf update -y

# 安装基础工具
dnf install -y wget curl git vim

2. 安装 Node.js 和 npm

# 添加 NodeSource 仓库
curl -fsSL https://rpm.nodesource.com/setup_18.x | bash -

# 安装 Node.js 和 npm
dnf install -y nodejs

# 验证安装
node --version
npm --version

# 安装 PM2
npm install -g pm2

3. 安装和配置 Nginx

# 安装 Nginx
dnf install -y nginx

# 启动 Nginx
systemctl start nginx
systemctl enable nginx

# 检查状态
systemctl status nginx

4. 配置防火墙

# 安装防火墙工具（如果没有）
dnf install -y firewalld

# 启动防火墙
systemctl start firewalld
systemctl enable firewalld

# 开放需要的端口
firewall-cmd --permanent --add-service=http
firewall-cmd --permanent --add-service=https
firewall-cmd --permanent --add-port=3001/tcp  # 如果需要后端端口
firewall-cmd --reload

5. 创建项目目录和设置权限

# 创建项目目录
mkdir -p /www/video-app

# 创建专门的用户来运行应用（推荐）
useradd -r nodejs
chown -R nodejs:nodejs /www/video-app

# 设置适当的权限
chmod -R 755 /www/video-app

6. 配置 Nginx 虚拟主机

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名

    root /www/video-app/build;
    index index.html;

    # 启用 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

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

    # 如果有后端 API
    location /api {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # 安全相关配置
    location ~ /\. {
        deny all;
    }
}

7. SELinux 配置（如果启用）

# 检查 SELinux 状态
sestatus

# 如果需要允许 Nginx 访问项目目录
semanage fcontext -a -t httpd_sys_content_t "/www/video-app(/.*)?"
restorecon -Rv /www/video-app

# 如果需要允许 Nginx 作为反向代理
setsebool -P httpd_can_network_connect 1

8. 设置环境变量（如果需要）

# 创建环境变量文件
vim /www/video-app/.env

# 添加需要的环境变量
NODE_ENV=production
API_URL=http://your-api-url
# ... 其他环境变量

9. 设置日志目录

# 创建日志目录
mkdir -p /www/video-app/logs

# 设置权限
chown -R nodejs:nodejs /www/video-app/logs
chmod 755 /www/video-app/logs

10. 安装证书（如果需要 HTTPS）

# 安装 certbot
dnf install -y certbot python3-certbot-nginx

# 获取证书
certbot --nginx -d xoxome.top

检查清单：

1. 确认所有服务正常运行：

systemctl status nginx
systemctl status firewalld
pm2 status

2. 测试 Nginx 配置：

nginx -t

3. 检查端口监听状态：

ss -tulpn

4. 检查日志文件权限：

ls -la /www/video-app/logs

完成这些步骤后，服务器就准备好接收部署了。之后你就可以：

1. 在本地构建项目 (npm run build)
2. 将构建文件上传到服务器
3. 启动应用并用 PM2 管理

记得定期：

• 更新系统包
• 检查日志
• 备份数据
• 监控服务器资源使用情况