如何在不同服务器端口上实现前后端分离？

前后端如何分离多个服务器端口

在现代Web开发中，前后端分离是一种常见的架构模式，通过将前端和后端部署在不同的服务器上，可以实现更高的灵活性和可扩展性，下面将详细介绍如何使用Nginx在同一域名下部署多个前后端分离的项目。

背景介绍

假设我们有多个前后端分离的项目，前端使用Vue框架，后端使用Spring Boot框架，分别部署在不同的服务器上，每个项目使用不同的端口进行代理，以实现跨域问题的解决和真实IP的隐藏。

实践步骤

1. 上传资源文件

目录结构：

    ├─conf
    │  ├─nginx.conf
    ├─html
    │  ├─home
    │  │  ├─static
    │  │  ├─css
    │  │  ├─fonts
    │  │  └─js
    ├─article
    │  ├─static
    │  ├─css
    │  ├─fonts
    │  └─js
    ├─index.html
    └─50x.html

2. 修改Nginx配置

配置文件示例：

    server {
        listen 80;
        server_name localhost;
        // 父系统
        location /home {
            root home; // 父系统资源目录
            index index.html index.htm;
        }
        location /homeback/ {
            proxy_pass http://父系统后台服务器ip:端口号/homeback/;
            proxy_read_timeout 150;
            proxy_set_header Host $host;
            proxy_set_header XRealIP $remote_addr;
            proxy_set_header REMOTEHOST $remote_addr;
            proxy_set_header XForwardedFor $proxy_add_x_forwarded_for;
        }
        // 子系统一
        location /article {
            alias article; // 子系统一资源目录
            index index.html;
        }
        location /articleback/ {
            proxy_pass http://子系统一后台服务器ip:端口号/articleback/;
            proxy_pass_header Server;
            proxy_set_header Host $http_host;
            proxy_set_header XRealIP $remote_addr;
            proxy_set_header XScheme $scheme;
            proxy_set_header XForwardedFor $proxy_add_x_forwarded_for;
            proxy_read_timeout 150;
        }
    }

注意事项：

当指定目录时，要注意虚拟目录alias和root的区别，如果配置子系统资源目录时使用的是root而不是alias，可能会导致路径错误，访问http://前端服务器ip:80/article/a.html实际指向/html/article/article/a.html，会报404错误。

3. 修改前端配置文件

打包配置：

前端项目打包时需要修改publicPath，配置资源的访问路径，将父系统设为home，子系统一设置为article，如果不进行配置，访问静态资源时会出现404错误。

4. 测试

访问测试：

父系统访问：http://前端服务器ip:80/home

子系统一访问：http://前端服务器ip:80/article

通过上述步骤，可以在一个域名下使用Nginx代理部署多个前后端分离的项目，主要需要注意Nginx配置文件中location的配置，以及虚拟目录alias和root的区别，这种配置方式不仅解决了跨域问题，还提高了项目的灵活性和可维护性。

各位小伙伴们，我刚刚为大家分享了有关“前后端如何分离多个服务器端口”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！