生成自签 https证书

最新推荐文章于 2025-09-04 11:57:05 发布

原创最新推荐文章于 2025-09-04 11:57:05 发布 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#https #网络协议 #http

运维专栏收录该内容

11 篇文章

订阅专栏

生成自签 https证书

前言

很多场景需要 https 才能访问，比如：

1、腾讯的 im h5 只有 https 才能访问手机硬件设备

2、ios 发布应用市场只有 https 域名才能审核通过

下面介绍快速生成自签 https 证书

一、生成 https 证书

对比选择：

如果仅本地测试可以选择通用https 证书，可以用在各种项目中，但是电脑还是会报警告需要额外处理

如果用于服务器长时间建议证书绑定域名，可以减少很多报警

1、生成通用 https证书

新建ssl 目录，cd 到此目录使用OpenSSL 命令生成一个自签名的 SSL 证书和私钥

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

此时会生成两个文件：key.pem、cert.pem

2、生成指定域名 https 证书

新建ssl 目录，cd 到此目录，新建文件 ssl.conf，内容如下

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn
x509_extensions = v3_req

[dn]
CN = zhanglei.nasfuns.fun  # 你的域名

[v3_req]
subjectAltName = @alt_names

[alt_names]
DNS.1 = zhanglei.nasfuns.fun  # 主域名
DNS.2 = *.nasfuns.fun         # 泛子域名（可选）
IP.1 = 192.168.1.100          # 服务器 IP（可选）
DNS.3 = localhost             # 本地测试

运行以下命令生成新证书

注意：最后的域名要是你的

openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365 -nodes -config ssl.conf -subj "/CN=zhanglei.nasfuns.fun"

此时会生成两个文件：key.pem、cert.pem

验证证书 SAN 信息

openssl x509 -in cert.pem -noout -text | grep -A1 "Subject Alternative Name"

输出应包含类似内容：

X509v3 Subject Alternative Name:    DNS:zhanglei.nasfuns.fun, DNS:*.nasfuns.fun, IP Address:192.168.1.100, DNS:localhost

二、前端项目配置https

1、vue 项目配置 https

配置vite.config.ts

import fs from "fs";

export default defineConfig({
  // 。。。此处省略你的逻辑
  server: {
    host: '0.0.0.0', // 允许外部访问
    open: true,
    https: { // 配置 HTTPS
      key: fs.readFileSync(path.resolve(__dirname, 'key.pem')), // 私钥路径
      cert: fs.readFileSync(path.resolve(__dirname, 'cert.pem')), // 证书路径
    },
    // Solve the problem of infinite page refresh after whistle proxy
    hmr: true,
    proxy: {
      '/api': {
        target: 'https://service.trtc.qcloud.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
});

2、React 项目配置 https

搜索createServer 找出以下配置进行替换即可

// http常见写法
var http = require('http');
var server = http.createServer(app);

// 改成 https
var https = require('https');
const fs = require('fs');
// 新增 SSL 配置
const sslOptions = {
    key: fs.readFileSync('./ssl/key.pem'),
    cert: fs.readFileSync('./ssl/cert.pem')
};
var server = https.createServer(sslOptions, app);