将H5部署在两台服务器上，实现访问的核心手段是引入负载均衡器，将用户请求分发到两台服务器，并确保静态资源文件同步，这样不仅能提升访问稳定性，还能为后续扩展打好基础。
为什么H5部署需要两台服务器
很多团队在业务初期,一台服务器就能跑得风生水起，但随着用户量增长，或者对容灾有了要求，单机就成了瓶颈，H5虽然大多是静态资源，但一旦遭遇突发流量，单台服务器的带宽和并发能力很快会被打满，行业共识认为，至少两台服务器做冗余，是保障线上稳定性的基本操作。
两台服务器能带来三个好处：
- 高可用：一台故障，另一台接管，用户无感知。
- 负载均衡：分担流量，降低单机压力。
- 滚动发布：更新时一台一台更新，不影响线上访问。
两台服务器部署H5的负载均衡方案对比
目前常见的做法有三种,我分别说说它们的适用场景和优缺点。
DNS轮询
这是最原始的多服务器访问方式,在DNS管理后台，将同一个域名解析到两台服务器的IP地址，并设置不同的权重，用户访问时，DNS会轮流返回IP，从而实现基础的流量分发。
优点：配置简单，成本低，不需要额外组件。
缺点：无法感知服务器健康状态，如果一台挂了，DNS依然会解析到它，导致部分用户访问失败，DNS缓存生效慢，切换不灵活。
Nginx反向代理
这是目前最通用的方案。在一台服务器（或独立节点）上部署Nginx作为反向代理，后端指向两台H5服务器，用户请求先到Nginx，Nginx再根据配置的负载均衡策略（轮询、ip_hash、least_conn等）将请求转发到后端。
优点：配置灵活，支持健康检查，可以结合动静分离，还可以做缓存、SSL卸载等。
缺点：需要额外一台服务器或节点部署Nginx，如果Nginx本身挂了会影响服务，因此通常也需要Nginx高可用（Keepalived）。
云负载均衡器
如果使用简米云、酷番云、AWS等云厂商，可以直接购买云负载均衡产品（SLB/CLB/ELB）。这种方式最省心，配置简单，云厂商负责高可用，且自带健康检查和会话保持。
优点：运维成本低，稳定性高，弹性扩展方便。
缺点：需要额外付费，但价格相对合理，适合大多数企业。
三种方案对比表格
| 方案 | 额外费用 | 配置复杂度 | 健康检查 | 会话保持 | 适用场景 |
|---|---|---|---|---|---|
| DNS轮询 | 无 | 简单 | 无 | 无 | 小型站点，可接受短暂故障 |
| Nginx反向代理 | 需一台服务器（约几十元/月） | 中等 | 需手动配置 | 支持 | 中等规模，需要灵活控制 |
| 云负载均衡 | 按量付费，数十元/月起 | 简单 | 自带 | 支持 | 几乎所有场景，尤其是云上 |
H5多服务器部署的Nginx反向代理配置
既然Nginx方案最灵活,我来详细走一遍配置流程，以两台服务器部署H5的真实场景为例。
前置准备
- 两台服务器（A和B），均部署好H5静态文件，目录一致，比如
/var/www/h5。 - 一台服务器（C）作为Nginx代理，也可以复用其中一台（但建议独立）。
- 所有服务器在同一个内网（或公网互通），确保端口可达。
安装Nginx
在代理服务器上执行：
yum install nginx -y # CentOS # 或 apt install nginx -y # Ubuntu
配置upstream与健康检查
编辑/etc/nginx/conf.d/h5.conf，写入：
upstream h5_backend {
server 192.168.1.10:80 max_fails=3 fail_timeout=30s;
server 192.168.1.20:80 max_fails=3 fail_timeout=30s;
}
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://h5_backend;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# 静态资源缓存（可选）
location ~ .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 30d;
add_header Cache-Control "public, immutable";
proxy_pass http://h5_backend;
}
}
启用Gzip压缩
在http块中添加：
gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
配置HTTPS（可选）
server {
listen 443 ssl;
server_name yourdomain.com;
ssl_certificate /etc/nginx/ssl/yourdomain.pem;
ssl_certificate_key /etc/nginx/ssl/yourdomain.key;
# 其他配置与80相同
}
让Nginx生效
nginx -t # 测试配置 systemctl reload nginx # 重新加载
验证访问
访问http://yourdomain.com，Nginx会轮询转发到两台服务器，可以通过查看后端日志验证。
H5多服务器部署的会话同步问题
如果H5页面涉及登录状态（如token），则需要确保同一用户的请求始终落在同一台后端服务器，或者实现session共享。H5通常采用无状态设计，token存储在前端，不依赖后端session，所以很少需要会话保持，但如果有后端接口，建议将jwt token放在header中，后端通过token验证即可。
如果确实需要会话保持,可以在Nginx配置中使用ip_hash或sticky模块，或者使用云负载均衡器的会话保持功能。
两台服务器H5文件的同步方案
H5作为静态资源，必须保证两台服务器上的文件版本完全一致，否则用户刷新到不同服务器会看到不同页面，这在更新时尤其重要。
rsync定时同步
在代码发布服务器（或其中一台A）上，通过rsync将文件同步到B，可以写脚本配合crontab，每分钟检测差异并同步。
rsync -avz --delete /var/www/h5/ root@192.168.1.20:/var/www/h5/
优点：简单，适合小规模更新。
缺点：同步有延迟，两台服务器短暂不一致。
Git自动部署
在两台服务器上分别拉取同一Git仓库,并在某个webhook触发时自动pull。
优点：版本一致，操作简单。
缺点：需要Git环境，且有仓库权限。
CI/CD流水线
使用Jenkins、GitLab CI等工具，在构建完成后自动将产物推送到两台服务器。这是目前最推荐的方式，结合版本控制，可以做到一键回滚。
对象存储共享
将H5文件上传到OSS,然后两台服务器从OSS拉取到本地目录，或者直接使用OSS作为静态文件源，服务器只提供API接口。
这种方式适合文件较大的场景，并且天然具备高可用性。
H5动静分离部署方案与CDN加速
H5中的静态资源（js、css、图片）可以进一步分离，部署到CDN上，让用户就近加载，大幅提升访问速度，配置时，将静态资源域名指向CDN，后端只负责返回HTML骨架，再通过CDN加载资源，这样两台服务器只处理HTML请求，压力更小。
动静分离的具体做法：
- 在Nginx中,将所有静态资源请求转发到CDN或OSS，而不是后端服务器。
- 将HTML文件中的静态资源引用改为CDN地址。
- 设置CDN的缓存策略,利用浏览器缓存减少重复请求。
H5部署在2台服务器常见问题解答
Q1：两台服务器部署H5，需要额外购买负载均衡器吗？
不一定,如果流量不大，可以用DNS轮询或Nginx自建。如果追求稳定和运维省心，云负载均衡器性价比很高，价格通常在每月几十到几百元，相比自建省去了维护成本，据业内人士经验，多数中小团队会选择云负载均衡器。
Q2：两台服务器上的H5文件如何保证一致？
推荐使用Git仓库配合CI/CD流水线，当代码合并到主分支时，自动触发构建，并将产物同步推送到两台服务器。如果不想引入CI，也可以用rsync脚本定时同步，但要注意版本锁和回滚脚本。
Q3：H5部署在简米云两台服务器，具体怎么访问？
在简米云购买两台ECS,部署H5文件，然后购买一个SLB（负载均衡），配置监听规则（如80端口），将后端服务器组指向两台ECS，SLB会自动分发流量，并提供健康检查。用户只需一个SLB的公网IP或绑定域名，即可访问。
Q4：Nginx作为负载均衡，如果它本身挂了怎么办？
可以引入Keepalived实现Nginx的高可用,通过虚拟IP漂移，让另一台备用Nginx接管，或者在云环境，直接使用云负载均衡器作为前端，Nginx作为后端，这样云负载均衡器自带高可用。
H5部署在两台服务器，本质上是通过负载均衡将流量分散，同时保证文件一致性，无论选择哪种方案，核心在于稳定、可扩展和易维护，从单机走向多机，是业务成长的必经之路，花点时间把架构搭好，后续会省很多心。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/h5%e9%83%a8%e7%bd%b2%e5%9c%a82%e5%8f%b0%e6%9c%8d%e5%8a%a1%e5%99%a8%e5%a6%82%e4%bd%95%e8%ae%bf%e9%97%ae%ef%bc%8c%e6%9c%89%e5%93%aa%e4%ba%9b%e6%96%b9%e6%b3%95%ef%bc%9f/
