惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
人人都是产品经理
人人都是产品经理
Cisco Talos Blog
Cisco Talos Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
V
V2EX
博客园 - 三生石上(FineUI控件)
Martin Fowler
Martin Fowler
WordPress大学
WordPress大学
D
Docker
S
SegmentFault 最新的问题
博客园 - 聂微东
美团技术团队
Apple Machine Learning Research
Apple Machine Learning Research
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Last Week in AI
Last Week in AI
M
MIT News - Artificial intelligence
F
Fortinet All Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
The GitHub Blog
The GitHub Blog
GbyAI
GbyAI
L
LangChain Blog
Vercel News
Vercel News
博客园 - 叶小钗
MongoDB | Blog
MongoDB | Blog
Stack Overflow Blog
Stack Overflow Blog
H
Help Net Security
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Cloudflare Blog
Engineering at Meta
Engineering at Meta
T
Threat Research - Cisco Blogs
T
Threatpost
Scott Helme
Scott Helme
T
Tailwind CSS Blog
Latest news
Latest news
Stack Overflow Blog
Stack Overflow Blog
Blog — PlanetScale
Blog — PlanetScale
The Register - Security
The Register - Security
罗磊的独立博客
P
Proofpoint News Feed
腾讯CDC
S
Schneier on Security
雷峰网
雷峰网
A
About on SuperTechFans
T
Tenable Blog
F
Full Disclosure
Cyberwarzone
Cyberwarzone
博客园_首页
有赞技术团队
有赞技术团队
K
Kaspersky official blog

文章列表

win or mac clash 无 TUN 让 Antigravity、Chrome 强制 proxy(解决 Antigravity 无法加载选择 model、自动更新无法登录、跳转) 【大杂烩】在 pnpm 中直接修改 node_modules(.pnpm) 中的依赖项,项目中持久化 - pnpm 中的依赖处理、幽灵依赖、寻址规则等 在 html 中直接使用 Esm、Jsx 脚本快速调试和使用 React@19 和 Vue@3 源码,解决 React19 UMD 构建等问题 一键在本地批量检测并升级更新 package.json 中的模块依赖,ncu(npm-check-updates)在 npm、pnpm 或 workspace 项目中的使用教程 解决 Mac Docker Desktop 中启动出现的问题合集 通过阿里云、腾讯云无服务器搭建自定义的企业域名邮箱,实现在 QQ邮箱 收发等功能(附腾讯 SMTP 和 IMAP) 解决使用代理(clash 等)进行 SSH 连接(如 Github ssh key clone/push)出现 kex_exchange_identification 错误 静态文件资源 cdnjs, jsdelivr 抖音字节国内快速 CDN 镜像推荐【2025】- 仍在使用 bootcdn 和 staticfile CDN 请注意验证资源的完整性(SRI) pnpm monorepo 中管理依赖的最佳实践,与 Catalogs(目录)协议的使用(monorepo 中统一版本管理) Web 安全中的 Secure Contexts(安全上下文)- 解决在本地中使用 clipboard 或 Crypto 等 API 限制或关闭上下文限制 利用 Github Actions 和 Acme 自动申请、更新和部署至阿里云、腾讯云 CDN Lets Encrypt SSl\TLS ECC RSA 双证书 【CSS】解决在 flex 容器中使用 align-content 或 justify-content 属性 center 居中时的溢出滚动和截断问题 - 理解 safe 关键字 在线工具 - 一键获取下载抖音无水印视频、抖音去水印解析工具、下载抖音无水印高清图集【2025 最新】 【React Router】v6 data router 在非组件(或工具方法)中如何优雅的跳转路由
使用 serve 配合 openssl 或 mkcert 创建本地自签名可信任的证书 - 创建本地 TLS\SSL https 协议服务
kshao · 2024-09-10 · via

serve 可以快速启动一个静态网站或 SPA 应用,或只是静态文件服务,可在本地或局域网内使用。

使用

安装

pnpm install -g serve

启动服务,默认端口 3000

# 当前目录启动静态文件服务
serve

# 指定目录启动
serve ./public

# 指定端口
serve -p 8080

启动 SPA 应用服务,例如 ReactVue 中的 history 模式

# 在当前目录 build 文件启动服务
serve -s build

serve -s dist

启动 SSL\TLS 服务

  • --ssl-cert:证书路径
  • --ssl-key:证书密钥路径
serve --ssl-cert cert.pem --ssl-key key.pem
# or
serve --ssl-cert ~/ssl/cert.pem --ssl-key ~/ssl/key.pem

创建本地 SSL 证书

openssl

windows 系统需要自行安装

# -nodes: No DES 加密
# -days 3650: 证书有效期(约10年)。
# -keyout key.pem: 生成的私钥文件的名称和位置。
# -out cert.pem: 生成的证书文件的名称和位置。

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

使用 openssl 可以快速创建一个自签名的证书,但是缺少信任的证书链和域名验证等,导致使用该证书时无法通过浏览器的验证

[{"url":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9gy1htixvwyudtj32eq0ze7b4.webp?imageMogr2/thumbnail/!50p","dataset":{"originPic":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9gy1htixvwyudtj32eq0ze7b4.webp","thumbnail":""}},{"url":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9gy1htixvy7oolj325m186qdu.webp?imageMogr2/thumbnail/!50p","dataset":{"originPic":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9gy1htixvy7oolj325m186qdu.webp","thumbnail":""}}]

虽然在 Chrome 中会显示 证书无效,但是仍可以通过 https 协议进行访问,相关 Web Api 也能正常使用。例如 Crypto

if (isSecureContext) {
  console.log(window.crypto.randomUUID()); // xxxx-xxxx-xxxx-xxxx
} else {
  console.log(window.crypto.randomUUID); // undefined
}

mkcert

当然,使用 openssl 也可以配置完整的证书链,但是操作繁琐,管理麻烦,建议使用 mkcert 来快速创建本地受信任的证书。

安装

使用 Homebrew

brew install mkcert

# if you use Firefox
brew install nss
choco install mkcert

安装 根证书

$ mkcert -install

Created a new local CA 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

安装后会在系统信任证书中,添加由 mkcert 生成的证书

# 查看证书路径
$ mkcert -CAROOT

# ~/Library/Application Support/mkcert

[{"url":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9ly1htj17zgtaaj315c0pi121.webp?imageMogr2/thumbnail/!50p","dataset":{"originPic":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9ly1htj17zgtaaj315c0pi121.webp","thumbnail":""}},{"url":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9ly1htj0x9mcijj30sc0ogjx6.webp?imageMogr2/thumbnail/!50p","dataset":{"originPic":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9ly1htj0x9mcijj30sc0ogjx6.webp","thumbnail":""}}]

创建 域名 或 IP 证书

在当前目录下创建证书

mkcert 127.0.0.1 #创建IP证书

# or
mkcert local.ksh7.com #或创建域名证书

# 多个域名一起生成
mkcert example.com "*.example.com" example.test localhost 127.0.0.1

指定有效期

mkcert -cert-file cert.pem -key-file key.pem -validity 365 example.com

指定加密方式

mkcert -cert-file cert.pem -key-file key.pem -validity 365 example.com

使用证书

mkcert 可以生成符合 证书信用链 的证书,可通过 Chrome 的检测

serve --ssl-cert cert.pem --ssl-key key.pem

[{"url":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9gy1htixvy0x39j329i16ywpy.webp?imageMogr2/thumbnail/!50p","dataset":{"originPic":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9gy1htixvy0x39j329i16ywpy.webp","thumbnail":""}},{"url":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9ly1htj17zhunmj315o0pwgx2.webp?imageMogr2/thumbnail/!50p","dataset":{"originPic":"https://static.ksh7.com/post/ssl-local-openssl/0085UwQ9ly1htj17zhunmj315o0pwgx2.webp","thumbnail":""}}]