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.rhkb.cn/news/408902.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拼多多20家店铺登满了怎么办

解决拼多多多店铺管理难题:河鱼浏览器的妙用! 在电商领域,拼多多已经成为许多商家的重要销售渠道。然而,对于同时管理多个拼多多店铺的商家来说,如何高效地运营这些店铺成为了一大挑战。特别是当你的店铺数量达到20家…

简化登录流程,助力应用建立用户体系

随着智能手机和移动应用的普及,用户需要在不同的应用中注册和登录账号,传统的账号注册和登录流程需要用户输入用户名和密码,这不仅繁琐而且容易造成用户流失。 华为账号服务(Account Kit)提供简单、快速、安全的登录功…

docker镜像,ip,端口映射,持久化

docker 镜像的迁移:导出和导入镜像 查看镜像: [rootdocker ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE centos latest 5d0da3dc9764 2 years ago 231MB 打包 将镜像打包,找到save,可以将…

【复旦微FM33 MCU 外设开发指南】外设篇1——GPIO

前言 本系列基于复旦微FM33系列单片机的DataSheet编写,旨在提供一些开发指南。 本文章及本系列其他文章将持续更新,本系列其它文章请跳转【复旦微FM33 MCU 外设开发指南】总集篇 本文章最后更新日期:2024/08/25 文章目录 前言GPIO工作时钟…

DevOps入门(上)

1: DevOps概念 DevOps: Development 和 Operations 的组合 DevOps 看作开发(软件工程)、技术运营和质量保障(QA)三者的交集。 突出重视软件开发人员和运维人员的沟通合作,通过自动化流程来使…

私域流量的落脚点与开源 AI 智能名片 2+1 链动商城小程序

摘要:本文探讨了私域流量的重要性及其落脚点,分析了快钱收割思维在私域流量运作中的弊端。同时,引入开源 AI 智能名片 21 链动商城小程序,阐述其在成就人格化 IP 和打造品牌域、通过直播电商规模化变现方面的作用,为企…

[论文笔记]Improving Retrieval Augmented Language Model with Self-Reasoning

引言 今天带来一篇百度提出的关于提升RAG准确率的论文笔记,Improving Retrieval Augmented Language Model with Self-Reasoning。 为了简单,下文中以翻译的口吻记录,比如替换"作者"为"我们"。 检索增强语言模型(Retrie…

PostgreSQL11 | 事务处理与并发控制

PostgreSQL11 | 事务处理与并发控制 本文章代码已在pgsql11.22版本上运行且通过,展示页由pgAdmin8.4版本提供,本文章第一次采用md文档,效果比csdn官方富文本编辑器好用,以后的文章都将采用md文档 事务管理简介 事物是pgsql中的…

跨越语言障碍:2024四款实用在线翻译工具评测!

随着技术的不断进步,各种在线翻译工具层出不穷,帮助我们轻松跨越语言的鸿沟。今天,让我们一起探索几款非常实用的在线翻译工具! 福昕在线翻译 直达链接: https://fanyi.pdf365.cn/ 福昕在线翻译是一款专注于文档翻…

LeetCode 热题 100 回顾

目录 一、哈希部分 1.两数之和 (简单) 2.字母异位词分组 (中等) 3.最长连续序列 (中等) 二、双指针部分 4.移动零 (简单) 5.盛最多水的容器 (中等) 6…

jmeter中导入java方法并使用

1、首先打开idea,在idea中点击File-New-Project ,创建一个项目,项目名为JmtOne 2、项目创建完成后,直接在main函数中定义两个方法,记住该主函数的包名跟类名,后面会用到,在类中定义了两种拆分字符串的方法&…

iLogtail 开源两周年:感恩遇见,畅想未来

早在上世纪 60 年代,早期的计算机(例如 ENIAC 和 IBM 的大型机)在操作过程中会输出一些基本的状态信息和错误报告,这些记录通常通过打印机输出到纸带或纸卡上,用于跟踪操作流程和调试,最早期的日志系统借此…

Matlab基本知识

🌈个人主页:羽晨同学 💫个人格言:“成为自己未来的主人~” %% Matlab基本的小常识 % (1)在每一行的语句后面加上分号(一定要是英文的) a3; a5; % (2)多行注释:选中要注释的若干语句,快捷键CtrlR % a3; %…

MinIO 企业级人工智能存储的数据和驱动器同等重要

为什么会这样?这是因为硬件故障发生在不同的级别。有一些中断会导致整个站点瘫痪。然后,会出现中断,导致集群中的一部分节点瘫痪。但是,在更精细的硬盘驱动器位级别也存在故障,这些故障需要复制本身无法提供的另一种类…

android studio 新建java工程, 安卓新建项目,android studio2024 如何新建java项目

主要解决,新增安卓工程,没有java选项 1. 点击左上角FIle -> New -> 2. 选择 no activity 选项, 然后next 3. langua 就可以选择java 了。name自己定义项目名称,项目存储地址,包名。 配置完成选择finish. 4. fin…

MyBatis XML配置文件(下)

MyBatis的开发有两种方式:1、注解 2、XML。使用MyBatis的注解方式,主要是来完成一些简单的增删改查功能。如果需要实现复杂的SQL功能,建议使用XML来配置映射语句,也就是将SQL语句写在XML配置文件中。 MyBatis XML开发的方式需要以…

面向对象02:构造器详解

本节内容视频链接:面向对象05:构造器详解_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV12J41137hu?p64&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 构造器(‌Constructor)‌是一种特殊的方法,‌用于初始…

linux下的oracle启动命令

一、服务器断电后,手工启动oracle数据库步骤如下: 1、进入数据库服务器,切换到oracle用户,命令:su - oracle 2、启动数据库,命令: 1) sqlplus / as sysdba 2) startup 3)如果数据库已…

【Qt笔记】Qt界面显示时间

目录 一、前言 二、基本概念 三、代码实现 1. 获取本地时间,并将其转换成自己想要的格式 2.创建一个QLabel控件用于显示时间字符串 3.创建QTimer定时器更新时间 四、优化 1. 格式优化 1.1 初始化 1.2 获取星期 1.3 更改格式 1.4 定时器超时函数 1.5 …

代码随想录 | day 15 | 二叉树part03

完全二叉树的节点个数 方法一:可以用递归法遍历一遍左子树和右子树的个数之和再加1等于全部节点个数 class Solution { public:int getcount(TreeNode* cur){if(curNULL) return 0;int leftcount getcount(cur->left);int rightcount getcount(cur->right…