如何在一台服务器上同时部署项目的前端和后端服务？

在一台服务器上同时部署项目的前端和后端服务是常见的做法。以下是详细的步骤和推荐方案，适用于大多数 Web 项目（如 React + Node.js、Vue + Express 等）。

✅ 一、部署架构概览

服务器（例如：Ubuntu 20.04）
├── 前端：静态文件（HTML/CSS/JS） → Nginx 托管
├── 后端：API 服务（Node.js/Python/Java等） → PM2 / systemd / Docker 托管
└── 反向X_X：Nginx 统一入口，转发请求到前后端

✅ 二、部署步骤详解

1. 准备服务器环境

# 更新系统
sudo apt update && sudo apt upgrade -y

# 安装必要工具
sudo apt install nginx git curl wget -y

# 安装 Node.js（以 v18 为例）
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# 安装 PM2（用于管理后端 Node.js 进程）
npm install -g pm2

2. 部署后端服务

假设后端项目目录为 /var/www/backend

cd /var/www
git clone https://your-repo/backend.git
cd backend
npm install
npm run build  # 如果有构建步骤

使用 PM2 启动后端服务：

pm2 start npm --name "api" -- start
# 或直接启动 server.js
# pm2 start server.js --name "api"

默认监听 http://localhost:3000

设置开机自启：

pm2 startup
pm2 save

3. 部署前端服务

假设前端项目目录为 /var/www/frontend

cd /var/www
git clone https://your-repo/frontend.git
cd frontend
npm install
npm run build  # 构建生成 dist 或 build 目录

将构建后的静态文件复制到 Nginx 默认目录或保留原路径：

# 例如：React/Vue 的 build 输出在 ./dist 或 ./build
sudo cp -r dist/* /var/www/html/

或者你也可以让 Nginx 直接指向前端的 dist 目录。

4. 配置 Nginx 反向X_X

编辑 Nginx 配置文件：

sudo nano /etc/nginx/sites-available/default

配置如下（示例）：

server {
    listen 80;
    server_name your-domain.com;  # 或服务器公网IP

    # 前端：处理所有静态资源和 SPA 路由
    location / {
        root /var/www/frontend/dist;  # 替换为你的前端构建目录
        try_files $uri $uri/ /index.html;
    }

    # 后端 API 请求X_X到本地 3000 端口
    location /api/ {
        proxy_pass http://localhost:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # 可选：WebSocket 或其他接口
    # location /socket.io/ {
    #     proxy_pass http://localhost:3000;
    #     proxy_http_version 1.1;
    #     proxy_set_header Upgrade $http_upgrade;
    #     proxy_set_header Connection "upgrade";
    # }
}

测试并重载 Nginx：

sudo nginx -t
sudo systemctl reload nginx

✅ 三、域名与 HTTPS（可选但推荐）

使用 Let’s Encrypt 免费证书

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-domain.com

Certbot 会自动配置 HTTPS 并更新 Nginx。

✅ 四、防火墙设置（如果启用）

sudo ufw allow 'Nginx Full'
sudo ufw enable

✅ 五、维护与监控

• 查看后端日志：pm2 logs api
• 重启服务：pm2 restart api
• 查看 Nginx 错误日志：sudo tail -f /var/log/nginx/error.log

✅ 其他部署方式（可选）

✅ 示例：Docker Compose 部署（高级推荐）

# docker-compose.yml
version: '3'
services:
  frontend:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./frontend/dist:/usr/share/nginx/html
    depends_on:
      - backend

  backend:
    build: ./backend
    environment:
      - NODE_ENV=production
    ports:
      - "3000:3000"

✅ 总结

如果你提供具体的技术栈（如 Vue + Spring Boot / React + Flask），我可以给出更精确的配置示例。欢迎补充！