使用 mkcert 证书进行 PWA 的本地测试

Question

我正在尝试为我正在处理的 PWA 设置本地开发环境。 我已经在我的 Mac 上安装了 mkcert，并且能够在我的计算机上托管 https://localhost 版本。 现在我想在我的安卓手机上打开这个页面。在 mkcert github 上它说：

移动设备

对于要在移动设备上信任的证书， 您必须安装根 CA。它是 rootCA.pem 文件中的 mkcert -CAROOT 打印的文件夹。

在 iOS 上，您可以使用 AirDrop、通过电子邮件将 CA 发送给自己，或者提供 它来自 HTTP 服务器。安装后，你必须启用完整 相信它。注意：早期版本的 mkcert 遇到了 iOS 错误，如果 您可能在“证书信任设置”中看不到根目录 更新 mkcert 并重新生成根目录。

对于 Android，您必须安装 CA，然后启用用户 植根于您的应用程序的开发版本。看到这个 StackOverflow 回答。

https://github.com/FiloSottile/mkcert

我在手机上安装了 rootCA.pem。关于“启用用户根”的部分不适用，因为这不是一个应用程序。

但是，当我在手机上使用https://[my-local-network-ip]:1234 打开页面时，我收到一条警告，证书不能被信任。

如何信任证书，以便在手机上本地测试 PWA？

Answer 1

我知道你可能已经从这个问题上移开了，因为它已经快一年了。不过，我想分享一下我是如何在安全的环境中本地测试我的 PWA 的。

不对您使用的框架/打包/构建系统做任何假设：

1. 使用mkcert 生成证书和密钥。如果您在本地托管 PWA 并希望通过本地 IP 地址（即192.168.1.x:3000）访问它，您还需要告诉mkcert 生成涵盖该 IP 地址的证书：

mkcert localhost 192.168.1.17

// The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem" ✅

重要提示：大多数路由器会动态分配本地 IP 地址，因此分配静态 IP 是值得的。

1. 将您的 RootCA 从 mkcert 安装到您的 iOS 或 Android 设备上。按照mkcert docs中的说明进行操作

2. 使用您选择的网络服务器提供您生成的证书。我使用创建反应应用程序。你可以看到我关于PWAs in secure context here的回答

Answer 2

我同意您的目标 - 运行基于本地 TLS 的设置对于提高生产力和早期故障排除很有用。

您的问题是基于 DNS 的，您需要通过主机名访问 TLS 安全 URL。

在 Android 端让 DNS 匹配的唯一方法是使用 HTTP 代理，同时运行模拟器或通过 USB 连接的设备。

简而言之，我会这样做：

• 将您的证书颁发给更真实的域名，例如 mycompany.com
• 将此域名添加到您 Mac book 上的 DNS
• 在 Mac 上安装免费代理，例如 proxyman
• 配置 Android 模拟器或设备以使用代理（您还需要在 Android 和 Mac 上信任代理的证书）
• 然后从 Android 浏览到 https://mycompany.com

详情请见my write up