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”