前言: 为了能在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。复制出去浏览器里打开即可正常调试。
到这里我的解决方案就完结了。撒花 🎉 参考文档指路
二、踩过的坑
- 网上有种说法是 打开 Test 环境 开发, 就可以直接绑定 http 域名。这块我试了很久,在添加测试账号那一步一直卡死,无法收到验证码。没有好的解决办法。如果有会的兄弟可以解答一下。
- 在本地运行 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参考文档