编程导航会员会员
登录/注册

开启 HTTPS 详细教程

前提

  1. 服务器
  2. 域名
  3. 备案

域名

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

image-20240905145519033

域名的不同层级

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

  1. 顶级域名 (TLD)：这是域名的最高层级，通常位于域名的最后部分，比如 .com、.org、.net、.cn 等等。每个域名都必须有一个顶级域名。

  2. 二级域名 (SLD)：这是顶级域名前的部分，通常是你注册的名称，用于识别网站或组织。比如在 example.com 中，example 就是二级域名。

  3. 二级域名的子域名（通常称为子域名）：是在二级域名前再加一部分，比如 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 证书取决于你使用的证书类型：

  1. 单域名 SSL 证书：只保护一个特定的域名，比如 example.com，但不能保护二级域名（如 sub.example.com）。

  2. 多域名 SSL 证书（SAN 证书）：可以保护多个不同的域名，包括二级域名，但需要你在申请时列出这些域名。

  3. 通配符 SSL 证书：可以保护一个主域名及其所有二级域名，比如 *.example.com，这意味着它同时保护 www.example.com、api.example.com 等等。

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

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

申请 SSL

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

OHTTPS

1、

image-20240906171340574

2、

image-20240905152726826

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

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

3、

image-20240905153442323

4、

比如我的：

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

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

image-20240905154713249 image-20240905154039301

域名后台：

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

5、检查是否创建成功

image-20240905154504516

6、等一会~

image-20240905154539380

7、创建成功！

image-20240905154809961

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

image-20240905155317708 image-20240905155422413

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

image-20240905155854597 image-20240905160034621 image-20240906170535088

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

image-20240906145825556

必要设置

宝塔

1、宝塔安装 Nginx

image-20240906153814080 image-20240906153855695

2、添加前端项目

image-20240906155150856

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

3、添加关于后端的项目

image-20240906155100325

4、设置证书和密钥

image-20240906161038215 image-20240906161045353

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

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

前端站点：

image-20240906161321594

后端站点

image-20240906161512514

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

image-20240906165028439

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

最终效果

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

image-20240906165328644 image-20240906165614339

原生 Nginx

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

▼
cmd
复制代码
cd ~
mkdir key

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

1）rz 命令

2）WinSCP

3）其他支持上传的工具

image-20240906163852454

3、查看 Nginx 配置文件

▼
nginx
复制代码
nginx -t

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

image-20240906163413542

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,
};
image.png

后端

  • 需要格式 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
image-20240906150703646

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

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

image-20240906151106212
Nginx
前端
Java
后端
项目
技术
Linux

相关专栏

教程

教程

项目教程

常用教程

常用教程

常用教程

0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
leikooo
leikooo
等级vip
内容推荐
更多
从 0 到 1 可持续 Vibe Coding：我做了一个 harness 工程的开发工作流 Skill
6
OD试用期会被随便裁掉吗？我知道的两个真实例子和保命建议
4
AI 时代一群人在卷笔记软件，我想先把 Markdown 编辑器的底层做好
4
最烦跟后端沟通了 哪怕AI盛行 处理工作
4
Tomcat与Servlet
2
作者分享
更多
IP 数据库体积缩小 31%，关键竟然是合并重复子树
2
提到用 Rust 重写项目，很多人的第一反应往往是性能提升。以 Bun 为例，它最初主要采用 Zig 开发，后来在 2026 年发布的 v1.4 版本中将核心代码迁移到了 Rust。用 Rust 重写，性能、安全性往往是大家想要的，但是有没有想过用 Rust 重写还能发现 bug 呢？ pgrust 这个项就是，他用 Rust 重新实现 PostgreSQL，保持通信协议和 SQL 方言兼容。为了确认新系统的行为和原版一致，开发者需要对着 PostgreSQL 的实际返回逐个比对。结果查着查着，有些异常不是新代码的锅，PostgreSQL 自己就是这样的。pgrust 开发者 Michael Malis 把其中几个报告给了 PostgreSQL 社区。 大概的问题： 1）SP-GiST 空间索引里有个函数判断点的方位，代码认为上、下、同一水平线三种情况已经穷尽了，末尾放了句「impossible case」兜底。结果在特定浮点边界附近，三种判断同时不成立，程序真走进了这个「不可能」的分支 2）日期格式缓存复用时，一个解析模式的标记没重置，导致同一条 JSONPath 查询在同一个会话里，换个执行顺序结果就不一样。 3）pgcrypto 的 crypt() 在某些输入下截断了多字节字符，返回的文本编码不合法。能存进去，但 pg_dump 导出时就炸了。 一个用 Rust 重写的新项目，测着测着，把运行了几十年的 PostgreSQL 里埋着的东西翻了出来。Rust 重写的价值，不一定只在跑得更快、更安全这一件事上。为了做到真正的兼容，开发者得把前人没怎么碰过的边界全走一遍，这个过程本身就在帮原版排雷。
4
ARTS 1025: 唯一字符与同构字符串、省词可能增加阅读负担与重新估算软件的实现成本
5
🎉 1024 程序员节快乐！ 祝编程导航里的每一位程序员：offer 多多，薪资翻倍，面试顺利，早日拿下心仪 offer！💻
17
AST：从 Java 代码理解抽象语法树
5
下载 APP