如何在一台服务器上运行两个前端网站？

在一台服务器上运行两个前端网站，核心思路是：通过不同端口、域名或路径区分访问，由 Web 服务器（如 Nginx/Apache）进行路由分发。以下是几种常用方案，按推荐程度排序：

✅ 方案一：使用 Nginx 反向X_X + 多域名/子路径（最灵活、生产推荐）

前提

• 已安装 Nginx（sudo apt install nginx 或 yum install nginx）
• 两个前端项目已构建（如 dist/ 目录），部署到服务器某目录（如 /var/www/site1, /var/www/site2）
• 拥有两个域名（或一个域名的子域：site1.example.com, site2.example.com），并解析到服务器 IP
  （若无域名，可用 localhost:8080 / localhost:8081 测试，但需改 hosts 或浏览器直接访问 IP+端口）

步骤示例

1. 准备项目目录

   sudo mkdir -p /var/www/site1 /var/www/site2
   sudo cp -r project1/dist/* /var/www/site1/
   sudo cp -r project2/dist/* /var/www/site2/
   sudo chown -R www-data:www-data /var/www

2. 配置 Nginx（编辑 /etc/nginx/sites-available/default 或新建站点配置）

   # 方式 A：基于域名（推荐）
   server {
      listen 80;
      server_name site1.example.com;
      root /var/www/site1;
      index index.html;
   
      location / {
          try_files $uri $uri/ =404;
      }
   }
   
   server {
      listen 80;
      server_name site2.example.com;
      root /var/www/site2;
      index index.html;
   
      location / {
          try_files $uri $uri/ =404;
      }
   }
   
   # 方式 B：基于路径（同一域名下用 /app1, /app2 区分）
   server {
      listen 80;
      server_name example.com;
   
      location /app1/ {
          alias /var/www/site1/;
          try_files $uri $uri/ /index.html; # SPA 需回退到 index.html
      }
   
      location /app2/ {
          alias /var/www/site2/;
          try_files $uri $uri/ /index.html;
      }
   }

   💡 注意：若前端是 React/Vue 等 SPA，务必加 try_files ... /index.html 防止刷新 404。

3. 启用配置并重启

   sudo ln -s /etc/nginx/sites-available/mysite.conf /etc/nginx/sites-enabled/
   sudo nginx -t          # 检查语法
   sudo systemctl reload nginx

4. 验证访问

   • http://site1.example.com → 显示 site1
   • http://site2.example.com → 显示 site2
     （或 http://example.com/app1, http://example.com/app2）

🚀 方案二：不同端口（适合测试/内网）

无需域名，直接通过端口区分：

server {
    listen 8080;
    root /var/www/site1;
    index index.html;
    location / { try_files $uri $uri/ =404; }
}

server {
    listen 8081;
    root /var/www/site2;
    index index.html;
    location / { try_files $uri $uri/ =404; }
}

访问：

• http://你的IP:8080 → site1
• http://你的IP:8081 → site2

✅ 优点：简单快速；❌ 缺点：URL 不优雅，不适合对外服务。

⚙️ 方案三：Docker 容器隔离（现代云原生做法）

每个前端独立容器 + Docker Compose 编排：

# docker-compose.yml
version: '3'
services:
  site1:
    image: nginx:alpine
    volumes:
      - ./site1/dist:/usr/share/nginx/html:ro
    ports:
      - "8080:80"
    depends_on: [traefik]

  site2:
    image: nginx:alpine
    volumes:
      - ./site2/dist:/usr/share/nginx/html:ro
    ports:
      - "8081:80"

  traefik:
    image: traefik:v2.10
    ports:
      - "80:80"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    command:
      - "--providers.docker=true"
      - "--entrypoints.web.address=:80"
      - "--accesslog=true"

配合 Traefik 自动根据域名路由（需在 docker-compose.yml 中为每个服务添加标签）。

🔐 补充建议

📌 安全提示：确保 root 目录权限正确（避免 chmod 777），关闭不必要的端口，配置 HTTPS（Let’s Encrypt 免费证书）。

需要我帮你生成具体的 Nginx 配置文件模板（含 HTTPS + 自动续期）或 Docker Compose 示例吗？