Vue+SpringBoot專案分離部署踩坑記錄

昨天花了一晚上終於成功部署了個人網站，在這個過程中踩了很多坑，現在回顧總結記錄一下，以免今後繼續犯錯誤

前端：Vue

後端：SpringBoot

資料庫：Mysql

一、前端

1、前端專案採用Nginx進行部署，其中Nginx組態檔部分內容如下

nginx.conf部分內容

 1 server {
 2         listen  443 ssl;
 3         server_name             www.huskysir.cn;
 4         ssl_certificate         huskysir.cn_bundle.crt;
 5         ssl_certificate_key     huskysir.cn.key;
 6         ssl_session_timeout     5m;
 7         ssl_protocols           TLSv1.2 TLSv1.3;
 8         ssl_ciphers             ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
 9         ssl_prefer_server_ciphers on;
10 
11 
12         location / {
13                 root    /usr/share/nginx/html/huskysir;
14                 index   index.html index.htm;
15                 try_files $uri $uri/ /index.html;
16         }
17 }
18 
19 server {
20         listen 80;
21         server_name     www.huskysir.cn;
22         return  301     https://$host$request_uri;
23 }

注意：

linux系統的location中「root /usr/share/nginx/html/huskysir;」，父子檔案用'/'隔開，而在windows系統中父子檔案預設是'\'隔開，注意斜槓符號
」try_files $uri $uri/ /index.html;「表示先檢查$uri，其次$uri/，最後/index.html

2、前端請求後端介面的Url主機名應該是域名而非IP地址，如果採用IP地址則可能會出現「NET::ERR_CERT_COMMON_NAME_INVALID」的錯誤（SSL證書）

主機名

1 # 域名
2 baseUrl = "https://www.huskysir.cn:8081"
3 # IP地址
4 baseUrl = "https://xxx.xxx.xxx.xxx:8081"

3、瀏覽器警告

Mixed Content: The page at ‘https://xxx’ was loaded over HTTPS, but requested an insecure test ‘http://xxx’. This request has been blocked; the content must be served over HTTPS.

只需要將不安全的http升級為https即可，方式為在html頁面內加上meta標籤元素

1 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

二、後端

埠設定內容，也是我耗費時間最多的問題，在設定測試過程中一直報錯，錯誤內容為：

Keystore was tampered with, or password was incorrect
Password verification failed

application.yml部分內容

1 # 埠設定
2 server:
3   port: 8081
4   ssl:
5     key-store: classpath:huskysir.cn.jks
6     key-store-type: JKS
7     key-password: ******

我一直懷疑是我的證書有問題，還嘗試了jks、pfx多種型別的證書，最後發現原來是版本寫法問題

較早版本

1 server:
2   ssl:
3     key-store: classpath:ssl.jks
4     key-store-type: jks
5     key-password: yourpassword

2.7.14版本

1 server:
2   ssl:
3     key-store: classpath:ssl.jks
4     key-store-type: jks
5     key-store-password: yourpassword

僅僅是「key-password」換為了「key-store-password」