Tolan/frontend/SSL证书配置.md

Frontend SSL 证书配置说明

配置完成清单

✅ SSL 证书已生成 (/ssl/cert.pem 和 /ssl/key.pem)
✅ .env 文件已创建并配置证书路径
✅ .env.example 模板文件已创建
✅ vite.config.ts 已支持 SSL 证书读取

---

环境变量说明

变量名	值	说明
VITE_SSL_KEYFILE	../ssl/key.pem	SSL 私钥路径
VITE_SSL_CERTFILE	../ssl/cert.pem	SSL 证书路径

---

启动命令

cd frontend
npm run dev

启动后将显示：

✅ 使用SSL证书:
  证书: /Users/wuzilong/work/00code/Lyrria/ssl/cert.pem
  私钥: /Users/wuzilong/work/00code/Lyrria/ssl/key.pem

---

访问地址

类型	URL
本地访问	https://localhost:3000
局域网访问	https://192.168.43.35:3000

---

浏览器安全警告

首次访问会提示"不安全"，因为是自签名证书：

1. Chrome: 点击"高级" → "继续访问"
2. Safari: 点击"显示详细信息" → "访问此网站"
3. Firefox: 点击"高级" → "接受风险并继续"

---

重新生成证书

如果需要添加新的 IP 地址：

cd ssl
# 编辑 openssl.cnf 的 [alt_names] 部分
vim openssl.cnf

# 重新生成证书
openssl req -x509 -newkey rsa:4096 -nodes \
  -out cert.pem -keyout key.pem -days 365 \
  -config openssl.cnf -extensions v3_req \
  -subj "/C=CN/ST=Beijing/L=Beijing/O=Lyrria/CN=localhost"

---

文件结构

frontend/
├── .env              # 环境变量（不提交到 Git）
├── .env.example      # 环境变量模板
└── vite.config.ts    # Vite 配置（已支持 SSL）

ssl/
├── cert.pem          # SSL 证书
├── key.pem           # SSL 私钥
└── openssl.cnf       # 证书配置