当前位置：首页 > article >正文

怎么在一台服务器上配置两套不同的前后端分离系统

article 2025/4/1 0:06:18

在一台服务器上部署两套前后端分离的系统，并使用 IP 地址作为 server_name，可以通过配置 Nginx 来实现。以下是一个详细的步骤指南：

步骤

准备文件和目录结构
- 确保每套系统的前端文件和后端服务器已经准备就绪。
- 假设两套系统的前端文件分别位于 /usr/local/app1/frontend 和 /usr/local/app2/frontend。
- 假设两套系统的后端服务分别运行在 http://127.0.0.1:8081 和 http://127.0.0.1:8082。
安装和配置 Nginx
- 如果尚未安装 Nginx，可以通过包管理器进行安装，例如在 Ubuntu 上使用 sudo apt install nginx。
- 编辑 Nginx 配置文件，通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/ 目录下。
配置虚拟主机
- 在 Nginx 配置文件中添加两个 server 块，分别对应两套系统的前端和后端服务，使用不同的 IP 地址作为 server_name。

示例配置

以下是一个 Nginx 配置文件的示例，展示了如何在同一台服务器上使用不同的 IP 地址来部署两套前后端分离的系统：

# /etc/nginx/conf.d/app1.conf
server {
    listen 80;
    server_name 192.168.1.100;

    location / {
        root /usr/local/app1/frontend;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8081/;
        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;
    }
}

# /etc/nginx/conf.d/app2.conf
server {
    listen 80;
    server_name 192.168.1.101;

    location / {
        root /usr/local/app2/frontend;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8082/;
        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;
    }
}

详细解释

server { ... }:
- listen 80;: 监听 80 端口（HTTP 默认端口）。
- server_name 192.168.1.100;: 指定虚拟主机的 IP 地址为 192.168.1.100。对于第二套系统，使用 server_name 192.168.1.101;。
location / { ... }:
- root /usr/local/app1/frontend;: 设置前端文件的根目录为 /usr/local/app1/frontend。对于第二套系统，使用 /usr/local/app2/frontend。
- index index.html;: 设置默认的索引文件为 index.html。
- try_files $uri $uri/ /index.html;: 尝试提供请求的文件，如果文件不存在，则提供 index.html。这对于单页应用（SPA）非常重要，确保前端路由可以正常工作。
location /api/ { ... }:
- proxy_pass http://127.0.0.1:8081/;: 将 /api/ 路径的请求代理到本地的 127.0.0.1:8081 端口。对于第二套系统，使用 http://127.0.0.1:8082/。
- proxy_set_header: 设置代理请求的头信息，确保后端服务器能获取到客户端的真实信息。

启动和测试

启动或重启 Nginx:
```
sudo systemctl restart nginx
```
配置 DNS 或本地 hosts 文件:
- 如果你有多个 IP 地址并且希望使用域名访问，可以通过配置 DNS 或本地 hosts 文件将域名解析到相应的 IP 地址。
- 例如，在本地 hosts 文件中添加以下内容：
```
192.168.1.100 app1.example.com
192.168.1.101 app2.example.com
```
测试配置:
- 打开浏览器，访问 http://192.168.1.100 和 http://192.168.1.101，确保每套系统的前端和后端都能正常工作。