serve 可以快速启动一个静态网站或 SPA 应用,或只是静态文件服务,可在本地或局域网内使用。
使用
安装
pnpm install -g serve
启动服务,默认端口 3000
# 当前目录启动静态文件服务
serve
# 指定目录启动
serve ./public
# 指定端口
serve -p 8080
启动 SPA 应用服务,例如 React 或 Vue 中的 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":""}}]
























