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

「爱情、让人受尽委屈。」 2024-04-20 00:57 108阅读 0赞

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

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

## 1. 也曾经上过线 ##

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

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

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

## 2. 重新上线 ##

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

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

*  [vblog.itboyhub.com][]
 *  [vhr.itboyhub.com][]

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

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

**[微人事][Link 1]**

![format_png][]

**[V 部落][V]**

![format_png 1][]

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

## 3. 技能树 ##

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

### 3.1 部署方案选择 ###

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

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

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

### 3.2 域名映射 ###

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

![format_png 2][]

### 3.3 启动 Spring Boot ###

将[微人事][Link 1]和 [V 部落][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]

这里我们主要来看看 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 字符时，将请求转发到 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 获取）。

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

*  [vblog.itboyhub.com][]
 *  [vhr.itboyhub.com][]

## 4. 结语 ##

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

*  [https://github.com/lenve/vhr][https_github.com_lenve_vhr]
 *  [https://github.com/lenve/VBlog][https_github.com_lenve_VBlog]

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

![format_png 3][]

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

*  [微人事项目部署视频教程][Link 2]

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

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

[Link 1]: https://mp.weixin.qq.com/s/6_D0srW4inv2ZbukN4ivBw
[V]: https://mp.weixin.qq.com/s/VRzcunh9flTJ_EZSBJrfYw
[vblog.itboyhub.com]: http://vblog.itboyhub.com
[vhr.itboyhub.com]: http://vhr.itboyhub.com
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzQ3ODEwLzIwMTkwOS83NDc4MTAtMjAxOTA5MjAwOTQzMzkxMzgtMjExMjU2NDE0MS5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzQ3ODEwLzIwMTkwOS83NDc4MTAtMjAxOTA5MjAwOTQzNTIzNzItMTEzNTU3MDI4Mi5wbmc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzQ3ODEwLzIwMTkwOS83NDc4MTAtMjAxOTA5MjAwOTQ0MDczMDctNjU4MzY4MzkzLnBuZw?x-oss-process=image/format,png
[Nginx]: https://mp.weixin.qq.com/s/ZN07_3ImmyRU0NQaqzcazQ
[https_github.com_lenve_vhr]: https://github.com/lenve/vhr
[https_github.com_lenve_VBlog]: https://github.com/lenve/VBlog
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzQ3ODEwLzIwMTkwOS83NDc4MTAtMjAxOTA5MjAwOTQ0MjUwOTQtMTE5NTkwOTg0Ni5wbmc?x-oss-process=image/format,png
[Link 2]: https://mp.weixin.qq.com/s/qN01Le434FWom0c3jqiQmA
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzQ3ODEwLzIwMTkwOS83NDc4MTAtMjAxOTA5MjAwOTQ1MDY2MDMtMTA5MTA5MzQwMS5wbmc?x-oss-process=image/format,png