返回

Vue.js 和 Egg.js 后端统一 80 端口，解决前端路由和后端接口访问冲突

前端

前言

在实际项目开发中，我们经常会遇到这样的场景：前端采用 Vue.js 框架开发，后端采用 Egg.js 框架开发，需要将这两个应用部署到同一台服务器上，并且希望前端路由由前端自己渲染，后端只提供响应文件和 API 服务。但是，默认情况下，域名通常使用 80 端口，如果我们直接将两个应用部署到 80 端口，就会产生端口冲突，导致无法正常访问应用。

解决方法

为了解决这个问题，我们可以使用 Nginx 反向代理和 URL 重写规则来将前端请求转发到各自的服务上。具体配置如下：

server {
    listen 80;
    server_name example.com;

    location /api/ {
        proxy_pass http://localhost:7001;
    }

    location / {
        proxy_pass http://localhost:8080;
    }
}

在这个配置中，我们将所有以 "/api/" 开头的请求转发到 7001 端口，也就是 Egg.js 后端应用所在的端口。而对于其他所有请求，我们将其转发到 8080 端口，也就是 Vue.js 前端应用所在的端口。

隐性 URL 加中转域名

除了使用 Nginx 反向代理和 URL 重写规则之外，我们还可以使用阿里云的隐性 URL 加上中转域名来实现对后端应用的访问。具体步骤如下：

  1. 在阿里云控制台注册一个域名。
  2. 在域名管理页面，找到要添加隐性 URL 的域名，点击 "添加隐性 URL" 按钮。
  3. 在 "隐性 URL" 窗口中，填写要添加的隐性 URL，例如 "api.example.com"。
  4. 在 "中转域名" 窗口中，填写要添加的中转域名，例如 "www.example.com"。
  5. 点击 "确定" 按钮，保存设置。

配置完成后，您就可以通过隐性 URL "api.example.com" 来访问后端应用，而无需直接访问 7001 端口。

总结

通过使用 Nginx 反向代理和 URL 重写规则，或者使用阿里云的隐性 URL 加上中转域名，我们就可以将 Vue.js 和 Egg.js 后端应用同时部署到同一台服务器上，并解决端口冲突的问题。这两种方法都比较简单易行，您可以根据自己的实际情况选择合适的方案。