使用 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>

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