最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

【天天新视野】SpringBoot Wiki项目部署记录

来源：博客园

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


(资料图片)

一.部署过程

准备：一个已经安装好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.199IP地址改成 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才能连上。

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

关键词： 服务器的 静态页面 服务器上