折騰了一週的域名備案昨天終於搞定了。 鬆哥第一時間想到趕緊把[微人事](https://mp.weixin.qq.com/s/6_D0srW4inv2ZbukN4ivBw)和 [V 部落](https://mp.weixin.qq.com/s/VRzcunh9flTJ_EZSBJrfYw)部署上去，我知道很多小夥伴已經等不及了。 ## 1. 也曾經上過線 其實這兩個專案當時剛做好的時候，我就把它們部署到伺服器上了，以幫助小夥伴們更好的檢視效果。但是那個是一臺國外伺服器，之所以購買國外伺服器，主要是嫌國內備案麻煩，當然也有其他大家都懂的原因。 國外伺服器有方便的地方，同時也有很多不便，例如網路不穩，隨時有失聯的風險。所以我在 2018 年年初，雖然把這兩個專案都部署在伺服器上，但是很多小夥伴的訪問體驗都不好，主要還是網路的問題。後來一段時間，經過幾輪圍剿與反圍剿，這臺伺服器就徹底和鬆哥失聯了。 失聯之後，因為工作比較忙，我也就懶得去折騰了，所以導致[微人事](https://mp.weixin.qq.com/s/6_D0srW4inv2ZbukN4ivBw)和 [V 部落](https://mp.weixin.qq.com/s/VRzcunh9flTJ_EZSBJrfYw)大家在很長一段時間內無法線上檢視效果。 ## 2. 重新上線 最近因為有一些其他的計劃，於是購買了阿里雲服務，完事之後就是備案，所有東西都搞定之後，想著先把[微人事](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) 這兩個二級域名分別用來部署 [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)**  為了確保每位小夥伴都能看到完整的演示效果，防止有的小夥伴不慎把所有資料清空了，導致其他小夥伴啥都看不到，我只開通了演示賬戶的查詢和部分欄位的更新許可權，因此大家在檢視演示效果時，可能會有一些涉及到增刪改的操作會執行失敗，請勿見怪，將專案部署到本地執行之後，就可以檢視完整效果了。 ## 3. 技能樹 既然都寫到這兒了，就和大家聊一聊這兩個部署是怎麼實現的。 ### 3.1 部署方案選擇 大家知道前後端分離部署的時候，我們有兩種不同的方案： - 一種就是將前端專案打包編譯之後，放到後端專案中（例如 Spring Boot 專案的 `src/main/resources/static` 目錄下） - 另外一種則是將前端打包之後的靜態資源用 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)分別打包上傳到伺服器，這個過程應該就不用我多說了吧，然後分別啟動這兩個專案，兩個專案的預設埠分別是 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 極簡入門教程！](https://mp.weixin.qq.com/s/ZN07_3ImmyRU0NQaqzcazQ) 這裡我們主要來看看 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](http://vblog.itboyhub.com) 或者 [vhr.itboyhub.com](http://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](http://vblog.itboyhub.com) - [vhr.itboyhub.com](http://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 部落。微人事雖然稍微複雜一點，但好在鬆哥配有完整的開發文件，照著開發文件，相信大家也能理解大部分的功能。文件如下：  如果大家在部署的過程中遇到問題，也可以參考鬆哥手把手的部署視訊： - [微人事專案部署視訊教程](https://mp.weixin.qq.com/s/qN01Le434FWom0c3jqiQmA) 好了，本文說到這裡，小夥伴們有問題歡迎留言討論。 關注公眾號【江南一點雨】，專注於 Spring Boot+微服務以及前後端分離等全棧技術，定期視訊教程分享，關注後回覆 Java ，領取鬆哥為你精心準備的 Java 乾貨！ ![](https://img2018.cnblogs.com/blog/747810/201909/747810-20190920094506603-1091093