41

喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

 4 years ago
source link: https://www.tuicool.com/articles/bArERj6
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

折腾了一周的域名备案昨天终于搞定了。

松哥第一时间想到赶紧把 微人事 和 V 部落 部署上去，我知道很多小伙伴已经等不及了。

1. 也曾经上过线

其实这两个项目当时刚做好的时候，我就把它们部署到服务器上了，以帮助小伙伴们更好的查看效果。但是那个是一台国外服务器，之所以购买国外服务器，主要是嫌国内备案麻烦，当然也有其他大家都懂的原因。

国外服务器有方便的地方，同时也有很多不便，例如网络不稳，随时有失联的风险。所以我在 2018 年年初，虽然把这两个项目都部署在服务器上，但是很多小伙伴的访问体验都不好，主要还是网络的问题。后来一段时间，经过几轮围剿与反围剿，这台服务器就彻底和松哥失联了。

失联之后，因为工作比较忙，我也就懒得去折腾了，所以导致 微人事 和 V 部落 大家在很长一段时间内无法在线查看效果。

2. 重新上线

最近因为有一些其他的计划，于是购买了阿里云服务，完事之后就是备案，所有东西都搞定之后，想着先把 微人事 和 V 部落 部署起来，方便大家查看效果。

说干就干，我首先规划了两个二级域名：

这两个二级域名分别用来部署 V 部落 和 微人事 。

大家可以通过这两个地址查看效果：

微人事

byiQNjZ.png!web

V 部落

ey2eAzV.png!web

为了确保每位小伙伴都能看到完整的演示效果，防止有的小伙伴不慎把所有数据清空了，导致其他小伙伴啥都看不到，我只开通了演示账户的查询和部分字段的更新权限，因此大家在查看演示效果时，可能会有一些涉及到增删改的操作会执行失败，请勿见怪，将项目部署到本地运行之后，就可以查看完整效果了。

3. 技能树

既然都写到这儿了，就和大家聊一聊这两个部署是怎么实现的。

3.1 部署方案选择

大家知道前后端分离部署的时候，我们有两种不同的方案：

src/main/resources/static

一般在公司项目中，我们更多的是采用后者。不过松哥这里部署为了省事，我采用了第一种方案。（以后抽空我会和大家聊聊第二种部署方案）

3.2 域名映射

域名映射这块简单，登录阿里云后台，添加两个 A 记录即可。

qqqeAjf.png!web

3.3 启动 Spring Boot

将 微人事 和 V 部落 分别打包上传到服务器，这个过程应该就不用我多说了吧，然后分别启动这两个项目，两个项目的默认端口分别是 8081 和 8082，命令如下： 

nohup java -jar vblog.jar > vblog.log &
nohup java -jar vhr.jar > vhr.log &

将两个项目的运行日志分别写入到 vblog.log 和 vhr.log 文件中。

启动成功之后，我们就可以通过 itboyhub.com:8081 和 itboyhub.com:8082 两个端口来分别访问这两个项目了。但是这还没达到松哥的目标，我想通过二级域名来访问，并且想通过 80 端口来访问，这就要借助 Nginx 了。

注意

启动完成后，大家需要登录阿里云后台，确认 8081 和 8082 端口已经开启。

3.4 Nginx 配置

Nginx 的基本用法，大家可以参考松哥的这篇旧文：

这里我们主要来看看 Nginx 的配置。

由于有两个二级域名，而且未来服务器还要配置其他域名，因此域名要能够做到动态解析，因此在具体配置如下：

server {
    listen       80;
    server_name  *.itboyhub.com;

    if ($http_host ~* "^(.*?)\.itboyhub\.com$") {
            set $domain $1;
    }
    # 其他配置...
}
*

接下来配置转发规则：

location / {
  if ($domain ~* "vhr") {
    proxy_pass http://itboyhub.com:8082;
  }
  if ($domain ~* "vblog") {
    proxy_pass http://itboyhub.com:8081;
  }
  
  tcp_nodelay     on;
  proxy_set_header Host            $host;
  proxy_set_header X-Real-IP       $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  index index.html;
}
  • 当定义的 $domain 中包含 vhr 字符时，将请求转发到 http://itboyhub.com :8082
  • 当定义的 $domain 中包含 vblog 字符时，将请求转发到 http://itboyhub.com :8081
  • 最后再配置将代理服务器收到的用户的信息传到 real server 上

另一方面，由于默认的后端首页是 /index.html ，如果用户直接访问 vblog.itboyhub.com 或者 vhr.itboyhub.com ，会被权限管理机制拦截（会自动重定向到 /login_p ），因此，如果用户访问地址中没有 /index.html ，则自动添加上 /index.html ，配置如下： 

location /login_p {
   if ($domain ~* "vhr") {
     rewrite ^/(.*)$ http://vhr.itboyhub.com/index.html permanent;
   }
   if ($domain ~* "vblog") {
     rewrite ^/(.*)$ http://vblog.itboyhub.com/index.html permanent;
   }
}

注意，这行配置在 location / 之前进行配置，这里两个 if 的含义和前面的一样，不再赘述。

OK，如此之后我们的配置就算是完成了（上面 nginx 完整的配置文件小伙伴可以在公众号后台回复 nginx.conf 获取​）。

接下来我们就可以通过如下两个二级域名访问这两个开源项目了，小伙伴们赶紧试一把吧。

4. 结语

最后，再向小伙伴们安利一把这两个开源项目：

如果你要学习 Spring Boot + Vue 前后端分离项目，这两个是不可多得的好资料。 其中 V 部落无论是从技术点还是业务上来说，都要简单一些，所以如果你是新手，可以先看看 V 部落。微人事虽然稍微复杂一点，但好在松哥配有完整的开发文档，照着开发文档，相信大家也能理解大部分的功能。文档如下：

2aeIjie.png!web

如果大家在部署的过程中遇到问题，也可以参考松哥手把手的部署视频：

好了，本文说到这里，小伙伴们有问题欢迎留言讨论。

关注公众号【江南一点雨】，专注于 Spring Boot+微服务以及前后端分离等全栈技术，定期视频教程分享，关注后回复 Java ，领取松哥为你精心准备的 Java 干货！

Q3eeAnE.png!web


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK