Vue+SpringBoot项目分离部署踩坑记录

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

前端：Vue

后端：SpringBoot

数据库：Mysql

一、前端

1、前端项目采用Nginx进行部署，其中Nginx配置文件部分内容如下

nginx.conf部分内容

server {
        listen  443 ssl;
        server_name             www.huskysir.cn;
        ssl_certificate         huskysir.cn_bundle.crt;
        ssl_certificate_key     huskysir.cn.key;
        ssl_session_timeout     5m;
        ssl_protocols           TLSv1.2 TLSv1.3;
        ssl_ciphers             ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;
​
​
        location / {
                root    /usr/share/nginx/html/huskysir;
                index   index.html index.htm;
                try_files $uri $uri/ /index.html;
        }
}
​
server {
        listen 80;
        server_name     www.huskysir.cn;
        return  301     https://$host$request_uri;
}

注意：

• 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证书）

主机名

# 域名
baseUrl = "https://www.huskysir.cn:8081"
# IP地址
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标签元素

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

二、后端

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

• Keystore was tampered with, or password was incorrect

• Password verification failed

application.yml部分内容

# 端口配置
server:
  port: 8081
  ssl:
    key-store: classpath:huskysir.cn.jks
    key-store-type: JKS
    key-password: ******

我一直怀疑是我的证书有问题，还尝试了jks、pfx多种类型的证书，最后发现原来是版本写法问题

较早版本

server:
  ssl:
    key-store: classpath:ssl.jks
    key-store-type: jks
    key-password: yourpassword

2.7.14版本

server:
  ssl:
    key-store: classpath:ssl.jks
    key-store-type: jks
    key-store-password: yourpassword

仅仅是“key-password”换为了“key-store-password”