静态网站（纯 HTML/CSS/JS，无需服务端语言执行）是最容易在 VPS 上部署的网站类型：不依赖数据库、不需要运行时，只要把文件放到正确目录、让 Nginx 托管即可。本文从文件上传到 SSL 与缓存配置，完整演示在搬瓦工 VPS 上部署静态网站的全流程。

本文要点

  • 三种把文件上传到 VPS 的方式（scp、rsync、Git）
  • Nginx 静态托管配置的核心指令
  • 一键签发 SSL 证书并启用 HTTPS
  • 静态文件缓存策略配置
  • 常见部署问题排查

准备工作

  • 搬瓦工 VPS 已安装 Nginx 并可正常访问
  • 域名 A 记录已解析到 VPS IP
  • 本地已构建好静态网站文件（如运行过 npm run build 等）

三种上传方式

方式一：scp（简单直接）

# 上传本地 dist/ 目录到 VPS（注意替换 IP 和路径）
scp -r ./dist/* root@123.45.67.89:/var/www/mysite/

# 非默认端口（如 KiwiVM 分配的端口）
scp -P 12345 -r ./dist/* root@123.45.67.89:/var/www/mysite/

方式二：rsync（增量同步，推荐）

# rsync 只传变化的文件，大网站更新快
rsync -avz --delete ./dist/ root@123.45.67.89:/var/www/mysite/

# 非默认 SSH 端口
rsync -avz --delete -e 'ssh -p 12345' ./dist/ root@123.45.67.89:/var/www/mysite/

方式三：Git（适合持续部署）

# 在 VPS 上克隆仓库（适合有构建产物仓库的项目）
cd /var/www
git clone https://github.com/yourname/yoursite.git mysite

# 后续更新
cd /var/www/mysite && git pull

推荐使用 rsync

rsync 有增量传输能力，只传改动的文件，对文件数多的网站更快。结合 --delete 参数，还能自动删除 VPS 上已不存在的旧文件，保持目录同步。

Nginx 静态托管配置

创建 /etc/nginx/sites-available/mysite.conf：

server {
    listen 80;
    listen [::]:80;
    server_name mysite.com www.mysite.com;

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

    # SPA（单页应用）路由支持：未匹配路径回落到 index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(css|js|png|jpg|jpeg|gif|webp|ico|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

    access_log /var/log/nginx/mysite.access.log;
    error_log  /var/log/nginx/mysite.error.log;
}
# 启用配置
ln -s /etc/nginx/sites-available/mysite.conf /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx

SPA 与普通静态站的区别

React、Vue、Angular 等框架构建的 SPA 需要把所有路径都回落到 index.html，用 try_files $uri $uri/ /index.html;。普通多页静态站用 try_files $uri $uri/ =404; 即可。

申请 SSL 证书

certbot --nginx -d mysite.com -d www.mysite.com
# Certbot 自动修改配置并 reload

设置目录权限

# 网站目录属主设为 www-data（Nginx 运行用户）
chown -R www-data:www-data /var/www/mysite
chmod -R 755 /var/www/mysite

常见问题对照表

问题原因解决
403 Forbidden目录权限不对或缺少 index 文件chmod 755；确认 index.html 存在
404 Not Found（SPA）路由未回落到 index.htmltry_files $uri $uri/ /index.html
资源加载 404构建产物路径与 root 不符确认上传目录与 root 指向一致
HTTPS 访问报证书错误域名解析未生效时提前签发等待解析生效后再运行 certbot

自动化部署思路

可以在本地写一个简单的部署脚本，每次构建后一条命令完成上传与热更新：

#!/bin/bash
set -e
npm run build
rsync -avz --delete -e 'ssh -p 12345' ./dist/ root@123.45.67.89:/var/www/mysite/
echo 'Deploy complete!'

小结

  • rsync 增量同步是最佳上传方式，--delete 保持目录清洁
  • SPA 用 try_files ... /index.html；普通多页站用 =404
  • 上传后设好目录权限，再用 certbot 签发 SSL
  • 写部署脚本，一键完成构建+上传

常见问题

Vue/React 打包后部署显示 404 怎么解决？

SPA 框架使用前端路由，所有路径都应由 index.html 处理。在 Nginx location / 块中使用 try_files $uri $uri/ /index.html; 即可解决刷新 404 问题。

每次部署都要手动 reload Nginx 吗？

不需要。只要是静态文件替换，Nginx 读取的是磁盘文件，替换后刷新浏览器即可看到新内容。只有修改了 Nginx 配置文件才需要 reload。

能用 GitHub Actions 自动部署吗？

可以。在 Actions 里配置 secrets（SSH 私钥），步骤：checkout → build → rsync 到 VPS，实现 push 代码后自动部署。