本地配置https开发环境——window版

墨迎
4,040 阅读2分钟

最近看到一个跟飞书、notions等类似的开源编辑器——blocksuite，里面的图片组件就涉及到加解密的使用，而这个加解密必须基于https协议才能使用。
为了贴近项目开发环境，在本地搭了一个https环境，以下是搭建过程。

安装OpenSSL

image.png
  • 常规步骤安装，最后一步可以选择向作者捐献10美元
  • 把安装目录<你的安装目录>\bin拷进系统环境变量（后面需要全局使用）
  • 在命令行测试是否安装成功 openssl version

image.png

安装Nginx

  • 下载Nginx，本文选了稳定版 nginx/Windows-1.24.0

image.png

  • 解压到安装目录
  • cd 到安装目录启动nginx start nginx

在本地注册证书颁发机构

一、创建私钥

  • 找个合适的地方创建目录 G:\nginx-1.24.0\ssl
  • 创建一个名为rootSSL.key的私钥 (可以改其他名字)
  • 定义一个密码（要记住，后面会用到）
openssl genrsa -des3 -out rootSSL.key 2048

二、创建证书文件

  • 用上一步创建的私钥文件rootSSL.key，创建一个为期1024天（可以更多天）的证书文件rootSSL.pem；
  • 会提示你输入一些注册信息，随便填即可
openssl req -x509 -new -nodes -key rootSSL.key -sha256 -days 1024 -out rootSSL.pem

三、把证书导入到系统证书管理控制中心

  • 进去Microsoft 管理控制台
    image.png
  • 文件 → 添加/删除管理单元
    image.png
  • 在左侧找到证书并双击 image.png

image.png

image.png

image.png

  • 导入证书

image.png

image.png

image.png

image.png

image.png

image.png

image.png

创建几个本地域名

本文的本地一级域名为：jm.com

  • 打开文件C:\Windows\System32\drivers\etc\hosts
  • 在最后新的一行输入
127.0.0.1 jm.com
127.0.0.1 www.jm.com
127.0.0.1 blocksuite.jm.com

给本地域颁发证书

为域名创建私钥

openssl req -new -sha256 -nodes -out jm.com.csr -newkey rsa:2048 -keyout jm.com.key -subj "/C=AU/ST=NSW/L=Sydney/O=Client One/OU=Dev/CN=jm.com/emailAddress=hello@jm.com"

使用根 SSL 证书颁发新证书

subjectAltName=DNS:*.jm.com 颁发通配域名证书，以后可以在任意二级域名使用相同的证书文件

openssl x509 -req -in jm.com.csr -CA rootSSL.pem -CAkey rootSSL.key -CAcreateserial -out jm.com.crt -days 500 -sha256 -extensions "authorityKeyIdentifier=keyid,issuer\n basicConstraints=CA:FALSE\n keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment\n subjectAltName=DNS:*.jm.com"

至此域名和证书都准备好了，接下来在Nginx配置https；

给域名配置https

server {
    listen 443 ssl;
    server_name jm.com; # 域名
    ssl_certificate G:/nginx-1.24.0/ssl/jm.com.crt; 
    ssl_certificate_key G:/nginx-1.24.0/ssl/jm.com.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
    location / {
        proxy_pass http://localhost:5173; # 项目地址
    }
}

server {
    listen 443 ssl;
    server_name blocksuite.jm.com; # 域名
    ssl_certificate G:/nginx-1.24.0/ssl/jm.com.crt;
    ssl_certificate_key G:/nginx-1.24.0/ssl/jm.com.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
    location / {
        proxy_pass http://localhost:3000; # 项目地址
    }
}

在浏览器打开jm.com ， 这里虽然显示不安全，但不影响开发，只要对着页面输入thisisunsafe即可正常访问

image.png

注意：

  • 如果电脑使用了翻墙等代理本地dns的工具，有可能会影响到本地域名的访问

image.png

参考链接

avatar
文章
阅读
粉丝