前端小记 前端小记
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
  • 学习笔记

    • 《Vue》踩坑笔记
    • TypeScript学习笔记
    • 小程序笔记
    • JavaScript设计模式笔记
  • 工具
  • CentOS
  • Java
  • Docker
  • Linux
  • Maven
  • MySQL
  • 其他
  • 技术文档
  • GitHub部署及推送
  • Nodejs
  • 博客搭建
  • Fullpage全屏轮播插件
  • svn
  • 学习
  • 系统重装
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

sweetheart

前端小记
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
  • 学习笔记

    • 《Vue》踩坑笔记
    • TypeScript学习笔记
    • 小程序笔记
    • JavaScript设计模式笔记
  • 工具
  • CentOS
  • Java
  • Docker
  • Linux
  • Maven
  • MySQL
  • 其他
  • 技术文档
  • GitHub部署及推送
  • Nodejs
  • 博客搭建
  • Fullpage全屏轮播插件
  • svn
  • 学习
  • 系统重装
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术文档

  • GitHub部署及推送

  • Nodejs

  • 博客搭建

    • 解决百度无法收录搭建在GitHub上的个人博客的问题
    • 使用Gitalk实现静态博客无后台评论系统
    • GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
    • 解决谷歌搜索不到博客的问题
    • 解决百度搜索不到博客的问题
    • 网站由http协议更改为https协议的方法
      • http 协议和 https 协议的区别
      • 1.域名购买
      • 2.域名解析
      • 3.申请并下载 SSL 证书
      • 4.上传证书到自己的服务器
      • 5.修改服务器上的 nginx 目录下的 nginx.conf 文件
      • 6.http 重定向到 https 协议(可选)
      • 完成
        • 参考文档:
  • fullpage

  • svn

  • 技术
  • 博客搭建
sweetheart
2021-03-27
目录

网站由http协议更改为https协议的方法

# 网站由 http 协议更改为 https 协议的方法

# http 协议和 https 协议的区别

    1. https 协议需要到 ca 申请证书,一般免费证书较少,因而需要一定费用。
    1. http 是超文本传输协议,信息是明文传输,https 则是具有安全性的 ssl 加密传输协议。
    1. http 和 https 使用的是完全不同的连接方式,用的端口也不一样,前者是 80,后者是 443。
    1. http 的连接很简单,是无状态的;HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 http 协议安全。

# 1.域名购买

博主的域名是在腾讯云上购买的,根据自己的需要选择代理商购买域名即可。

腾讯云域名购买地址:https://dnspod.qcloud.com/?from=console (opens new window)

其他代理商的域名购买地址请自行查询。

# 2.域名解析

在购买好域名的基础上,我们需要进行域名的解析,不然通过该域名无法得知实际的公网 IP 地址

腾讯云域名解析地址:https://console.cloud.tencent.com/cns (opens new window)

进入此页面点击解析,然后添加一条 A 记录(记录类型为 A,记录值为腾讯云服务器的公网 IP 地址,主机记录根据自己的需要进行选择即可,线路类型选择默认即可,TTL 默认设置 600 秒即可),此时我们已经完成了域名的解析工作。

然后我们可以通过 ping 服务来测试解析是否成功,通过 ping 域名,查看返回的 IP 是否为自己的公网 IP 地址,如果返回的是自己的公网 IP 地址,即证明解析成功,可以执行后续操作了。此时在浏览器的地址栏中输入自己的域名即可打开自己通过公网 IP 才能打开的网站。

例如:
ping gujunling.github.io
1
2

若出现如下页面即表示解析成功

# 3.申请并下载 SSL 证书

SSL 证书申请地址:https://console.cloud.tencent.com/ssl (opens new window)

进入此页面点击申请免费证书或者购买证书均可,根据自己的需要进行选择即可,一般情况下若没有特殊作用的建议选择申请免费证书。

点击申请免费证书后,在出现下图所示页面后点击确定即可。

然后在新的页面中根据提示信息进行操作即可,(私钥密码根据自己的情况选择是否设置)

填写完成后等待腾讯审核即可,一般这个审核较快,最长不会超过一天,审核通过后可以在我的证书页面中看到自己的已经签发的证书,然后点击下载即可。

# 4.上传证书到自己的服务器

将上一步中下载的证书解压,然后根据自己的服务(apache/nginx/tomcat 等)选择将相应的文件上传到自己的服务器即可。此处可以通过 FileZilla 或者 xftp 将文件上传到服务器,具体如何上传可以根据自己的喜好选择即可。

FileZilla 官网:https://filezilla-project.org/ (opens new window)

xftp 官网:https://www.netsarang.com/zh/xftp/ (opens new window)

注意:若使用的是 nginx 服务,即将解压文件夹下的 nginx 目录下的两个文件上传到 nginx 的安装目录下的 conf 目录下,其他服务请查看腾讯的文档进行上传

例如我的 nginx 目录下的这两个文件,将其上传到自己的服务器的 nginx 安装目录下的 conf 文件夹下即可。

腾讯官方的 SSL 证书安装教程:https://cloud.tencent.com/document/product/400/35244 (opens new window)

# 5.修改服务器上的 nginx 目录下的 nginx.conf 文件

在上一步的文件上传成功后,需要修改服务器上的 nginx 目录下的nginx.conf文件。

  • 此操作可通过执行 vim /usr/local/nginx/conf/nginx.conf 命令行编辑该文件。
  • 由于版本问题,配置文件可能存在不同的写法。例如:Nginx 版本为 nginx/1.15.0 以上请使用 listen 443 ssl 代替 listen 443 和 ssl on。

在 nginx.conf 文件中添加如下信息:

server {
    #SSL 访问端口号为 443
    listen 443 ssl;
 #填写绑定证书的域名
 # cloud.tencent.com为自己的域名
    server_name cloud.tencent.com;
 #证书文件名称
 # 1_cloud.tencent.com_bundle.crt为你自己下载的文件中以.crt结尾的文件名
    ssl_certificate 1_cloud.tencent.com_bundle.crt;
 #私钥文件名称
 # 2_cloud.tencent.com.key 为你自己下载的文件中以.key结尾的文件名
    ssl_certificate_key 2_cloud.tencent.com.key;
    ssl_session_timeout 5m;
 #请按照以下协议配置
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
 #请按照以下套件配置,配置加密套件,写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    location / {
    #网站主页路径。此路径仅供参考,具体请您按照实际目录操作。
    # 此时的root下的路径保持和自己的http协议下的另一个server中的root下的路径一致
        root html;
        index  index.html index.htm;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

修改配置文件后,需要经 nginx 重启一下,修改才能生效

sudo service nginx reload
1

配置完成后即可通过 https 协议访问自己的域名。

注意,若重启 nginx 服务报如下错误(ssl parameter requires ngx_http_ssl_module),则证明 nginx 安装时缺少 http_ssl_module 模块,解决方案参考下文

解决方案可参考我的另一篇文章:https://gujunling.github.io/pages/3cce56/ (opens new window)

或参考此文:https://www.jianshu.com/p/9e81818028b7 (opens new window) 若按照此文章配置不成功的情况下,可以将 nginx 服务删除,然后重新安装,在安装时配置安装 http_ssl_module 模块,具体可参考我的文章https://gujunling.github.io/pages/3cce56/ (opens new window)

# 6.http 重定向到 https 协议(可选)

在浏览器中直接输入域名访问的是 http 协议,若需要将 http 请求重定向到 https 请求,则可以执行下方操作,即修改 nginx 安装目录下的nginx.conf文件。

配置 SSL 证书和重定向到 https 请求

server {
    #SSL 访问端口号为 443
    listen 443 ssl;
 #填写绑定证书的域名
 # cloud.tencent.com为自己的域名
    server_name cloud.tencent.com;
 #证书文件名称
 # 1_cloud.tencent.com_bundle.crt为你自己下载的文件中以.crt结尾的文件名
    ssl_certificate 1_cloud.tencent.com_bundle.crt;
 #私钥文件名称
 # 2_cloud.tencent.com.key 为你自己下载的文件中以.key结尾的文件名
    ssl_certificate_key 2_cloud.tencent.com.key;
    ssl_session_timeout 5m;
 #请按照以下协议配置
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
 #请按照以下套件配置,配置加密套件,写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    location / {
    #网站主页路径。此路径仅供参考,具体请您按照实际目录操作。
    # 此时的root下的路径保持和自己的http协议下的另一个server中的root下的路径一致
        root html;
        index  index.html index.htm;
    }
}

server {
listen 80;
#填写绑定证书的域名
# cloud.tencent.com为你自己的域名
server_name cloud.tencent.com;
#把http的域名请求转成https
return 301 https://$host$request_uri;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

修改完成后,重启 nginx 服务即可

sudo service nginx reload

1
2

# 完成

此时已经安装配置完成了,可以通过 https 协议访问自己的域名了,且使用 http 协议访问此域名时会自动重定向到 https 请求。

# 参考文档:

腾讯官方的 SSL 证书安装教程:https://cloud.tencent.com/document/product/400/35244 (opens new window)

centos7 安装配置 nginx 服务:https://gujunling.github.io/pages/3cce56/ (opens new window)

完善页面 (opens new window)
上次更新: 2024-11-28 17:23:47
解决百度搜索不到博客的问题
fullpage全屏滚动轮播插件的使用

← 解决百度搜索不到博客的问题 fullpage全屏滚动轮播插件的使用→

最近更新
01
git常用操作手册
12-26
02
常用的前端工具库
12-19
03
前端构建工具
12-19
更多文章>
前端小记 版权所有 | Copyright © 2021-2024
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式