喜大普奔，兩個開源的 Spring Boot + Vue 前後端分離專案可以線上體驗了

江南一點雨發表於2019-09-20

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

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

1. 也曾經上過線

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

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

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

2. 重新上線

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

說幹就幹，我首先規劃了兩個二級域名：

這兩個二級域名分別用來部署 V 部落和微人事。

大家可以通過這兩個地址檢視效果：

微人事

喜大普奔，兩個開源的 Spring Boot + Vue 前後端分離專案可以線上體驗了

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 獲取）。

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