¹⁵

²⁸

开启 HTTPS 详细教程

leikooo

2024-09-06 17:12

阅读1176

leikooo

2024-09-06 17:12

阅读 1176

前提

服务器
域名
备案

域名

购买域名的时候需要注意，不需要买 专业版DNS解析 如果不知道这个东西大概率没有需求！

域名的不同层级

顶级域名（TLD）和二级域名是域名结构中的不同层级。

顶级域名 (TLD)：这是域名的最高层级，通常位于域名的最后部分，比如 .com、.org、.net、.cn 等等。每个域名都必须有一个顶级域名。
二级域名 (SLD)：这是顶级域名前的部分，通常是你注册的名称，用于识别网站或组织。比如在 example.com 中，example 就是二级域名。
二级域名的子域名（通常称为子域名）：是在二级域名前再加一部分，比如 api.example.com 中的 api 就是子域名。

举例来说：

顶级域名：com 是顶级域名。
二级域名：example.com 是二级域名，其中 example 是二级域名的具体名称，.com 是顶级域名。
子域名：api.example.com 中的 api 是 example.com 的子域名。

域名和 SSL 关系

域名是互联网上用于标识网站或服务的唯一地址，比如 example.com。它分为多个层级，常见的有顶级域名（TLD，比如 .com、.org）和二级域名（如 www.example.com 中的 www）。二级域名通常用来表示同一域名下的不同子网站或服务。

关于 SSL 证书，每一个二级域名是否需要单独的 SSL 证书取决于你使用的证书类型：

单域名 SSL 证书：只保护一个特定的域名，比如 example.com，但不能保护二级域名（如 sub.example.com）。
多域名 SSL 证书（SAN 证书）：可以保护多个不同的域名，包括二级域名，但需要你在申请时列出这些域名。
通配符 SSL 证书：可以保护一个主域名及其所有二级域名，比如 *.example.com，这意味着它同时保护 www.example.com、api.example.com 等等。

如果你有很多二级域名，使用通配符证书可以简化 SSL 证书管理，否则每个二级域名都需要单独的 SSL 证书。

所以我们使用 通配符 SSL 证书 ，如果不用通配符那么就需要单独为 leikooo.com 和 api.leikooo.com 申请两个 SSL 证书，当然流程都是一样的，下面就用通配符 SSL 做演示！

申请 SSL

我是用的第三方的 SSL 当然腾讯、阿里的 SSL 都是可以的，但是要注意一件事：域名 + 服务器一定要是同一家的，不然可能会出问题！

OHTTPS

1、

2、

他有一个 365 天的付费证书，但是不需要，选择后面的 90 天的免费证书就行

输入的域名：*.leikooo.com 不要照抄我的，写自己买的域名

3、

4、

比如我的：

主机记录：_acme-challenge.leikooo.com

记录值： _acme-challenge.3ejqm8pg2678gd7n.ohttps.com

域名后台：

主机记录，只需要写 _acme-challenge （看自己的是什么，这里只是演示）
记录类型选择 CNAME
记录值直接 CV 就行

5、检查是否创建成功

6、等一会~

7、创建成功！

8、转换格式方便后端部署使用

证书格式网站：https://myssl.com/cert_convert.html

9、下载 .key 后缀文件、和 .cer 后缀文件方便后面原生 Nginx 部署时使用

必要设置

宝塔

1、宝塔安装 Nginx

2、添加前端项目

域名根据自己实际情况填写

3、添加关于后端的项目

4、设置证书和密钥

后端网站也是按照这个流程上传 key 和 cer

5、后端站点设置反向代理，前端站点选中打包上传的目录

前端站点：

后端站点

小插曲，直接访问接口文档出现下面的情况

解决办法：需要把上面默认目标URL 改成 https

最终效果

比如我的后端项目运行在 9090 端口我就可以这样写

原生 Nginx

安装 Nginx 教程
可以参考一下跨域 + SSL 的Nginx 文件

1、创建一个文件夹放 key、cer 文件

▼
cmd
复制代码
cd ~
mkdir key

2、把之前下载好的 key 、cer 文件上传到服务器的 /root/key 文件夹，也就是我们上面创建好的文件夹

1）rz 命令

2）WinSCP

3）其他支持上传的工具

3、查看 Nginx 配置文件

▼
nginx
复制代码
nginx -t

如果报错 command not found 就看上面的安装教程，设置一下环境变量就好

4、修改 Nginx 配置文件

▼
text
复制代码
vi /usr/local/nginx/conf/nginx.conf

▼
nginx
复制代码
    server {
    	# 把 80 改成 443 ssl 
        listen       443 ssl;
        server_name  www.leikooo.cn leikooo.cn;
		# ssl 最后的文件名根据实际情况修改
	    ssl_certificate     /usr/key/fullchain.cer;
        ssl_certificate_key /usr/key/cert.key ;
        ssl_protocols       TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
	     
	    root /root/project/fronted;


        location / {
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

    }

	# 如果使用 http 转到 https 
    server {
        listen       80;
        server_name  www.leikooo.cn leikooo.cn;
        return       301 https://$server_name$request_uri;
    }

▼
nginx
复制代码
    server {
        listen       443 ssl;
        server_name  api.leikooo.cn;
        # ssl 和上面的几乎一项
	    ssl_certificate     /usr/key/fullchain.cer;
        ssl_certificate_key /usr/key/cert.key ;
        ssl_protocols       TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
	       
      
        location / {
        	# 反向代理，根据自己后端实际运行地址端口修改
            proxy_pass https://localhost:9090;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr; 
	   }
    }

前端

前端其实对于 Https 需要代码修改的部分不多，主要就是修改访问后端的地址（修改 baseURL 找不到全局搜索）：

▼
text
复制代码
/**
 * @name request 配置，可以配置错误处理
 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
 * @doc https://umijs.org/docs/max/request#配置
 */
export const request = {
  baseURL: 'https://api.leikooo.com',
  withCredentials: true,
  ...errorConfig,
};

后端

需要格式 JKS
需要文件密码 (上面证书格式转化时候填写的密码)

1、修改配置文件

▼
yml
复制代码
server:
  ssl:
    key-store: classpath:_.leikooo.com.jks
    key-store-type: JKS
    key-store-password: 密码

_.leikooo.com.jks 这个具体是 jks 文件名称，自己是什么就填写什么就好

2、

需要把 jks 文件，放到 resource 目录下面

▼
text
复制代码
├─java
└─resources
    ├─_.leikooo.com.jks

3、然后打包上传到服务器上，运行就好了！

4、访问线上接口文档，可以发现是 HTTPS 了！

相关专栏

教程

项目教程

常用教程

问答助学