【vue】使用 apache 给前后端服务做反向代理

本文档主要记录使用 apache 反向代理到 nginx，nginx 再反向代理到前端服务和后端服务。正常用 nginx 做反向代理即可，工作原因，nginx 前面需要加一个 apache，因此踩了些坑，做了些记录。不是单纯根目录转发，而是需要加 subPath，即原本请求根目录到首页，现在要访问 /kkk 路径才会到首页。

apache：2.4.54，如何部署 apache

nginx：1.15.6

vue-cli3，前端vue

Go：1.17.1

---

前后端服务器IP: 192.168.1.12

apache服务器IP: 192.168.1.13

加 apache 之前

前端和后端分别是 2 个容器服务，前端里面自带 nginx，因此通过前端容器暴露端口，让外面的访问。请求如果是后端接口，转发给后端容器。

web 访问 192.168.1.12:8080 跳转到前端首页

直接加 apache 转发

通过 apache 配置项配置

<VirtualHost *:8080>
  ProxyPass /kkk http://192.168.1.12:8080/
  ProxyPassReverse /kkk http://192.168.1.12:8080/
VirtualHost>

请求 http://192.168.1.13:8080/kkk，会出现如下报错，加载的 js 和 css 全部404。

因为主页加载的 js 和 css 没有加上 /kkk 的前缀，导致访问的静态资源请求不到。这个主要原因是 vue 打包的时候没有加上 subPath。

vue 打包添加 subPath

我用的是 vue-cli3，所以修改项目下面的vue.config.js。修改 publicPath ，改成想要的 subPath 就可以。

const path = require('path')

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  },
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  publicPath: '/kkk',
  ...
}

改完，打包，替换上去，再访问。

发现，前端页面有了，不过后端接口访问不到。跟前面的问题一样，请求后端的接口路径，没有匹配 apache 的配置。

apache 添加后端路由转发

在上面 apache 的配置基础上添加，不需要添加 ProxyPassReverse，如果加了，反而在请求的时候会把 /api 重写调，请求的路径就又不对了。

添加后端转发的这一条，相当于到 apache 的请求再转发到 nginx，nginx 再根据匹配规则转发。

后面 http://192.168.1.12:8080/api，必须加上 /api，不然是会有问题。

<VirtualHost *:8080>
  ProxyPass /kkk http://192.168.1.12:8080/
  ProxyPassReverse /kkk http://192.168.1.12:8080/
  
  ProxyPass /api http://192.168.1.12:8080/api
VirtualHost>

---

.1.12:8080/

ProxyPass /api http://192.168.1.12:8080/api

---

**注意：千万不要去通过改前端打包后的文件里面的静态资源路径**