如何获取 Angular ng 服务开发服务器的 HTTPS 回调答案

【问题标题】：How to get HTTPS callbacks for Angular ng serve development server如何获取 Angular ng 服务开发服务器的 HTTPS 回调
【发布时间】：2020-07-16 14:40:41
【问题描述】：

我正在针对 Jumio NetVerify 服务进行开发，该服务不接受 URL 中的自定义端口，但需要具有真正 HTTPS 证书的完全限定域。

如何让 Jumio NetVerify 外部服务与我以 ng serve 运行的本地 Angular 开发服务器一起工作？

【问题讨论】：

标签： angular https lets-encrypt ngrok certbot

【解决方案1】：

这是使用 ngrok 高级订阅，它允许您定义自己的区域和域名。更多说明适用于 macOS。

从自制软件安装 ngrok 和 certbot。

brew cask install ngrok
brew install certbot

在本地登录 ngrok。从 ngrok.io 获取您的 authtoken。

ngrok authtoken ...

为您的 ngrok 个人域执行 HTTP 80 隧道：

ngrok http -region eu -hostname=mikko.eu.ngrok.io 80

现在我们需要获取 Let's Encrypt 颁发的证书。假设我们在一个名为./certs 的空目录中工作，我们想要在其中提取我们的证书文件。当隧道运行时，在另一个终端中转到工作目录并执行以下操作：

cd certs
certbot
certonly --standalone --preferred-challenges http -d mikko.eu.ngrok.io --work-dir . --logs-dir . --config-dir .

这将通过 ngrok HTTP 80 隧道提取证书：

 - Congratulations! Your certificate and chain have been saved at:
   /Users/moo/code/token-swap/certs/live/mikko.eu.ngrok.io/fullchain.pem

现在我们有了真正的 HTTPS 证书，所以我们可以通过ngrok 隧道连接到我们的本地开发环境。假设我们正在使用在端口 4200 中运行的 Angular ng serve。

让我们重新开始ngrok：

ngrok tls -region eu -hostname=mikko.eu.ngrok.io -key certs/archive/mikko.eu.ngrok.io/privkey1.pem -crt certs/archive/mikko.eu.ngrok.io/fullchain1.pem 4200

然后启动你的 Angular 服务器：

ng serve --public-host mikko.eu.ngrok.io

现在您可以通过两个 URL 访问本地 Angular 开发环境：

https://mikko.eu.grok.io

http://localhost:4200

更多信息：

More tips on ngrok info

DigitalOcean CertBot standalone guide

【讨论】：