likes
comments
collection
share

Webpack devServer 搭配 Nginx 开启 HTTPS 本地调试

作者站长头像
站长
· 阅读数 79

前言

项目开发中，和后端商定，决定使用 https 进行联调。所以前端进行本地开发时，采用了开发服务器（Webpack devServer）使用 https 服务，Nginx 开 443 端口，然后代理到本地的 https://127.0.0.1:8080 的方案。不过，在开发之前，需要解决证书的问题，这里总结出来和大家分享一下。

前期准备——Windows 安装 OpenSSL

众所周知， HTTPS 中的 “S” 就是指 SSL/TLS，即让 HTTP 运行在了安全的 SSL/TLS 协议上。

说到 TLS，就不能不提一下 OpenSSL：

OpenSSL，它是一个著名的开源密码学程序库和工具包，几乎支持所有公开的加密算法和协议，已经成为了事实上的标准，许多应用软件都会使用它作为底层库来实现 TLS 功能，包括常用的 Web 服务器 Apache、Nginx 等。

下载地址网上有很多，就不一一列举了，文末也会将 OpenSSL 连同配置手册 和 Nginx包 一并发到网盘上供大家下载，当然大家也可前往 OpenSSL官网 自行下载。

先安装 Win64OpenSSL 软件，默认安装在 C:\Program Files\OpenSSL-Win64 目录下。打开后，找到 start.bat 文件，就可以开始在里面输入命令，着手生成证书了。

前期准备——本地配置 HTTPS 证书

关于 Mac 的配置，都放在网盘的手册中，有需要可以自取，这里介绍 Windows。

step1 创建根SSL证书

根SSL证书可以对任意数量的独立域名的证书进行签名。我都统一放在 D:\ssl 文件夹下。

step1-1 生成 RSA-2048 密钥

输入以下命令，生成一个 RSA-2048 密钥并将其保存到文件 rootCA.key 中。此文件将用作生成根SSL证书的密钥。（每次使用此特定密钥生成证书时，都会提示要求输入一个pass短语，随便填一个即可）

openssl genrsa ‐des3 ‐out D:/ssl/rootCA.key 2048

step1-2 创建新的根SSL证书

输入以下命令，使用密钥创建新的根SSL证书，将它保存到一个名为 rootCA.pem 的文件中：

openssl req ‐x509 ‐new ‐nodes ‐key D:/ssl/rootCA.key ‐sha256 ‐days 1024 ‐out D:/ssl/rootCA.pem

本证书有效期为1024天。你可以改成想要的任意天数（还会提示您输入国家、组织等其他信息，我们随机就可以了）。

Webpack devServer 搭配 Nginx 开启 HTTPS 本地调试

step2 - 域SSL证书

现在，可以使用根SSL证书专门为位于 localhost 的本地开发环境颁发证书。

输入以下命令，创建一个新的 OpenSSL 配置文件 server.csr.cnf，以便在创建证书时导入这些设置。

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

[dn]
C = cn
ST = RandomState
L = RandomCity
O = RandomOrganization
OU = RandomOrganizationUnit
emailAddress = javascript.abc@gmail.com
CN = localhost

接着，创建一个 v3.ext 文件以创建一个 X509 v3 证书。注意这里是如何指定 subjectAltName 的。

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

[alt_names]
#这里可以是多个域名，如DNS.1、DNS.2、DNS.3 ...... 这行是备注可以删掉
DNS.1 = localhost
DNS.2 = 127.0.0.1
DNS.3 = api.abc.com

继续输入以下命令，使用 server.csr.cnf 中存储的配置设置为本地主机创建证书密钥。并将该密钥存储在 server.key 中。

openssl req ‐new ‐sha256 ‐nodes ‐out D:/ssl/server.csr ‐newkey rsa:2048 ‐keyout D:/ssl/server.key ‐config D:/ssl/server.csr.cnf

最后输入以下命令，证书签名请求通过前面创建的根SSL证书发出，以便为 localhost 创建域证书。输出是一个名为 server.crt 的证书文件。

openssl x509 ‐req ‐in D:/ssl/server.csr ‐CA D:/ssl/rootCA.pem ‐CAkey D:/ssl/rootCA.key ‐CAcreateserial ‐out D:/ssl/server.crt ‐days 500 ‐sha256 ‐extfile D:/ssl/v3.ext

本地计算机导入 rootCA.pem 与 server.crt

window + R 组合键调出运行运行工具后，输入 certlm.msc ，之后导入 rootCA.pem 与 server.crt。注意：是在“受信任的根证书颁发机构”目录下。

Webpack devServer 搭配 Nginx 开启 HTTPS 本地调试

Webpack devServer 搭配 Nginx 开启 HTTPS 本地调试

至此，本地 HTTPS 证书终于配置好了。

Webpack devServer 开启 HTTPS 服务

其实一开始，我只给 Nginx 开启 HTTPS 监听443端口，但并没有给 devServer 开启 HTTPS 服务，所以踩了一个坑：发现请求中有这么一个接口 https://127.0.0.1:8080/sockjs-node/info?t=1670686151497，会一直报错，然后不断的重新发起。于是找了一下这个叫 sockjs 的玩意儿：

SockJS is a JavaScript library (for browsers) that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server, with WebSockets or without. This necessitates the use of a server, which this is one version of, for Node.js.

简单翻译下就是 SockJS 提供类似 WebSocket 的对象。在浏览器和 web 服务器之间创建了一个低延迟、全双工、跨域的通信通道。

所以回头看我的配置：Nginx 是 HTTPS ,而 devServer 是 HTTP，这就导致了开发服务器与代理服务器协议不一致的问题，这样开发服务器会不知道如何确定访问源。于是会不断发起重连。 所以接下来给 devServer 也配上 HTTPS，这里主要注意两个地方的修改：

// 两个地方的 publicPath 都要换下
{
    output: {
        //  其他配置....
        publicPath: 'https:127.0.0.1:8080/',
    },
    devServer: {
        // 可用的 HTTPS 服务
        https: true,
        // 此路径下的打包文件可在浏览器中访问。
        publicPath: 'https:127.0.0.1:8080/',
        //  其他配置....
    },
}

关于 devServer 中的 HTTPS 配置，还有很多，比如可以自己提供证书，设置额外的 TLS 配置项等，具体可以参见 #devserverhttps。

当然，官网同时也警告 https 配置项已弃用，大家也可在 webpack-dev-server V4.4.0+ 版本中的server 属性中使用自签名证书开启：

module.exports = {
  //...
  devServer: {
    server: 'https',
  },
};

Nginx 配置

找到 nginx.conf 配置文件，翻到最下面，找到 # HTTPS server 那一段，在下面修改 443 端口的配置：

http {
    # HTTPS server
    #
    server {
        listen       443 http2 ssl;
        # 域名 ↓:
        server_name  test.hahaha.com;

        # 证书配置 (换成自己的证书、密钥所在目录 ↓)
        ssl_certificate      D:/ssl/server.crt;
        ssl_certificate_key  D:/ssl/server.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        location / {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-Nginx-Proxy true;
            # 注意 ↓: 是代理到 https
            proxy_pass https://127.0.0.1:8080;
            proxy_redirect off;
        }
    }
}

在 Nginx 目录（注意不是 conf 目录里！）下打开 cmd，启动 Nginx。

# windows启动
start nginx

# 重启
nginx -s reload

# 关闭
nginx -s stop

# 查看端口
netstat -an | findstr 端口 # Windows 系统
netstat -an | grep 端口 # Linux/Mac 系统

# 测试web服务
curl -i 主机:端口

配置本地 host

可以安装 SwitchHosts 配置本地host。当然，要是懒得下，也可以直接到C:\Windows\System32\drivers\etc 目录下打开 host 文件添加。

# 本地 host
127.0.0.1 test.hahaha.com

接下来就可以愉快的在本地进行 HTTPS 调试了。本期就分享到这里，欢迎大家留言讨论，一起进步！

参考资料

  1. HTTPS是什么？SSL/TLS又是什么？
  2. windows安装OpenSSL
  3. sockjs-npm
  4. webpack-devserver-https
  5. Nginx包+WindowOpenSSL+HTTPS配置手册（提取码：e7w0）
转载自:https://juejin.cn/post/7175867889424007227
评论
请登录