Vue+SpringBoot项目分离部署踩坑记录
阅读原文时间:2023年08月23日阅读:3

昨天花了一晚上终于成功部署了个人网站,在这个过程中踩了很多坑,现在回顾总结记录一下,以免今后继续犯错误

前端: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

端口配置内容,也是我耗费时间最多的问题,在配置测试过程中一直报错,错误内容为:

  • 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”