当前位置: 首页 > news >正文

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参考文档

http://www.lryc.cn/news/429851.html

相关文章:

  • python发票查验接口助您拒绝做糊涂账、发票ocr
  • 【Linux】线程控制|POSIX线程库|多线程创建|线程终止|等待|线程分离|线程空间布局
  • JimuReport 积木报表 v1.8.0 版本发布,开源可视化报表
  • 性能优化理论篇 | swap area是个什么东西
  • Photoshop (PS)下载安装win/mac版
  • 初识redis:Set类型
  • Qt 设置QTableView的某列或某行只读
  • 这么多焊工证,我该拥有那种焊工证呢?
  • HttpWebRequest访问https请求被中止: 未能创建 SSL/TLS 安全通道
  • 响应式Web设计:纯HTML和CSS的实现技巧
  • linux centos 防火墙常用命令
  • iOS18 Beta7 最终测试版推送:苹果的又一次技术飞跃
  • 超详细!2024叉车证办理及考试流程详解!速看!
  • 浅谈监听器插件之SSHMon Samples Collector
  • R语言论文插图模板第7期—分组散点图
  • 设计模式 抽象工厂方法模式
  • PowerShell 一键配置IP
  • 【Pyhthon读取 PDF文件表格 ,转为 CSV/TSV/JSON文件】
  • <数据集>商品条形码识别数据集<目标检测>
  • 无人机系统的关键技术
  • (24)(24.4) MultiWii/DJI/HDZero OSD (version 4.2 and later)(一)
  • HiveSQL:提取json串内容——get_json_oject和json_tuple
  • Clickhouse 二进制安装
  • 大数据开发工程师面试整理-项目经验
  • 游戏引擎详解——图片
  • 电商API数据接口在电商运营电商数据分析中的作用?
  • Java OkHttp使用(二)
  • 宝塔(bt.cn)面板新手小白使用中常见问题
  • 【LeetCode:3133】数组最后一个元素的最小值(Java)
  • FCARM - Output Name not specified, please check ‘Options for Target - Utilities‘解决方法