macOS Nginx HTTPS 环境配置

前置阅读: macOS 下 Nginx 安装及设置

近期在部分开发场景中,需要使用的 HTTPS 环境,故研究了下 macOS 下 Nginx HTTPS 环境配置。
( HTTPS 相关知识可自行了解 )

创建自定义 SSL 证书

之前在服务器上一直使用 Let’s EncryptCertbot 脚本一键安装,但是发现本地并无法正确申请证书和使用。
在搜索相关教程和对比之后,发现可以通过 OpenSSL 生成证书或直接使用 mkcert 简易生成证书。

本文主要针对 mkcert 如何创建证书及使用。

安装
使用 macOS 上的 Package Manager - HomeBrew 来安装 mkcert。

1
2
$ brew install mkcert
$ brew install nss # if you use Firefox

创建根证书
创建根证书 CA ( Certificate Authority,即证书颁发机构 ),可以运行以下命令

1
2
3
4
5
6
$ mkcert -install

# 成功安装后输出
# Using the local CA at "/Users/Tuzkiss/Library/Application Support/mkcert" ✨
# The local CA is now installed in the system trust store! ⚡️
# The local CA is already installed in the Firefox trust store! 👍

安装后使用 Keychain Access App 查看安装的证书,点击具体证书可以查看更详细信息:
root-CA-screenshot

创建自签名证书
例如需要针对 tuzkiss.com 、localhost 等域名生成自签名证书,则可以运行以下命令:

1
2
3
4
5
6
7
8
9
10
$ mkcert tuzkiss.com localhost 127.0.0.1

# 成功安装后输出
# Using the local CA at "/Users/Tuzkiss/Library/Application Support/mkcert" ✨
# Created a new certificate valid for the following names 📜
# - "tuzkiss.com"
# - "localhost"
# - "127.0.0.1"

# The certificate is at "./tuzkiss.com+2.pem" and the key at "./tuzkiss.com+2-key.pem" ✅

成功创建之后,会在该目录下生成如下两个文件:

  • 证书 tuzkiss.com+2.pem
  • 私钥 tuzkiss.com+2-key.pem

你可以手动跟改这两个文件名,例如:

1
2
tuzkiss.com+2.pem  -> Tuzkiss-SSL.pem
tuzkiss.com+2-key.pem -> Tuzkiss-SSL-Key.pem

或者可以直接通过 mkcert 中命令参数创建:

1
$ mkcert -cert-file Tuzkiss-SSL.pem -key-file Tuzkiss-SSL-Key.pem tuzkiss.com localhost 127.0.0.1

最终都会生成如下两个文件:
cert-and-key-screenshot

至此,自定义 SSL 证书均已创建完毕。

更多 mkcert 详细使用可查看:https://github.com/FiloSottile/mkcert


Ngixn Server 配置

将上述创建的 SSL 证书和私钥放到合适的位置( 凭个人喜好 ),然后编辑 Nginx 配置文件:

1
2
3
4
5
$ vi /usr/local/etc/nginx/nginx.conf

# or

$ code /usr/local/etc/nginx/nginx.conf

在 nginx.conf 中的 http 字段中配置 server,例如:
( 需要根据实际情况调整 ssl_certificate、ssl_certificate_key、root 等字段 )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
server {
# 同时监听 80、443 端口,并设置 server name 为 tuzkiss.com、localhost
listen 80;
listen 443 ssl;
server_name tuzkiss.com localhost;

# 设置 SSL 证书和私钥地址
ssl_certificate /Users/Tuzkiss/CodeProjects/Tuzkiss-SSL.pem;
ssl_certificate_key /Users/Tuzkiss/CodeProjects/Tuzkiss-SSL-key.pem;

# SSL 会话配置
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;

# SSL 协议、加密配置
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;

# 服务器地址等配置
location / {
root /Users/Tuzkiss/CodeProjects;
index index.html index.htm;
}
}

修改完成后需运行以下命令来重启 Nginx 服务器,保证设置的配置生效:

1
$ sudo nginx -s reload

重启之后可以通过访问上述证书中设定任意 HTTPS 地址验证:

当然也可以通过 Chrome DevTools 中的 Security Overview 查看当前信息:

overview

至此,可以愉快的使用 HTTPS 本地服务器进行开发、调试了~ 🎉


其他设备访问

例如想在 iOS Safari 上访问该域名,则可以通过 iOS 上代理软件 ( Surge / Quantumult X 等) 将 tuzkiss.com 设置本地 IP Host,参考配置如下:

1
2
3
4
5
6
7
8
# Surge iOS
[Host]
tuzkiss.com = 192.168.123.204


# Quantumult X
[dns]
address=/tuzkiss.com/192.168.123.204

然后通过手动信任即可访问:
iOS-screenshot


Webpack devServer 使用

同时生成的证书也可以配合 Webpack devServer 使用,例如设置 webpack.config.js 中配置:
( 需要根据实际情况调整 key、cert、ca 参数 )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
//...
devServer: {
// HTTPS 相关设置
https: true,
key: fs.readFileSync('/Users/Tuzkiss/CodeProjects/Tuzkiss-SSL-Key.pem'),
cert: fs.readFileSync('/Users/Tuzkiss/CodeProjects/Tuzkiss-SSL.pem'),
ca: fs.readFileSync('/Users/Tuzkiss/Library/Application Support/mkcert/rootCA.pem'),

// 基础设置,可根据实际情况调整
contentBase: path.join(__dirname, './demo'),
publicPath: '/dev/',
host: '127.0.0.1',
compress: true,
port: 8080,
hot: true,
allowedHosts: [
'tuzkiss.com'
],
open: true,
openPage: 'https://tuzkiss.com'
}
};

如上设置之后,运行 webpack-dev-server 就可以愉快的直接使用 HTTPS 环境了~

更多 Webpack devServer HTTPS 详细使用可查看:
https://webpack.js.org/configuration/dev-server/#devserverhttps


That’s all, enjoy your life ~ 😏