架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

申请证书

1、登录阿里云控制台,产品与服务,选择SSL证书

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

2、进入SSL证书页面,点击“购买证书”,选择免费1年的证书类型,点击“立即购买”

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

3、返回SSL证书页面,可以看到证书列表里多了一条记录

 架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

4、点击申请,填写网站域名,手机号等信息,提交审核(审核很快)

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

5、审核通过后,点击右侧的的“下载”按钮

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

6、弹出下载页面,选择Nginx版本下载到本地备用,此时证书申请已经完成。

 架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

部署证书

1、登录宝塔控制面板,点击“网站”菜单,选择申请证书的网站,点击右侧“设置”

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

2、在弹出的窗口中,选择“SSL”,“其他证书”,将下载的证书解压成两个文件,分别粘贴到秘钥和证书两个输入框中,点击保存。此时证书已部署成功。

 架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

开放443端口

1、宝塔面板中,“安全”,在防火墙中放行443端口

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

2、阿里云ECS控制台中,配置安全组入方向443端口

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

解决样式错乱问题

原因:

浏览器为了安全,https下跨协议调用http的是不行的。帝国CMS中引入静态资源的标签:[!--news.url--],这个标签指的是网站地址,而网站地址写的是http://不是https://

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

由于前端页面完全静态化,网页引入的JS、CSS等静态资源还是http开头的,这是访问不到的,要重新生成页面。

解决办法:

1、帝国CMS中,将“系统”,“基本信息设置”中的网址地址http改为https

架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题

2、重新生成网页

 架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题