喜大普奔，兩個開源的 Spring Boot + Vue 前后端分離項目可以在線體驗了

折騰了一周的域名備案昨天終于搞定了。

松哥第一時間想到趕緊把微人事 <https://mp.weixin.qq.com/s/6_D0srW4inv2ZbukN4ivBw>和 V 部落
<https://mp.weixin.qq.com/s/VRzcunh9flTJ_EZSBJrfYw>部署上去，我知道很多小伙伴已經(jīng)等不及了。

1. 也曾經(jīng)上過線


其實這兩個項目當(dāng)時剛做好的時候，我就把它們部署到服務(wù)器上了，以幫助小伙伴們更好的查看效果。但是那個是一臺國外服務(wù)器，之所以購買國外服務(wù)器，主要是嫌國內(nèi)備案麻煩，當(dāng)然也有其他大家都懂的原因。

國外服務(wù)器有方便的地方，同時也有很多不便，例如網(wǎng)絡(luò)不穩(wěn)，隨時有失聯(lián)的風(fēng)險。所以我在 2018
年年初，雖然把這兩個項目都部署在服務(wù)器上，但是很多小伙伴的訪問體驗都不好，主要還是網(wǎng)絡(luò)的問題。后來一段時間，經(jīng)過幾輪圍剿與反圍剿，這臺服務(wù)器就徹底和松哥失聯(lián)了。

失聯(lián)之后，因為工作比較忙，我也就懶得去折騰了，所以導(dǎo)致微人事
<https://mp.weixin.qq.com/s/6_D0srW4inv2ZbukN4ivBw>和 V 部落
<https://mp.weixin.qq.com/s/VRzcunh9flTJ_EZSBJrfYw>大家在很長一段時間內(nèi)無法在線查看效果。

2. 重新上線

最近因為有一些其他的計劃，于是購買了阿里云服務(wù)，完事之后就是備案，所有東西都搞定之后，想著先把微人事
<https://mp.weixin.qq.com/s/6_D0srW4inv2ZbukN4ivBw>和 V 部落
<https://mp.weixin.qq.com/s/VRzcunh9flTJ_EZSBJrfYw>部署起來，方便大家查看效果。

說干就干，我首先規(guī)劃了兩個二級域名：

* vblog.itboyhub.com <http://vblog.itboyhub.com>
* vhr.itboyhub.com <http://vhr.itboyhub.com>
這兩個二級域名分別用來部署 V 部落 <https://mp.weixin.qq.com/s/VRzcunh9flTJ_EZSBJrfYw>和微人事
<https://mp.weixin.qq.com/s/6_D0srW4inv2ZbukN4ivBw>。

大家可以通過這兩個地址查看效果：

微人事 <https://mp.weixin.qq.com/s/6_D0srW4inv2ZbukN4ivBw>



V 部落 <https://mp.weixin.qq.com/s/VRzcunh9flTJ_EZSBJrfYw>




為了確保每位小伙伴都能看到完整的演示效果，防止有的小伙伴不慎把所有數(shù)據(jù)清空了，導(dǎo)致其他小伙伴啥都看不到，我只開通了演示賬戶的查詢和部分字段的更新權(quán)限，因此大家在查看演示效果時，可能會有一些涉及到增刪改的操作會執(zhí)行失敗，請勿見怪，將項目部署到本地運行之后，就可以查看完整效果了。

3. 技能樹

既然都寫到這兒了，就和大家聊一聊這兩個部署是怎么實現(xiàn)的。

3.1 部署方案選擇

大家知道前后端分離部署的時候，我們有兩種不同的方案：

* 一種就是將前端項目打包編譯之后，放到后端項目中（例如 Spring Boot 項目的 src/main/resources/static 目錄下）
* 另外一種則是將前端打包之后的靜態(tài)資源用 Nginx 來部署，后端單獨部署只需要單純的提供接口即可。
一般在公司項目中，我們更多的是采用后者。不過松哥這里部署為了省事，我采用了第一種方案。（以后抽空我會和大家聊聊第二種部署方案）

3.2 域名映射

域名映射這塊簡單，登錄阿里云后臺，添加兩個 A 記錄即可。



3.3 啟動 Spring Boot

將微人事 <https://mp.weixin.qq.com/s/6_D0srW4inv2ZbukN4ivBw>和 V 部落
<https://mp.weixin.qq.com/s/VRzcunh9flTJ_EZSBJrfYw>
分別打包上傳到服務(wù)器，這個過程應(yīng)該就不用我多說了吧，然后分別啟動這兩個項目，兩個項目的默認(rèn)端口分別是 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
兩個端口來分別訪問這兩個項目了。但是這還沒達(dá)到松哥的目標(biāo)，我想通過二級域名來訪問，并且想通過 80 端口來訪問，這就要借助 Nginx 了。

注意

啟動完成后，大家需要登錄阿里云后臺，確認(rèn) 8081 和 8082 端口已經(jīng)開啟。

3.4 Nginx 配置

Nginx 的基本用法，大家可以參考松哥的這篇舊文：

* Nginx 極簡入門教程！ <https://mp.weixin.qq.com/s/ZN07_3ImmyRU0NQaqzcazQ>
這里我們主要來看看 Nginx 的配置。

由于有兩個二級域名，而且未來服務(wù)器還要配置其他域名，因此域名要能夠做到動態(tài)解析，因此在具體配置如下：
server { listen 80; server_name *.itboyhub.com; if ($http_host ~*
"^(.*?)\.itboyhub\.com$") { set $domain $1; } # 其他配置... }
* 首先監(jiān)聽的端口為 80
* 二級域名則用一個通配符 * 代替
* 接下來在 if 語句用，通過正則表達(dá)式提取出二級域名的名字，交給變量 $domain，以備后用。
接下來配置轉(zhuǎn)發(fā)規(guī)則：
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; }
* 當(dāng)定義的 $domain 中包含 vhr 字符時，將請求轉(zhuǎn)發(fā)到 http://itboyhub.com:8082
<http://itboyhub.com:8082>
* 當(dāng)定義的 $domain 中包含 vblog 字符時，將請求轉(zhuǎn)發(fā)到 http://itboyhub.com:8081
<http://itboyhub.com:8081>
* 最后再配置將代理服務(wù)器收到的用戶的信息傳到 real server 上
另一方面，由于默認(rèn)的后端首頁是 /index.html，如果用戶直接訪問 vblog.itboyhub.com
<http://vblog.itboyhub.com> 或者 vhr.itboyhub.com <http://vhr.itboyhub.com>
，會被權(quán)限管理機(jī)制攔截（會自動重定向到/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 / 之前進(jìn)行配置，這里兩個 if 的含義和前面的一樣，不再贅述。

OK，如此之后我們的配置就算是完成了（上面 nginx 完整的配置文件小伙伴可以在公眾號后臺回復(fù) nginx.conf 獲取?）。

接下來我們就可以通過如下兩個二級域名訪問這兩個開源項目了，小伙伴們趕緊試一把吧。

* vblog.itboyhub.com <http://vblog.itboyhub.com>
* vhr.itboyhub.com <http://vhr.itboyhub.com>
4. 結(jié)語

最后，再向小伙伴們安利一把這兩個開源項目：

* https://github.com/lenve/vhr <https://github.com/lenve/vhr>
* https://github.com/lenve/VBlog <https://github.com/lenve/VBlog>
如果你要學(xué)習(xí) Spring Boot + Vue 前后端分離項目，這兩個是不可多得的好資料。 其中 V
部落無論是從技術(shù)點還是業(yè)務(wù)上來說，都要簡單一些，所以如果你是新手，可以先看看 V
部落。微人事雖然稍微復(fù)雜一點，但好在松哥配有完整的開發(fā)文檔，照著開發(fā)文檔，相信大家也能理解大部分的功能。文檔如下：



如果大家在部署的過程中遇到問題，也可以參考松哥手把手的部署視頻：

* 微人事項目部署視頻教程 <https://mp.weixin.qq.com/s/qN01Le434FWom0c3jqiQmA>
好了，本文說到這里，小伙伴們有問題歡迎留言討論。

關(guān)注公眾號【江南一點雨】，專注于 Spring Boot+微服務(wù)以及前后端分離等全棧技術(shù)，定期視頻教程分享，關(guān)注后回復(fù) Java ，領(lǐng)取松哥為你精心準(zhǔn)備的
Java 干貨！

• ? 下一篇： K8S從懵圈到熟練 – 集群網(wǎng)絡(luò)詳解