阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输

前言：如果只想要实现域名访问，不必添加ssl证书的话可以看我上一篇文章

前期工作：

• 一台服务器
• 一个已经备案的域名（需要大概一周才能备案完成，可提前准备）
• 域名映射到服务器
• 申请两份ssl证书(我的方案:阿里云+腾讯云)
• 宝塔面板安装
  如果能走到要添加ssl证书这一步，相信以上步骤应该都完成了，接下来就直接进入正片。

**所遇问题: **我遇到的问题是这样，当时我只申请了一份证书，然后通过nginx进行部署配置，前端页面可以通过https访问到，但是获取后台数据的时候会报错，说是不能用安全的链接访问不安全的，然后，我就在宝塔面板布置后台程序证书，会报各种的错，

**解决方案: **然后我就想到，直接在程序里嵌入ssl证书，然后前端通过Nginx配置实现加密访问，用到了两个证书。然后就成了，感觉这并不是最佳的解决方案，但是好像以我目前的知识并不能想到更好的，
所以有更好的解决方案还望不吝赐教！

后台代码打包

步骤一：先将后台有关域名的部分改写成https

没有的话直接暴露端口号就可以了。

步骤二：申请ssl证书

去腾讯云官网或者阿里云，申请ssl证书，证书的格式为JKS格式(盲猜其他格式也可以)如图：

下载后的文件解压后是这样子。

然后将下载的证书放到你的项目resource文件夹下，然后在放到服务器你指定的目录一份，一般是和jar包同文件件。
本地程序目录结构

然后再到你的properties 文件配置或者YAML 文件配置
配置如下图

然后就算配置完成，直接将后台代码打成jar包就可以了。

步骤三：到宝塔面板去部署程序

接下来就是运行程序。

到这里一定确保能正常运行，然后去测试访问自己的后台接口，可以在浏览器上也可以用postman测试。
例如：https://xxx.com:端口号/about
到此，我的后台数据已经能访问到了。

前台代码打包

步骤一：将你调用的后端接口改为https访问

我的是这样(注意：最好用域名，不要用IP地址，可能会报错)

步骤二 ：将vue项目进行打包

执行 npm run build 命令 得到dist文件夹

步骤三：直接通过宝塔面板上传到服务器指定文件

简单 不表

步骤四：去阿里云申请另一份证书并部署

此处我给一个链接，然后按照阿里云的步骤一步一步来就好。

https://yundun.console.aliyun.com/?spm=5176.12818093_-1363046575.0.dre4.3be916d0DOGpzy&p=cas#/certExtend/free/cn-hangzhou

当你的证书部署到服务器后，可以进行下一步配置。

步骤四：配置Nginx，拦截访问服务器的443端口

   server {
     #HTTPS的默认访问端口443。
     #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
     listen 443 ssl;
     
     #填写证书绑定的域名
     server_name <>;
 
     #填写证书文件名称
     ssl_certificate cert/www.XX.top.pem;
     #填写证书私钥文件名称
     ssl_certificate_key cert/www.XX.top.key;
 
     ssl_session_cache shared:SSL:1m;
     ssl_session_timeout 5m;
 
     #默认加密套件
     ssl_ciphers HIGH:!aNULL:!MD5;
   
     #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
     #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
     #ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
     #ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

     #表示优先使用服务端加密套件。默认开启
     ssl_prefer_server_ciphers on;
 
 
    location / {
            root 你的路径;
          index  index.html;
          try_files $uri $uri/ /index.html;
        }
        add_header Access-Control-Allow-Origin "*";
        default_type 'text/html';
        charset utf-8;
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
              root html;
        }
}
        

然后保存重置一下Nginx服务，就可以成功访问了、

总结

我遇到的问题是这样，当时我只申请了一份证书，然后通过nginx进行部署配置，
前端页面可以通过https访问到，但是获取后台数据的时候会报错，
说是不能用安全的链接访问不安全的，然后，我就在宝塔面板布置后台程序证书，
会抱各种的错，然后我就想到，直接在程序里嵌入ssl证书，然后就成了，
感觉这并不是最佳的解决方案，但是好像以我目前的知识并不能想到更好的，
所以有更好的解决方案还望不吝赐教！