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

在一台服务器上运行两个前端网站是完全可行的，常见的做法包括使用反向X_X（如 Nginx）、端口分离、或容器化部署。以下是几种主流方法：

✅ 方法一：使用 Nginx 反向X_X（推荐）

这是最常见且高效的方式。通过配置 Nginx 根据域名区分请求，将流量转发到不同的前端应用。

步骤：

准备两个前端项目
- 例如：website-a 和 website-b
- 构建为静态文件（如 dist/ 或 build/ 目录）

部署到服务器目录

/var/www/website-a   # 存放第一个网站的静态文件
/var/www/website-b   # 存放第二个网站的静态文件

安装并配置 Nginx

安装 Nginx（Ubuntu 示例）：
```
sudo apt update
sudo apt install nginx
```

配置虚拟主机（server blocks）

创建两个配置文件，或在一个文件中定义两个 server 块。

示例：/etc/nginx/sites-available/website-a

server {
    listen 80;
    server_name sitea.example.com;

    root /var/www/website-a;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

示例：/etc/nginx/sites-available/website-b

server {
    listen 80;
    server_name siteb.example.com;

    root /var/www/website-b;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

启用站点

sudo ln -s /etc/nginx/sites-available/website-a /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/website-b /etc/nginx/sites-enabled/

测试并重启 Nginx

sudo nginx -t
sudo systemctl reload nginx

配置 DNS
将 sitea.example.com 和 siteb.example.com 指向你的服务器 IP。

✅ 方法二：使用不同端口访问

适用于测试环境或内部使用。

网站 A：http://your-server-ip:8080
网站 B：http://your-server-ip:8081

实现方式：

使用简单的 HTTP 服务器工具（如 http-server、serve、Python 内置服务器等）。

# 启动网站A（端口8080）
cd /var/www/website-a
npx serve -p 8080

# 启动网站B（端口8081）
cd /var/www/website-b
npx serve -p 8081

⚠️ 缺点：需要暴露多个端口，不美观，不适合生产。

✅ 方法三：使用 Docker 部署

更现代、隔离性好，适合复杂场景。

示例 `docker-compose.yml`：

version: '3'
services:
  website-a:
    image: nginx:alpine
    ports:
      - "8080:80"
    volumes:
      - ./website-a:/usr/share/nginx/html
    networks:
      - web

  website-b:
    image: nginx:alpine
    ports:
      - "8081:80"
    volumes:
      - ./website-b:/usr/share/nginx/html
    networks:
      - web

  # 或者用一个 Nginx 做反向X_X，统一分流
networks:
  web:

或者更高级地：用一个 Nginx 作为反向X_X，Docker 内部服务只监听内网。

✅ 方法四：子路径部署（单域名下不同路径）

如果你想共用一个域名，比如：

example.com/site-a
example.com/site-b

Nginx 配置示例：

server {
    listen 80;
    server_name example.com;

    location /site-a/ {
        alias /var/www/website-a/;
        try_files $uri $uri/ =404;
    }

    location /site-b/ {
        alias /var/www/website-b/;
        try_files $uri $uri/ =404;
    }
}

注意：前端应用需配置 base 路径（如 Vue 的 publicPath，React 的 homepage）。

总结对比

方法	优点	缺点	适用场景
Nginx 域名分流	生产级、优雅、支持 HTTPS	需要域名	推荐生产使用
不同端口	简单快速	不美观、难记	测试/开发
Docker	隔离性好、易管理	学习成本略高	微服务/复杂部署
子路径部署	共享域名	前端需配置 base	单域名多项目

✅ 推荐方案：
使用 Nginx + 域名 的方式，清晰、稳定、易于维护和扩展（后续加 HTTPS、负载均衡也方便）。

如果你告诉我你使用的前端框架（Vue/React 等）、服务器系统（Linux 发行版）、是否有域名，我可以给出更具体的配置示例。