当前位置: 首页 > 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参考文档

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 跟着GPT学习 Kubernetes ,简称 K8s -- Kind(三)
  • redis 过期监听:高效管理数据生命周期
  • 回归预测|基于北方苍鹰优化极端梯度提升树的数据回归预测Matlab程序NGO-XGBoost多特征输入单输出
  • 光伏电站设备设施巡视卡之转变二维码登记卡
  • 计算机毕业设计 毕业季旅游一站式定制服务平台 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
  • 使用kubeadm快速部署一套K8S集群
  • 设置虚拟机使用主机以太网而不是WiF连接
  • 普元EOS-低开页面下拉选择控件加载列表数据
  • 修改wls2上的默认用户为root
  • mariadb centos 7 安装
  • 百数功能插件技术解析:审批流程设置与数据填写便捷性探讨
  • 《Programming from the Ground Up》阅读笔记:p95-p102
  • Redis使用详解
  • LLM之基于llama-index部署本地embedding与GLM-4模型并初步搭建RAG(其他大模型也可,附上ollma方式运行)
  • 【设计模式】模板方法模式和迭代器模式
  • $translatePartialLoader加载失败及解决方式
  • 03Go 类型总结
  • JavaScript 基础知识 - 入门篇(一)
  • JavaScript 事件——“事件类型”中“HTML5事件”的注意要点
  • linux安装openssl、swoole等扩展的具体步骤
  • orm2 中文文档 3.1 模型属性
  • Python连接Oracle
  • React-flux杂记
  • ReactNative开发常用的三方模块
  • Vue.js源码(2):初探List Rendering
  • 欢迎参加第二届中国游戏开发者大会
  • 使用 5W1H 写出高可读的 Git Commit Message
  • 收藏好这篇,别再只说“数据劫持”了
  • 一些关于Rust在2019年的思考
  • 交换综合实验一
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ​Redis 实现计数器和限速器的
  • ​力扣解法汇总1802. 有界数组中指定下标处的最大值
  • #php的pecl工具#
  • #WEB前端(HTML属性)
  • (11)MATLAB PCA+SVM 人脸识别
  • (3)STL算法之搜索
  • (二)测试工具
  • (附源码)springboot教学评价 毕业设计 641310
  • (附源码)springboot码头作业管理系统 毕业设计 341654
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (六)Flink 窗口计算
  • (微服务实战)预付卡平台支付交易系统卡充值业务流程设计
  • (转)AS3正则:元子符,元序列,标志,数量表达符
  • (转载)CentOS查看系统信息|CentOS查看命令
  • .net core 连接数据库,通过数据库生成Modell
  • .net dataexcel 脚本公式 函数源码
  • /*在DataTable中更新、删除数据*/
  • @vue/cli脚手架
  • [ SNOI 2013 ] Quare
  • [ vulhub漏洞复现篇 ] Hadoop-yarn-RPC 未授权访问漏洞复现
  • [23] 4K4D: Real-Time 4D View Synthesis at 4K Resolution
  • [ASP.NET 控件实作 Day7] 设定工具箱的控件图标
  • [C++初阶]string类的详解