macOS Nginx HTTPS 环境配置

Posted on Edited on Comments:

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

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

创建自定义 SSL 证书

之前在服务器上一直使用 Let’s Encrypt 的 Certbot 脚本一键安装，但是发现本地并无法正确申请证书和使用。
在搜索相关教程和对比之后，发现可以通过 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 ~ 😏