[系统运维]Ubuntu 下配置 Nginx 解决部署环境下 SpringBoot + Vue 的跨域及通信

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）