springbootwiki项目部署记录(代码片段)

​学习课程有一段时间之后，想起买课的初衷是为了学习如何在服务器上部署前后端分离的项目，因此花了几天时间研究，最后功夫不负有心人。期间还是遇到很多问题，特此记录。

一.部署过程

准备：一个已经安装好JDK环境，Nginx的配有公网IP的云服务，数据库环境也不用担心，也就是前后端打包都能正常在服务器上启动起来，关键就是确定 Nginx 的配置。

​1.1 Nginx配置

​ 部署的关键其实就是配置Nginx。前端调用的接口经过Nginx反向代理转发到后端。在课程中，Nginx的配置文件除了 Nginx.conf 之外。还可以在 conf.d 目录下面新建各种 XXX.conf ，也会生效。但是，我安装的 Nginx 版本为1.13.1，是没有此目录。实际上也无需，只在 Nginx.conf 里配置即可，也就是多几个 location 配置。

下面是成功实现只用公网IP即可成功部署之后的 Nginx.conf 主要需要变动的内容，其中关键的部分都有注释。

server 
        # Nginx监听端口，从下面前端的配置来看，也是Nginx作为web服务器的静态页面的访问端口
        listen       80;
        # 示例公网IP：乱写的，如有雷同，概不负责
        server_name 100.11.22.199;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
	    # 1.代理前端项目地址，即前端Vue框架打的静态文件存放到 /root/web/目录。
        location / 
            alias  /root/web/;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        
        
        # 2. 将前端所有调用后端的带有 **/api/** URL地址转发到本服务器的8880端口，
        # 其中8880端口即后端springboot服务端口
        # 比如 前端调后端的某个接口地址是 http://100.11.22.199/api/user/login，那么Nginx就 转发到服务器 的
        # http://127.0.0.1:8880/user/login接口。
        location /api/ 
        	# 3.这里的127.0.0.1写成localhost也可以，但是不能写成公网IP。注意端口号后面要加上/
            proxy_pass http://127.0.0.1:8880/;
            # 下面这些时常规加的一些配置
            proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_max_temp_file_size 300m;
                client_max_body_size  1024M;
                proxy_http_version  1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_connect_timeout 300s;
                proxy_send_timeout 300s;
                proxy_read_timeout 240s;
        
        ......
  
        
            

配置文件的增加的配置信息在对应注释中已经说明，下面说一下前端代码中需要配置的操作：

1.2 前端打包配置

​ 由于 locaiton /api/ ...... 转发匹配规则是前端调用后端接口的 URL地址都得有 /api/ 。因此前端统一配置的 baseURL就也得加上统一前缀 /api，以示区分。在课程的 Wiki项目中就是 .env.prod文件中 的 VUE_APP_SERVER 需要改成VUE_APP_SERVER=http://100.11.22.199:80/api。这里 是加 /api 还是 /api/ 主要看前端调的接口地址 是 类似 /user/login，还是 user/login。注意避免多加了一个/。

这样访问页面前端就能正常调用后端的接口了。基本上就部署完成了。

1.3. 配置域名

如果已经有成功解析到公网IP的域名，那么在两个地方修改就可以成功配置域名，并不必须如课程中老师要解析到两个二级域名到同一个公网IP：

1. 前端的 VUE_APP_SERVER=http://100.11.22.199:80/api IP地址用域名替换即可，比如我的域名是yourDomain.top，就是 http://yourDomain.top:80/api 。

2. Nginx.conf 中的 server_name 100.11.22.199 IP地址改成 www.youDomain.top。即域名前面得加个 www。记得重启Nginx生效。

   以上两步之后，就可以用域名代替IP访问，前端调后端地址也是通过域名访问。

四. 关键问题解释

3.1 为什么 前端配置调用后端的的统一URL 即VUE_APP_SERVER=http://100.11.22.199:80/api

答：ip不用解释，然后/api 在 上面Nginx配置的时候也已经说的很清楚了。那么端口为什么是80呢。因为要避免跨域。

简单来说，我们的项目前端静态页面访问完整的链接是 http://100.11.22.199:80/ ，端口是80。那么浏览器的同源策略就要求，这个页面中发送到后端的Ajax请求必须也类似 http://100.11.22.199:80/** ，协议，主机IP，端口全部一样，否则就会引报CORS跨域问题，浏览器会直接限制前端发送这样的接口到后端，这就是 VUE_APP_SERVER的端口设置为80的原因。更详细的理论知识见掘金-那些年我们“跨”过的“域”(接口篇)。

然后，后端的wiki springBoot应用启动的端口是8880。由此，就需要在Nginx进行转发，将:80/api/端口的请求，转发给

http://127.0.0.1:8880/; 。因此 Nginx 就像是充电器的转接头一样，连接前端和后端的两头，将前端的请求转发到后端。

那么野生吴彦祖们又要问了：我不想用80端口，想改成其他端口吗，可以吗？

答：可以，首先找一个服务器还没用过的端口，怎么查，看我的这个帖子 JavaWeb开发在服务器常用命令 。里面可以在端口 部分找到如何查看目前服务器已经用的端口。比如我想用8989，查了没有服务在用。然后先在防火墙把这个端口永久放开，如果是云服务器，还得把安全组对应的TCP:8989放开，这样从外网浏览器就可以访问了。之后在Nginx 里面把监听端口 改成 8989。然后和上面一样，把前端BaseURL也配置成 8989。就可以了。

3.2 为什么 proxy_pass 的 配置是 http://127.0.0.1:8880/ 或者 http://localhost:8880/

答：proxy_pass http://127.0.0.1:8880/; 端口是8880就不赘述了。这里的主机地址必须是127.0.0.1或者localhost，也就是 Nginx 代理的是这台云服务器。如果是填的是公网 IP，那么在 调后端接口就会报 502 bad gateway 或 504 gateway time-out。其实查看Nginx error日志，发现 错误日志输出的是 Connection timed out) while connecting to upstream。表明 Nginx 无法连接的upstream server。upstream server 就是 http://100.11.22.199:8880/。也就是 Nginx 通过 公网IP连不上服务器的，只能通过自己本地localhost才能连上。

最后，如果本文对你有帮助，还望三连支持，你们的鼓励是对我继续写作的支持。