Telegram mini app 本地开发配置

前言： 为了能在telegram里本地调试mini app，参考了网上很多方案，踩了不少坑。最后整了一个适合自己的方案，记录一下。 这个方案一定不是最好的，不过是目前适合我上手开发的方案了。    

• 本文章适合需要在 telegram 本地开发调试 mini app 的开发者。
• 在 BotFather 里配置 web app url 的时候 只能配置 https，对本地调试不友好。于是有了这篇文章

一、解决方案

  Step1: 本地生成证书并使用 local-ssl-proxy 运行该证书，并指向本地项目  

brew install mkcert
mkcert -install #将 mkcert 添加到本地根 CA
mkcert localhost #为您的站点(localhost)生成一个由 mkcert 签名的证书
 

可以看到当前目录下，生成了一个 /certificates 的文件夹，里面有生成的证书。

Step2:  在前端项目下运行下面的代码，注意检查这里证书的路径，为step1生成证书的位置。

npx local-ssl-proxy --key ./certificates/localhost-key.pem --cert ./certificates/localhost.pem

运行结果：

Started proxy: https://localhost:9001 → http://localhost:9000

local-ssl-proxy 默认转发的端口是 9000， 可以把我们前端项目就运行在9000，这样就会默认转发到 9001 端口。此时就完成了本地配置 https 。

Step3:  去 telegram BotFather  里绑定对应 URL。 

这个时候去到 mini app，你会发现还是加载不出来。此时不要慌，因为我们的证书是本地生成的，当然tg无法正常运行。让我们右键打开控制面板，你会看到 console 里有这么一串 code。复制出去浏览器里打开即可正常调试。

到这里我的解决方案就完结了。撒花 🎉   参考文档指路

二、踩过的坑

1. 网上有种说法是 打开 Test 环境 开发， 就可以直接绑定 http 域名。这块我试了很久，在添加测试账号那一步一直卡死，无法收到验证码。没有好的解决办法。如果有会的兄弟可以解答一下。
2. 在本地运行 https 服务这一块， 由于我使用的 NextJS 框架，这个框架本身也已经支持了本地运行 https。 指令如下：

next dev --experimental-https

        不过运行后遇到报错无法生成本地证书，使用自定义证书路径运行：

next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem

        这样能够成功运行，但是项目却无法正常打开，会遇到一些奇怪的报错。这些报错在 "yarn dev"的时候是不会出现的。这里我也没有很好的解决。所以放弃了直接使用 next 指令运行 https 的方案。  NextJS参考文档