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

Question

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

移动设备

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

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

对于 Android，您必须安装 CA，然后在应用程序的开发版本中启用用户 root。请参阅此 StackOverflow 答案。

https://github.com/FiloSottile/mkcert

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

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

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

Answer 1

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

\n

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

\n

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

\n

mkcert localhost 192.168.1.17\n\n// The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem" \xe2\x9c\x85\n

\n

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

\n

\n

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

   \n
\n

3. 使用您选择的 Web 服务器提供生成的证书。我使用创建反应应用程序。您可以在此处查看我关于安全上下文中的 PWA 的回答

   \n
\n

\n

Answer 2

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

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

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

简而言之，我会这样做：

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

完整的细节可以在我的文章中找到