分享兩個(gè)開(kāi)源的SpringBoot+Vue前后端分離項(xiàng)目-創(chuàng)新互聯(lián)

這篇文章主要介紹“分享兩個(gè)開(kāi)源的Spring Boot + Vue前后端分離項(xiàng)目”，在日常操作中，相信很多人在分享兩個(gè)開(kāi)源的Spring Boot + Vue前后端分離項(xiàng)目問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”分享兩個(gè)開(kāi)源的Spring Boot + Vue前后端分離項(xiàng)目”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括江陵網(wǎng)站建設(shè)、江陵網(wǎng)站制作、江陵網(wǎng)頁(yè)制作以及江陵網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，江陵網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到江陵省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

首先規(guī)劃了兩個(gè)二級(jí)域名：

• vblog.itboyhub.com

• vhr.itboyhub.com

這兩個(gè)二級(jí)域名分別用來(lái)部署  V 部落和 微人事。

大家可以通過(guò)這兩個(gè)地址查看效果：

微人事

V 部落

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

技能樹(shù)

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

部署方案選擇

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

• 一種就是將前端項(xiàng)目打包編譯之后，放到后端項(xiàng)目中（例如 Spring Boot 項(xiàng)目的 src/main/resources/static 目錄下）

• 另外一種則是將前端打包之后的靜態(tài)資源用 Nginx 來(lái)部署，后端單獨(dú)部署只需要單純的提供接口即可。

一般在公司項(xiàng)目中，我們更多的是采用后者。不過(guò)松哥這里部署為了省事，我采用了第一種方案。（以后抽空我會(huì)和大家聊聊第二種部署方案）

域名映射

域名映射這塊簡(jiǎn)單，登錄阿里云后臺(tái)，添加兩個(gè) A 記錄即可。

啟動(dòng) Spring Boot

將 微人事和  V 部落分別打包上傳到服務(wù)器，這個(gè)過(guò)程應(yīng)該就不用我多說(shuō)了吧，然后分別啟動(dòng)這兩個(gè)項(xiàng)目，兩個(gè)項(xiàng)目的默認(rèn)端口分別是 8081 和 8082，命令如下：

nohup java -jar vblog.jar > vblog.log &nohup java -jar vhr.jar > vhr.log &

將兩個(gè)項(xiàng)目的運(yùn)行日志分別寫(xiě)入到 vblog.log 和 vhr.log 文件中。

啟動(dòng)成功之后，我們就可以通過(guò) itboyhub.com:8081 和 itboyhub.com:8082 兩個(gè)端口來(lái)分別訪問(wèn)這兩個(gè)項(xiàng)目了。但是這還沒(méi)達(dá)到松哥的目標(biāo)，我想通過(guò)二級(jí)域名來(lái)訪問(wèn)，并且想通過(guò) 80 端口來(lái)訪問(wèn)，這就要借助 Nginx 了。

注意

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

Nginx 配置

這里我們主要來(lái)看看 Nginx 的配置。

由于有兩個(gè)二級(jí)域名，而且未來(lái)服務(wù)器還要配置其他域名，因此域名要能夠做到動(dòng)態(tài)解析，因此在具體配置如下：

server {    listen       80;    server_name  *.itboyhub.com;    if ($http_host ~* "^(.*?)\.itboyhub\.com$") {            set $domain $1;
    }    # 其他配置...}

• 首先監(jiān)聽(tīng)的端口為 80

• 二級(jí)域名則用一個(gè)通配符 * 代替

• 接下來(lái)在 if 語(yǔ)句用，通過(guò)正則表達(dá)式提取出二級(jí)域名的名字，交給變量 $domain，以備后用。

接下來(lái)配置轉(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 字符時(shí)，將請(qǐng)求轉(zhuǎn)發(fā)到  http://itboyhub.com:8082

• 當(dāng)定義的 $domain 中包含 vblog 字符時(shí)，將請(qǐng)求轉(zhuǎn)發(fā)到  http://itboyhub.com:8081

• 最后再配置將代理服務(wù)器收到的用戶的信息傳到 real server 上

另一方面，由于默認(rèn)的后端首頁(yè)是 /index.html，如果用戶直接訪問(wèn)  vblog.itboyhub.com 或者  vhr.itboyhub.com，會(huì)被權(quán)限管理機(jī)制攔截（會(huì)自動(dòng)重定向到 /login_p），因此，如果用戶訪問(wèn)地址中沒(méi)有 /index.html ，則自動(dòng)添加上 /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)行配置，這里兩個(gè) if 的含義和前面的一樣，不再贅述。

到此，關(guān)于“分享兩個(gè)開(kāi)源的Spring Boot + Vue前后端分離項(xiàng)目”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

當(dāng)前文章：分享兩個(gè)開(kāi)源的SpringBoot+Vue前后端分離項(xiàng)目-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://www.muchs.cn/article12/ceedgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、小程序開(kāi)發(fā)、網(wǎng)站營(yíng)銷(xiāo)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)