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

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

前期工作:

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

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

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

后台代码打包

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

阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输_第1张图片
没有的话直接暴露端口号就可以了。

步骤二:申请ssl证书

去腾讯云官网或者阿里云,申请ssl证书,证书的格式为JKS格式(盲猜其他格式也可以)如图:
阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输_第2张图片

下载后的文件解压后是这样子。
阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输_第3张图片

然后将下载的证书放到你的项目resource文件夹下,然后在放到服务器你指定的目录一份,一般是和jar包同文件件。
本地程序目录结构
阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输_第4张图片
然后再到你的properties 文件配置或者YAML 文件配置
配置如下图
阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输_第5张图片
然后就算配置完成,直接将后台代码打成jar包就可以了。

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

阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输_第6张图片
接下来就是运行程序。
阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输_第7张图片
到这里一定确保能正常运行,然后去测试访问自己的后台接口,可以在浏览器上也可以用postman测试。
例如:https://xxx.com:端口号/about
到此,我的后台数据已经能访问到了。

前台代码打包

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

我的是这样(注意:最好用域名,不要用IP地址,可能会报错)
阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输_第8张图片

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

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

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

简单 不表

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

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

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

阿里云服务器上通过宝塔面板部署SpringBoot+vue项目并添加ssl证书实现https加密传输_第9张图片
当你的证书部署到服务器后,可以进行下一步配置。

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

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

   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证书,然后就成了,
感觉这并不是最佳的解决方案,但是好像以我目前的知识并不能想到更好的,
所以有更好的解决方案还望不吝赐教!

你可能感兴趣的:(网站相关,阿里云,服务器,spring,boot)