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

Question

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

移动设备 要在移动设备上信任证书，必须安装根CA。它是由mkcert -CAROOT打印的文件夹中的-CAROOT文件。 在iOS上，您可以使用AirDrop，给自己发送CA电子邮件，也可以从HTTP服务器提供CA。安装它之后，必须启用对它的完全信任。注意:早期版本的mkcert遇到了iOS错误，如果您在“证书信任设置”中看不到根，则可能必须更新mkcert并重新生成根。 对于Android，您必须安装CA，然后在应用程序的开发构建中启用用户根。请看这个StackOverflow的答案。 https://github.com/FiloSottile/mkcert

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

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

我如何信任证书，以便在本地测试PWA在我的电话？

Answer 1

我同意您的目标--运行基于本地TLS的设置在效率和早期故障排除方面非常有用。

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

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

总之，我会这样做：

• 向更真实的域名(如mycompany.com )颁发证书
• 将此域名添加到Mac簿上的DNS中。
• 在Mac上安装免费代理(如丙氧人 )
• 配置Android模拟器或设备以使用代理(您还需要信任代理在Android和Mac上的证书)
• 然后从Android浏览到https://mycompany.com

详细信息可在我的写作中获得

Answer 2

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

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

1. 使用mkcert生成证书和密钥。如果您在本地承载PWA &希望通过本地IP地址(即192.168.1.x:3000 )访问PWA，则还需要告诉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文档中的说明
2. 向您选择的web服务器提供您生成的证书。我使用。你可以看到我对这里的PWAs在安全上下文中的回答