“

大家好，我是雄雄，歡迎關(guān)注微信公眾號(hào)：????雄雄的小課堂????

”

今天，給大家分享的是，Springboot+Vue項(xiàng)目如何部署上線的詳細(xì)步驟。

代碼編輯器

前端：Webstorm 2021.1.2

后端：IntelliJ IDEA 2021.1.2

所用技術(shù)

前端：avue

后端：Springboot

準(zhǔn)備工作

• 1.首先你先需要有一臺(tái)服務(wù)器，直接去各大云廠買一臺(tái)即可，我這邊使用的是騰訊云服務(wù)器，2H4G5M的，已經(jīng)部署了5個(gè)項(xiàng)目了，都很流暢，最后需要備案

• 2.去各大云廠注冊(cè)個(gè)域名，用來訪問項(xiàng)目，域名很便宜，幾十塊錢能買一年的。解析到你的服務(wù)器下，域名最后也需要備案。

打包項(xiàng)目

1.在IntelliJ IDEA 2021.1.2以下簡(jiǎn)稱idea中，點(diǎn)擊菜單欄中的視圖--》工具窗口--》Maven--》打開項(xiàng)目--》生命周期--》雙擊clean,清除目錄中的生成結(jié)果。

2.雙擊下面的package開始打包，等控制臺(tái)中日志記錄運(yùn)行完之后，會(huì)發(fā)現(xiàn)此時(shí)項(xiàng)目中多了個(gè)target的目錄，改目錄中有個(gè).jar文件就是我們的需要往服務(wù)器中傳的。

在idea中打包springboot項(xiàng)目還可以使用命令的方式(在終端中定位到當(dāng)前項(xiàng)目的目錄下)：

• mvn claen：清除目錄中的生成結(jié)果

• mvn package：打包程序

3.將該文件上傳至服務(wù)器的指定目錄下，我這邊傳到了/www/wwwroot/hbv目錄中,大家可以自定義。

4.打開Webstorm，直接在下面的終端中執(zhí)行npm run build,等控制臺(tái)執(zhí)行完即可。此時(shí)你就會(huì)發(fā)現(xiàn)項(xiàng)目中多了個(gè)dist目錄，將該目錄直接上傳到服務(wù)器中指定位置，我這邊還是傳到了/www/wwwroot/hbv目錄中，大家可以自定義。

到現(xiàn)在為止，前后端項(xiàng)目都已經(jīng)打包完成，且已經(jīng)傳到了服務(wù)器中（怎么傳先不介紹，大家可以用一款免費(fèi)軟件FileZilla，用了好幾年了，一直很穩(wěn)定）

軟件界面大致就是這樣的，左邊客戶端，右邊服務(wù)器，上傳：左邊文件拉到右邊。下載：右邊拉到左邊，特別簡(jiǎn)單。

配置nginx

1.我這邊比較偷懶，直接在服務(wù)器中裝了個(gè)寶塔面板，可以省好多事，當(dāng)然nginx也是可視化的。

2.由于我服務(wù)器中有多個(gè)項(xiàng)目，nginx中的配置文件沒必要都展示，所以我就把當(dāng)前后端分離版的項(xiàng)目配置信息貼出來：

?server?{listen???????80;server_name??xxxx.com;location?/?{root???/www/wwwroot/hbv/dist;try_files?$uri?$uri/?/index.html;index??index.html?index.htm;}location?^~?/api/?{proxy_pass?http://xx.xx.xx.xx:6666/;proxy_connect_timeout?300s;proxy_send_timeout?300s;proxy_read_timeout?300s;}error_page???500?502?503?504??/50x.html;location?=?/50x.html?{root???html;}}

關(guān)鍵配置信息說明：

• server_name：寫你的域名即可，通過該域名訪問服務(wù)器中的項(xiàng)目

• root：配置的是你前端項(xiàng)目上傳的地址，需要制定到dist目錄下，請(qǐng)求時(shí)自動(dòng)會(huì)找index.html頁(yè)面

• proxy_pass：配置的是你后端訪問地址,直接寫服務(wù)器地址加端口號(hào)即可，注意端口號(hào)別沖突了

在終端啟動(dòng)后端服務(wù)

1.在根目錄下，通過命令：cd /www/wwwroot/hbv目錄下，因?yàn)槲液蠖说捻?xiàng)目放在了改目錄下

2.通過命令：ls查看后端項(xiàng)目是否存在

3.通過命令：nohup java -jar blog-web-2.2.5.jar &啟動(dòng)服務(wù)，記得一定要按兩下回車

5.最后在瀏覽器中通過域名就可以訪問了。

若是有問題的，可以在留言區(qū)留言說明，最后點(diǎn)個(gè)在看再走唄~

總結(jié)

以上是生活随笔為你收集整理的前后端分离项目部署上线详细教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。