Ubuntu 下配置 Nginx 解决部署环境下 SpringBoot + Vue 的跨域及通信

上一篇：SpringBoot + Vue 的跨域及通信（开发环境）

前言：上一篇发布之后，有小伙伴点赞说可用，也有小伙伴私信说部署到正式环境就失效了。

莫急。因最近比较忙，这个 Ubuntu + Nginx + SpringBoot + Vue 的部署系列还差最后一步没有完成。
今天就来完成它。

Vue-Element-Admin 中代理的工作流程

Vue-Element-Admin 中，就前后端通信这一功能，它有四个配置文件很重要：
- vue.config.js：vue 的配置文件。
  
  上一篇，曾在这里配置了代理，解决了本地的跨域问题，回到前言中，为什么部署之后失效了呢？还记不记得这里是怎么写的（回去看哈）？devServer -- proxy，devServer 不明显吗？ dev 、development，开发环境下的服务配置呀。生产环境怎么可能会生效？😂
- src/utils/request.js：请求处理的文件。前段发给后端的请求都要通过这个文件处理。这个文件是 vue-element-admin 团队自己定义的一个工具类，是基于 axios 的。
- .env.development：看文件名，env 是 environment 的缩写。这个文件就是开发(development)环境的配置文件，存放一些开发环境下需要用的常量。
- env.production：同上，这个是生产(production)环境的配置文件。生产环境就是部署在服务器上的环境。
  
  备注说明一下，这两个环境区别在于：
  - vue-cli-service serve ：该命令启动的是服务，也就是运行了开发环境，启动之后在自己电脑上可以使用 localhost:xxxx 打开网站。
  - vue-cli-service build：该命令是建立，也就是打包，运行之后会将所有的开发代码打包到一个文件夹（默认 dist），然后需要将该文件夹下的资源和代码上传到服务器之后，访问服务器的 ip+端口打开网站。
  
  而这两个命令一般都会在 package.json 文件中，script 属性下配置一个名称：
```
"scripts": {
    "dev": "vue-cli-service serve",
    "lint": "eslint --ext .js,.vue src",
    "build:prod": "vue-cli-service build"
  },
```
  这时，运行 npm run dev 就是调用了 dev 命令，也就是 vue-cli-service serve 命令，启动了开发环境，就会加载 env.development 开发环境配置文件中的常量；npm run build:prod 也是同理，但是会加载 env.production 环境配置文件中的常量。
以开发环境为例，代理跳转的大致流程如下：
- npm run dev 启动开发环境服务，加载 .env.development 文件
```
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = 'http://xxx.xxx.xxx.xxx:8088'
```
  - BASE_API 这里我配置的是 SpringBoot 服务的地址，看过前几篇文章的应该记得我之前配置的是 8080 端口，这里为什么改成了 8088？是因为我服务器上还装了一些其他东西，8080 被占用了。
  - 不建议使用 8080、5000、之类的…👿豹子号。如果启动失败的话还是建议先检查一下是不是端口冲突了，服务这个东西太多了，并不是每个服务的默认端口都能记得的。
- 启动项目，进入页面，访问后端 SpringBoot 的接口，比如查询用户：
```
export function getInfo() {
  return request({
    url: '/user/selectOne',
    method: 'get'
  })
}
```
- 这里的 request 就来源于 vue-element-admin 自定义的工具类 src/utils/request.js ，进入查看，有这样一段代码：
```
// create an axios instance
const service = axios.create({
  baseURL: '/api', // process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
```
  - 这里 baseURL 就是基础的 URL，也就是最终 request 中访问的 URL 会是 baseURL + requestURL
  - baseURL 在 vue-element-admin 中的值原本是 process.env.VUE_APP_BASE_API，process.env 的意思就是当前的进程环境，我刚才启动的开发环境，这里 process.env 指向的就是 .env.development 文件，.VUE_APP_BASE_API 的值就是 .env.development 文件中 VUE_APP_BASE_API 的值
  - 之前的文章中，baseURL 配置了空字符串，这里改为 /api 的原因是：1. 如果这里还是用空字串，Nginx 中配置完后可能会导致访问页面直接跳转到服务； 2. /api 用来区分不同的后端服务，后续有可能会存在多个服务。
  - 到这里，访问的链接就会被拼接为 /api/user/selectOne，前面呢？当然是目前环境的地址（切记，这里说的当前环境是前端环境，就是浏览器中的地址+端口，而不是SpringBoot部署的地址，我的端口是80），完整的地址其实就是 http://xxx.xxx.xxx.xxx:80/api/user/selectOne，
接下来，需要去 Ubuntu 上，找到 Nginx，修改配置文件
- 执行 cd /etc/nginx/sites-enabled 进入配置文件所在目录，忘记来了 nginx 安装在哪里的可以通过 whereis nginx 命令查询，不同版本的配置文件目录略有不同，但都大同小异。
- 打开该目录下 default 配置文件（不会打开的看前面文章或者自行百度，不重复说）
- 修改配置文件如下：
```
# 之前配置的前端 vue-element-admin 项目环境，这里不用修改
location / {
	root /opt/xiaodudu_web/yuki;
	# First attempt to serve request as file, then
	# as directory, then fall back to displaying a 404.
	try_files $uri $uri/ =404;
}
# 本次修改 #
location /api/ {	# /api/ 就是要匹配的路由
	# 配置代理解决跨域
	proxy_pass http://xxx.xxx.xxx.xxx:8088/;		# SpringBoot 服务地址
 }
```
  这里的意思就是，遇到请求 url 中的 /api/，使用代理跳转到 http://xxx.xxx.xxx.xxx:8088
  例如：上面的 /api/user/selectOne，因为请求以 /api 开头，于是会被这个 location 匹配到从而进入代理，最终实际访问的地址就是 http//xxx.xxx.xxx.xxx:8088/user/selectOne
  换言之，上面的例子可以简单的理解为： 80 端口（Web 服务）下 /api 形式的 url 会被代理到 8088 端口（SpringBoot 服务）下，但因为页面和 request 都是 80 端口发起的，所以跨域自然就消失了。
多说一句，/ 斜杠这个符号一定要留意。
- baseUrl 中是 /api 的，nginx 配置中一定要匹配 /api，或者 /api/ 之类等等（以斜杠开头），否则会匹配不到。
- nginx 配置中 /api 和 /api/ 的区别（后面有没有斜杠）、还有 proxy_pass 后面连接中的 url 末尾的斜杠的区别。主要分两种：
  - proxy_pass 对应的 url 末尾无斜杠的（就是以端口号结尾的），例如： http://xx.xx.xx.xx:8088
    这种称为不带 url ，nginx 处理时会保留 location 中的路径：
```
location /api/ {
	proxy_pass http://xx.xx.xx.xx:8088;
}
```
    在访问 /api/user/selectOne 时就会代理到 http://xx.xx.xx.xx:8080/api/user/selectOne
  - proxy_pass 对应的 url 末尾有斜杠（或斜杠+其他内容）的，例如： http://xx.xx.xx.xx:8088/ 或者 http://xx.xx.xx.xx:8088/hello
    这种称为带 url，nginx 处理时会完全替换：
```
location /api/ {
	proxy_pass http://xx.xx.xx.xx:8088/;
}
```
    在访问 /api/user/selectOne 时就会代理到 http://xx.xx.xx.xx:8080/user/selectOne（/api/ 被替换为 http://xx.xx.xx.xx:8088/）
```
location /api {
	proxy_pass http://xx.xx.xx.xx:8088/hello;
}
```
    在访问 /api/user/selectOne 时就会代理到 http://xx.xx.xx.xx:8080/hello/user/selectOne（/api 被替换为 http://xx.xx.xx.xx:8088/hello）