基于华为云 ECS 搭建 H5 页面，对接微信公众号菜单跳转实战

最近做业务时，需要在微信公众号菜单栏放入口，点击直接跳转到自研网页，踩了不少服务器部署、访问权限的坑，把整套实战流程整理出来。

业务需求

公众号自定义菜单按钮，点击跳转外部 H5 网页；网页部署在华为云 ECS，用来存放资料、达人合作素材，后续可以扩展更多多功能页面。不用开发小程序前端，公众号仅做跳转入口，简化开发工作量。

环境准备

1. 华为云 ECS 服务器，Linux 系统
2. 域名（可选，也可使用公网 IP 直接访问，域名体验更佳）
3. 安全组放行端口：80（http）、443（https）

部署步骤

1. 远程 SSH 连接 ECS，上传网页静态资源文件，这里我用 SCP 上传，初次连接会出现主机指纹确认，输入 yes 回车即可。

小提示：SSH 输入密码时控制台不会显示字符，属于正常现象，输完直接回车。

1. 在服务器安装 Nginx，配置站点目录，指定网页文件存放路径，启动服务。
2. 测试访问：浏览器输入服务器公网 IP，确认网页可以正常打开，图片、链接加载无异常。
3. 公众号后台配置自定义菜单：菜单类型选择「跳转网页」，填入 H5 完整访问链接，保存发布。

遇到的问题与解决方案

1. SCP 上传提示目标目录不存在 解决：先 ssh 登录服务器，mkdir 创建对应文件夹，再执行上传命令。
2. 网页外部打不开，本地服务器 curl 可以访问 排查华为云安全组，确认 80/443 端口入方向规则放开；同时检查服务器内部防火墙。
3. 公众号跳转网页提示域名不合法 公众号业务域名需要在公众号后台进行配置，把 ECS 对应的域名添加到业务域名白名单。

方案优缺点总结

✅ 优点：只需要维护服务器上这一套网页，公众号只做跳转入口。后续修改页面内容，直接在服务器更新文件，不用反复修改公众号菜单。 ❌ 缺点：需要自己维护 ECS 服务器，负责环境、安全、文件更新，服务器需要持续保有。

拓展

这套 H5 网页后续可以继续迭代，嵌入表单、素材预览页面，用来存放跨境达人建联资料，非常适合业务侧快速落地。