一看就懂！Linux服務器部署Springboot+VUE前後端分離式項目

  前後端分離是目前的大趨勢了。以前往往是前端打包頁面後交給後臺放入靜態資源文件夾下進行部署，這樣子做其實是一個不太聰明的行爲。這裏就不展開說了。

首先是環境：

後臺基於：Springboot2.1.3，Maven3.3.6。

後臺服務器：Tomcat

前端基於：Vue2，@vue/cli 4.x

前端服務器：nginx （自行安裝）

部署後臺項目：

往這戳，部署Springboot項目

 

部署前端項目：

1.vue.config.js

@vue/cli 4.x需要自己手動新建在根目錄下即可。

module.exports = {
    //.. 其他省略
    // 設置publicPath
    publicPath: './',
}

2.打包

npm run build

3.打包完後出現dist文件夾。

4.修改dist文件夾下的index.html

將所有的路徑前添加 ./ 注意是全部！以下只是示例。

原index.html文件路徑前綴是沒有./的
<link href=css/app.6bc6c90b.css rel=stylesheet>
添加上./
<link href=./css/app.6bc6c90b.css rel=stylesheet>

5.將dist上傳到服務器指定文件夾下。

6.新建/etc/nginx/conf.d/項目名.conf

vim /etc/nginx/conf.d/項目名.conf

server {
    listen       80; 
    server_name  xxx.xxx.xxx.xxx; #(ip或者域名)
    # 注意 listen 和 servername 不要覆蓋你其他重要項目~
    # 如果條件允許使用域名最好了，就不會出現端口衝突

    location / {
        root /usr/local/project/test/dist; # 項目路徑
        index index.html;
    }
    location /code{
    	proxy_pass http://localhost:9090/test/; # 後臺代碼的路徑 對應vue.config.js裏的target
    }
}

nginx -t #查看配置文件是否正確
nginx -s reload # nginx重新加載配置文件

接着訪問打開瀏覽器訪問 ip:80即可訪問前端頁面。

 

此外：nginx配置SSL簡直不要太簡單

1.下載證書，放到 /etc/nginx/cert文件夾下

2.修改配置文件

server {
    listen 443 ssl;
    server_name shiro.itaem.top; # 你的域名
    root /myProject/shirodemo/dist;
    index index.html;
 
    ssl_certificate  cert/test.itaem.top.pem;   # 改成你的證書的名字
    ssl_certificate_key cert/test.itaem.top.key; # 你的證書的名字
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    location / {
        root /usr/local/project/test/dist; # 項目路徑
        index index.html;
    }
    location /shiro {
        proxy_pass http://127.0.0.1:9090/test/;
    }

}
server {
    listen 80;
    server_name test.itaem.top; # 你的域名
    rewrite ^(.*)$ https://$host$1 permanent; #把http的域名請求轉成https
}

3.重新加載配置文件即可

ps：可以只配置前端代碼的SSL，不配置後臺的SSL一樣可以使用。

 

---

有什麼問題可以評論或者私信我，每日在線解（LIAO）疑（SAO）。

我是大誌，一位準備996的卑微碼農🐶，覺得好用記得點贊收藏！！！