文章目錄
- 前言
- 一、環境準備
- 二、SpringBoot項目打jar包
-
- 1.1 使用Maven的package插件打包
- 1.2 上傳至Linux伺服器
- 三、Vue項目打包
-
- 1.1 修改背景請求位址
- 1.2 生成dist檔案
- 1.3 上傳至linux伺服器
- 三、配置Nginx
- 四、啟動項目
-
- 1.1 啟動Nginx伺服器
- 1.2 啟動SpringBoot
- 1.3 通路項目
- 總結
前言
Java企業開發少不了Spring Boot 加 Vue，在如今大街小巷都遍布的前後端分離項目标配，已經成為公司開發必不可少的技術，最近小編開源了一個關于RBAC的項目，也是用Spring Boot 和 Vue寫的，想擷取源碼，最下方有Gitee連結，今天就以我的個人項目做列子。
一、環境準備
1、web伺服器
2、MySql資料庫
3、Nginx伺服器
4、Java環境
以後環境準備就緒之後，我們就開始打包進行部署，關于Nginx的使用，以及Docker後面的文章會有專題進行學習。
二、SpringBoot項目打jar包
1.1 使用Maven的package插件打包
1.2 上傳至Linux伺服器
将打包後Jar包上傳至Linux伺服器，随便找個目錄：
三、Vue項目打包
1.1 修改背景請求位址
現在部署上想了，需要将你前端的啟動端口，全部改成後端項目的端口，保持一緻，然後修改後端請求的IP位址。就是你伺服器的IP位址或者域名。
1.2 生成dist檔案
當然你也可以以下使用指令進行打包：
npm run build
打包成功後會生成一個dist靜态檔案夾，裡面都是我們vue項目打包編譯後css、js等靜态資源檔案。
1.3 上傳至linux伺服器
将dist一整個檔案上傳至Linux中，建立一個目錄，用于存放dist檔案，記住存放位址，下面配置Nginx靜态資源需要使用：
為了友善管理，我都放在一個檔案目錄下：
/usr/local/dt
三、配置Nginx
由于Nginx伺服器都部署在一台伺服器上面，并且我們沒有域名，也不做什麼負載均衡，是以這裡的配置就很簡單，IP就寫本機，伺服器本機即是localhost，後面我們會有部署更新的文章，比如關于配置負載均衡、靜态資源壓縮、Https證書等等。
關鍵的地方：
Vue的靜态資源檔案路徑：
Spring Boot的接口位址：
小編所有接口都有一個api作為字首，因為這樣好做權限資源的攔截。
完整配置：
server {
listen 80;
server_name localhost;
#前端頁面
location / {
#Linux上的前端工程打包目錄
root /usr/local/dt/dist;
#防止重定向頁面重新整理 路由失效
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
#背景接口位址
location /api/{
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#填寫你接口位址和端口，利用 nginx 反向代理進行服務轉發
proxy_pass http://localhost:9090/api/;
}
}
一切配置好之後，我們就可以開始啟動項目了。
四、啟動項目
1.1 啟動Nginx伺服器
1.2 啟動SpringBoot
推薦背景啟動方式：
online.log為啟動試試日志，可通過cat指令進行檢視。
1.3 通路項目
總結
由于Nginx伺服器都部署在一台伺服器上面，并且我們沒有域名，也不做什麼負載均衡，是以這裡的配置就很簡單，IP就寫本機，伺服器本機即是localhost，後面我們會有部署更新的文章，比如關于配置負載均衡、靜态資源壓縮、Https證書等等。後面我們會結合使用Docker部署，并且小編有文章也有些寫，大家可自行查閱。
DT CMS緻力于最簡潔的前後端分離RBAC背景管理系統，喜歡的可以加入小編技術交流群領取：176251012
熬夜幹貨，創作不易，動動小手點贊吧！！！！後面會繼續輸出更多幹貨給大家，喜歡的請關注小編CSDN：https://blog.csdn.net/qq_41107231 以及掘金：https://juejin.cn/user/3940246036699848