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

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

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

1. 也曾经上过线

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

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

失联以后，由于工做比较忙，我也就懒得去折腾了，因此致使微人事和 V 部落你们在很长一段时间内没法在线查看效果。

2. 从新上线

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

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

• vblog.itboyhub.com
• vhr.itboyhub.com

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

你们能够经过这两个地址查看效果：

微人事

V 部落

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

3. 技能树

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

3.1 部署方案选择

你们知道先后端分离部署的时候，咱们有两种不一样的方案：

• 一种就是将前端项目打包编译以后，放到后端项目中（例如 Spring Boot 项目的 src/main/resources/static 目录下）
• 另一种则是将前端打包以后的静态资源用 Nginx 来部署，后端单独部署只须要单纯的提供接口便可。

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

3.2 域名映射

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

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 极简入门教程！

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

因为有两个二级域名，并且将来服务器还要配置其余域名，所以域名要可以作到动态解析，所以在具体配置以下：

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

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

• 首先监听的端口为 80
• 二级域名则用一个通配符 * 代替
• 接下来在 if 语句用，经过正则表达式提取出二级域名的名字，交给变量 $domain，以备后用。

接下来配置转发规则：

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 字符时，将请求转发到 itboyhub.com:8082
• 当定义的 $domain 中包含 vblog 字符时，将请求转发到 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 获取​）。

接下来咱们就能够经过以下两个二级域名访问这两个开源项目了，小伙伴们赶忙试一把吧。

• vblog.itboyhub.com
• vhr.itboyhub.com

4. 结语

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

• github.com/lenve/vhr
• github.com/lenve/VBlog

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

若是你们在部署的过程当中遇到问题，也能够参考松哥手把手的部署视频：

• 微人事项目部署视频教程

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

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