喜大普奔，兩個開源的 Spring Boot + Vue 先後端分離項目能夠在線體驗了

時間 2019-12-01

標籤兩個開源 spring boot vue 後端分離項目能夠在線體驗欄目悠閒生活简体版

原文原文鏈接

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

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

1. 也曾經上過線

其實這兩個項目當時剛作好的時候，我就把它們部署到服務器上了，以幫助小夥伴們更好的查看效果。可是那個是一臺國外服務器，之因此購買國外服務器，主要是嫌國內備案麻煩，固然也有其餘你們都懂的緣由。java

國外服務器有方便的地方，同時也有不少不便，例如網絡不穩，隨時有失聯的風險。因此我在 2018 年年初，雖然把這兩個項目都部署在服務器上，可是不少小夥伴的訪問體驗都很差，主要仍是網絡的問題。後來一段時間，通過幾輪圍剿與反圍剿，這臺服務器就完全和鬆哥失聯了。node

失聯以後，由於工做比較忙，我也就懶得去折騰了，因此致使微人事和 V 部落你們在很長一段時間內沒法在線查看效果。nginx

2. 從新上線

最近由於有一些其餘的計劃，因而購買了阿里雲服務，完事以後就是備案，全部東西都搞定以後，想着先把微人事和 V 部落部署起來，方便你們查看效果。git

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

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

你們能夠經過這兩個地址查看效果：spring

微人事後端

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 字符時，將請求轉發到 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 獲取）。

接下來咱們就能夠經過以下兩個二級域名訪問這兩個開源項目了，小夥伴們趕忙試一把吧。