用 Nginx 部署静态网站的实操笔记：安装、配置、HTTPS 与性能调优

前言

很多初学者拿到一个静态网站（HTML / CSS / JavaScript），第一反应是"怎么让它被访问到"。其实 Nginx 就是最常见的答案：轻量、稳定、性能高，而且配置直观。这篇文章记录我从零搭建、到配置 HTTPS、再到做一点性能调优的完整过程，适合作为日常部署静态站的参考。

一、安装 Nginx

以 Ubuntu 为例，打开终端执行：

sudo apt update
sudo apt install -y nginx
sudo systemctl enable nginx
sudo systemctl start nginx

安装完成后，浏览器访问 http://<服务器IP>，看到 "Welcome to nginx!" 就说明服务已经跑起来了。CentOS / RHEL 系可以用 yum install nginx 或配置 EPEL 源后安装。

二、把静态文件放进去

假设你的网站根目录是 index.html 加 css/、js/、images/ 等。把它们放到一个目录，比如 /var/www/mysite：

sudo mkdir -p /var/www/mysite
sudo cp -r ./dist/* /var/www/mysite/
sudo chown -R www-data:www-data /var/www/mysite

三、编写 server 配置

在 /etc/nginx/sites-available/mysite 中写入：

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/mysite;
    index index.html;

    # 静态资源
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 图片、样式、脚本缓存 1 年
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2)$ {
        expires 1y;
        access_log off;
    }
}

启用并测试：

sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

其中 try_files $uri $uri/ /index.html; 是做 SPA（单页应用）时的关键配置：先尝试请求的文件路径，再尝试同名目录，最后回退到 index.html，让前端路由继续工作。

四、HTTPS（Let's Encrypt + certbot）

静态站也建议上 HTTPS。安装 certbot 并申请证书：

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com

certbot 会自动化三件事：

• 通过 ACME 协议向 Let's Encrypt 验证域名所有权；
• 把证书和私钥写入服务器；
• 修改 Nginx 配置，加入 listen 443 ssl; 和对应的 ssl_certificate / ssl_certificate_key。

申请成功后，certbot 默认还会在 80 端口加一段 return 301 https://$host$request_uri;，把 HTTP 重定向到 HTTPS。别忘了确认定时续期：systemctl status certbot.timer 应该处于 active。

五、基础性能与安全头

在 HTTPS server 块里追加几行，效果立竿见影：

# Gzip 压缩（对 HTML/CSS/JS/JSON 等文本型资源）
gzip on;
gzip_types text/plain text/css application/json application/javascript
           text/xml application/xml application/xml+rss
           image/svg+xml;
gzip_vary on;
gzip_min_length 1024;

# 安全响应头
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

# 关闭版本号，降低信息泄露
server_tokens off;

如果你的 HTML/CSS/JS 文件不常变动，可以把上面静态资源 location 中的 expires 1y; 保留；但更推荐配合文件名哈希（build 工具自带的 Content Hash）来用长期缓存，这样改代码时 URL 变了，浏览器就不会读到旧内容。

六、常见问题排查

1. 改了配置不生效：先跑 nginx -t 确认语法，再用 systemctl reload nginx 平滑重载，不要直接 restart。
2. 403 Forbidden：通常是目录权限不对或 root 路径写错。用 namei -l /var/www/mysite 逐层检查权限。
3. 404 但文件确实存在：检查大小写（Nginx 在 Linux 上是严格大小写敏感的）和 try_files 的顺序。
4. HTTPS 证书报错：用 openssl s_client -connect example.com:443 -servername example.com 查看证书链，常见原因是 SAN 里少了 www 子域名。

七、一个更完整的示例配置

server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name example.com www.example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;

    root /var/www/mysite;
    index index.html;
    server_tokens off;

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

    location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2|svg)$ {
        expires 1y;
        access_log off;
        add_header Cache-Control "public, immutable";
    }

    gzip on;
    gzip_types text/plain text/css application/json application/javascript
               text/xml application/xml application/xml+rss
               image/svg+xml;
    gzip_vary on;
    gzip_min_length 1024;

    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
}

总结

部署一个静态网站不需要复杂的基础设施：一台有公网 IP 的 Linux 机器、一份清晰的 Nginx 配置、一个免费可自动续期的 HTTPS 证书，就足够支撑大多数个人项目和小团队的文档站。如果你把前端构建产物直接丢到 OBS（华为云对象存储）里，配合 CDN，其实连 Nginx 都可以省掉——但这已经属于下一步的优化了。希望这篇实操笔记对你快速把静态站上线有帮助。