Skip to main content

Nginx 服务器配置

本指南介绍如何在 Nginx 服务器上部署 H5 应用，并配置微信小程序域名校验文件的访问。

云平台用户提示

如果您使用百度云、阿里云、腾讯云、华为云等云平台，HTTPS 证书通常已通过平台控制台自动配置。本文档主要关注 H5 应用部署 和 微信校验文件配置。

前提条件​

  • 已安装 Nginx（建议版本 1.18+）
  • 域名已配置 HTTPS 证书（云平台通常自动处理）
  • 已下载微信域名校验文件（如 a1b2c3d4e5f6.txt）
  • H5 应用已构建完成

校验文件放置方案​

根据您的需求，可以选择以下两种方案：

方案一：放到 H5 项目根目录（推荐）​

将校验文件直接放在 H5 应用的根目录中，与 index.html 同级。

目录结构：

/var/www/h5/
├── a1b2c3d4e5f6.txt  ← 校验文件（微信生成的随机文件名）
├── index.html
├── assets/
│   ├── js/
│   ├── css/
│   └── images/
└── ...

优点：

  • 配置简单，无需额外 location 规则
  • 适合大多数场景

缺点：

  • 校验文件与业务代码混在一起

方案二：单独目录存放​

将校验文件放在专门的目录中，与 H5 应用分离。

目录结构：

/var/www/weixin-verify/
└── a1b2c3d4e5f6.txt  ← 校验文件（微信生成的随机文件名）

/var/www/h5/
├── index.html
├── assets/
└── ...

优点：

  • 结构清晰，便于管理多个域名的校验文件
  • 校验文件与业务代码分离

缺点：

  • 需要配置额外的 Nginx location 规则
建议

如果您的 H5 项目本身没有其他 .txt 文件，推荐使用方案一，配置更简单。

Nginx 配置​

方案一配置（校验文件在项目根目录）​

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name h5.example.com;

    # SSL 证书配置（通常由云平台自动管理）
    # 如需手动配置，取消注释以下两行：
    # ssl_certificate /path/to/your/fullchain.pem;
    # ssl_certificate_key /path/to/your/privkey.pem;

    # H5 页面和校验文件都在同一根目录
    location / {
        root /var/www/h5;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 日志配置
    access_log /var/log/nginx/h5_access.log;
    error_log /var/log/nginx/h5_error.log;
}

# HTTP 自动跳转 HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name h5.example.com;
    return 301 https://$server_name$request_uri;
}

方案二配置（校验文件单独存放）​

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name h5.example.com;

    # SSL 证书配置（通常由云平台自动管理）
    # 如需手动配置，取消注释以下两行：
    # ssl_certificate /path/to/your/fullchain.pem;
    # ssl_certificate_key /path/to/your/privkey.pem;

    # 微信校验文件专用配置
    # 匹配所有 .txt 文件（微信校验文件名是随机字符串.txt）
    location ~ \.txt$ {
        root /var/www/weixin-verify;
        access_log off;  # 校验文件访问无需记录日志
    }

    # H5 页面配置
    location / {
        root /var/www/h5;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 日志配置
    access_log /var/log/nginx/h5_access.log;
    error_log /var/log/nginx/h5_error.log;
}

# HTTP 自动跳转 HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name h5.example.com;
    return 301 https://$server_name$request_uri;
}
注意

方案二的配置会将所有 .txt 文件请求指向 /var/www/weixin-verify/。如果您的 H5 项目需要其他 .txt 文件，建议使用方案一或调整配置。

配置说明​

关键配置项​

配置项说明
server_name您的域名，必须与微信后台配置的域名一致
listen 443 sslHTTPS 端口配置
root静态文件根目录
try_filesURL 重写规则，支持 SPA 路由
SSL 证书说明

云平台（如百度云、阿里云、腾讯云）通常在控制台配置 SSL 证书后会自动注入到 Nginx 配置中。

部署步骤​

1. 创建目录​

# 方案一
sudo mkdir -p /var/www/h5

# 方案二
sudo mkdir -p /var/www/h5
sudo mkdir -p /var/www/weixin-verify

2. 上传文件​

# 上传 H5 应用文件到服务器
# 可使用 scp、rsync 或其他工具

# 方案一：将校验文件放到 H5 根目录
sudo cp a1b2c3d4e5f6.txt /var/www/h5/

# 方案二：将校验文件放到单独目录
sudo cp a1b2c3d4e5f6.txt /var/www/weixin-verify/

3. 设置权限​

# 设置文件所有者（根据您的 Nginx 配置调整）
sudo chown -R nginx:nginx /var/www/h5
# 或
sudo chown -R www-data:www-data /var/www/h5

# 设置文件权限
sudo find /var/www/h5 -type f -exec chmod 644 {} \;
sudo find /var/www/h5 -type d -exec chmod 755 {} \;

# 确保校验文件可读
sudo chmod 644 /var/www/h5/a1b2c3d4e5f6.txt
# 或（方案二）
sudo chmod 644 /var/www/weixin-verify/a1b2c3d4e5f6.txt

4. 创建 Nginx 配置文件​

# 创建配置文件
sudo nano /etc/nginx/sites-available/h5.example.com.conf

# 将上面的配置内容粘贴到文件中
# 保存并退出（Ctrl+X, Y, Enter）

5. 启用配置​

# 创建软链接
sudo ln -s /etc/nginx/sites-available/h5.example.com.conf /etc/nginx/sites-enabled/

# 测试配置语法
sudo nginx -t

# 如果测试通过，重新加载 Nginx
sudo systemctl reload nginx

验证配置​

验证校验文件可访问​

# 使用 curl 测试（替换为实际文件名）
curl https://h5.example.com/a1b2c3d4e5f6.txt

# 查看详细响应
curl -I https://h5.example.com/a1b2c3d4e5f6.txt

# 预期输出：
# HTTP/2 200
# content-type: text/plain

验证 H5 页面可访问​

# 测试主页
curl -I https://h5.example.com

# 预期返回 200 状态码

验证 HTTPS 重定向​

# 测试 HTTP 是否自动跳转到 HTTPS
curl -I http://h5.example.com

# 预期输出：
# HTTP/1.1 301 Moved Permanently
# Location: https://h5.example.com/

常见问题​

404 错误​

原因： 文件路径配置错误

解决方案：

# 检查文件是否存在
ls -la /var/www/h5/a1b2c3d4e5f6.txt

# 检查 Nginx 配置中的 root 路径
sudo nginx -T | grep root

403 错误​

原因： 文件权限问题

解决方案：

# 检查文件权限
ls -la /var/www/h5/a1b2c3d4e5f6.txt

# 修正权限
sudo chmod 644 /var/www/h5/a1b2c3d4e5f6.txt
sudo chown nginx:nginx /var/www/h5/a1b2c3d4e5f6.txt

500 错误​

原因： Nginx 配置错误

解决方案：

# 检查配置语法
sudo nginx -t

# 查看错误日志
sudo tail -f /var/log/nginx/h5_error.log

高级配置​

配置多域名​

server {
    listen 443 ssl http2;
    server_name h5.example.com h5-backup.example.com;

    # 其他配置...
}

配置反向代理（API 转发）​

# 转发 API 请求到后端服务器
location /api {
    proxy_pass http://backend-server:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

相关资源​