兩個開源的 Spring Boot + Vue 前后端分離項目


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

松哥第一時間想到趕緊把微人事和 V 部落部署上去,我知道很多小伙伴已經等不及了。

1. 也曾經上過線

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

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

失聯之后,因為工作比較忙,我也就懶得去折騰了,所以導致微人事和 V 部落大家在很長一段時間內無法在線查看效果。

2. 重新上線

最近因為有一些其他的計划,於是購買了阿里雲服務,完事之后就是備案,所有東西都搞定之后,想着先把微人事和 V 部落部署起來,方便大家查看效果。

說干就干,我首先規划了兩個二級域名:

這兩個二級域名分別用來部署 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 的配置。

由於有兩個二級域名,而且未來服務器還要配置其他域名,因此域名要能夠做到動態解析,因此在具體配置如下:

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 獲取​)。

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

4. 結語

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

如果你要學習 Spring Boot + Vue 前后端分離項目,這兩個是不可多得的好資料。 其中 V 部落無論是從技術點還是業務上來說,都要簡單一些,所以如果你是新手,可以先看看 V 部落。微人事雖然稍微復雜一點,但好在松哥配有完整的開發文檔,照着開發文檔,相信大家也能理解大部分的功能。文檔如下:

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

https://www.cnblogs.com/lenve/p/11555048.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM