华为云 ECS 部署 H5 静态页面实战踩坑记录

最近在用华为云 ECS 搭建服务，把自己写的 H5 页面部署到公网，中间踩了不少 Nginx、安全组、权限相关的坑，在这里记录一下完整流程和问题解决办法，给同样入门的开发者参考。

一、环境准备

1. 一台华为云 ECS（CentOS 系统）
2. 准备好 H5 静态资源：html、css、js、图片等文件
3. 本地工具：Xshell、WinSCP 用于上传文件

二、安装 Nginx

连接服务器后执行安装命令

yum install nginx -y

安装完成，设置开机自启并启动

systemctl start nginx
systemctl enable nginx

查看运行状态

systemctl status nginx

三、上传 H5 代码并配置站点

1. 通过 FTP 工具把静态文件上传到 /usr/share/nginx/html/
2. 修改 Nginx 配置文件

vi /etc/nginx/nginx.conf

核心配置片段：

server {
    listen 80;
    server_name 你的服务器公网IP;
    root /usr/share/nginx/html;
    index index.html;
}

保存退出，校验配置是否正确

nginx -t

重载配置

nginx -s reload

四、非常容易忽略：华为云安全组放行端口

很多人配置完 Nginx，本地 curl 正常，浏览器却打不开页面，大多是安全组没放行。 进入华为云控制台→ECS 实例→安全组，添加入方向规则，放行80 端口。

补充：如果后续要用其他端口，比如 8080，同样需要在这里放行。

五、遇到的坑 & 解决方案

1. 403 Forbidden 原因：文件权限不足，nginx 用户没有读取权限 解决：修改目录权限 chmod -R 755 /usr/share/nginx/html
2. Connection reset by peer / 访问直接断开 原因：程序监听 127.0.0.1，只能本机访问，外部无法连接；或者端口映射错误 解决：监听地址改成 0.0.0.0，同时核对安全组、防火墙端口。
3. 修改配置后不生效 原因：没有 reload nginx，或者配置文件语法报错 解决：先 nginx -t 校验，无报错再重载。

六、总结

静态 H5 页面部署本身不难，难点大多在云服务器网络层面。安全组、系统防火墙、服务监听地址这三点，是排查访问异常的优先顺序。 这套方案轻量化，适合用来放演示页面、活动页面，也可以对接微信公众号菜单跳转 H5，我后续也准备基于这个环境做更多小项目的部署测试。