macOS 建立 https 开发环境

淮城一只猫 • • 奇技淫巧
阅读量 0 次 • 评论量 0 个

前言

因为项目有环境开发要求，只能在 https 环境下开发，所以就有了本地 https 搭建的博文，实现起来也很简单。

生成证书

如果需要本地证书并且让系统信任则需要自己生成，在 macOS 系统自带 openssl 命令，如果没有可以在 brew 包管理器下进行安装。

mkdir sslout
cd sslout
openssl genrsa -des3 -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

填入信息注意 Common Name (eg, fully qualified host name) []: 这个问题，填入信息应该是 绑定的域名 一致。

根据提示输入信息生成相关的证书，然后文件夹下生成俩个密钥文件，把其中的 rootCA.pem 文件拖进 钥匙串访问 应用中的 系统 菜单栏目里，并且在详细信任栏里选择 始终信任。

ssl 证书

新建 OpenSSL 配置文件，这样在终端无需输入大量的个人信息，新建 server.csr.cnf 文件：

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

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

新建 v3.ext 文件，创建 x509 v3 证书：

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

然后在终端输入命令生成 server.key：

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <(cat server.csr.cnf)

继续生成 server.crt：

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

这样你得到的 ssl 相关证书文件。

在 vue-cli 使用

vue-cli 实际上是 webpack-dev-server 配置项，配置起来也简单：

devServer: {
  https: {
    key: fs.readFileSync('./ssl/server.key'),
    cert: fs.readFileSync('./ssl/server.crt'),
    ca: fs.readFileSync('./ssl/rootCA.pem')
  },
  disableHostCheck: true
}

只需要导入对应的证书即可。

喵~