华为云 ECS Nginx 快速部署 H5 静态页面，安全组与权限避坑指南

很多开发者做完 H5 页面后，想要放到公网可访问的服务器上，华为云 ECS 搭配 Nginx 是性价比很高的方案。我最近多次实操部署，整理了一套完整流程和高频踩坑点，新手也能跟着操作上线。

一、环境准备

一台华为云 ECS（CentOS 或者 Ubuntu 系统都可以），提前在控制台开好账号，拿到服务器公网 IP，本地准备好 H5 打包后的静态文件（html、css、js、图片资源）。

重要前置：华为云安全组是最容易漏掉的一步，只装 Nginx 不放行端口，外网永远打不开页面。

二、安装 Nginx（CentOS 示例）

# 安装
yum install nginx -y
# 设置开机自启
systemctl enable nginx
# 启动服务
systemctl start nginx
# 查看运行状态
systemctl status nginx

三、上传 H5 文件 & 配置站点

1. 把打包好的 H5 静态文件上传到服务器，推荐目录 /usr/share/nginx/h5/
2. 新建站点配置文件 /etc/nginx/conf.d/h5.conf

server {
    listen 80;
    server_name 你的ECS公网IP;
    root /usr/share/nginx/h5;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

1. 校验配置是否正确

nginx -t

1. 重载 Nginx 配置

nginx -s reload

四、必做：华为云安全组放行

进入华为云 ECS 控制台 → 安全组 → 入方向规则，添加放行端口：

• 80 端口（http 访问）
• 如果你后续要 HTTPS，再加 443 端口

五、常见问题排查

1. 访问页面无法打开，连接超时 优先检查：安全组有没有放行端口、服务器防火墙 firewalld 是否拦截。

# 临时关闭防火墙测试（仅调试用）
systemctl stop firewalld

1. 页面空白、js/css404 检查文件路径、nginx 里 root 目录是否写对，文件权限不足也会读取失败，可以授权：

chmod -R 755 /usr/share/nginx/h5

1. 路由模式 H5 刷新 404 配置里的 try_files $uri $uri/ /index.html; 就是专门解决 SPA 单页应用刷新 404 的，不要删掉。

六、小结

Nginx 部署静态 H5 本身代码简单，大部分失败都不是 Nginx 本身问题，而是云服务器的网络权限、安全组规则卡住。部署顺序记住：放行端口 → 上传资源 → 写配置 → 重载服务，就能顺利把 H5 页面公开上线。