Mac → GitHub → VPS → Nginx → 公网访问：一次完整的静态站点部署记录

关键命令速查

Mac（Git）

git remote set-url origin https://github.com/USER/REPO.git
git add .
git commit -m "update"
git push

VPS（部署）

# Clone
git clone https://github.com/USER/REPO.git

# 部署
cp -r dist/* /var/www/SITE/

# Nginx
ln -sf /etc/nginx/sites-available/SITE.conf /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx

# 防火墙
ufw allow PORT/tcp

# 验证
ss -tlnp | grep ":PORT"
curl -sI http://127.0.0.1:PORT/

可选增强

1. Basic Auth（密码保护）

apt install -y apache2-utils
htpasswd -c /etc/nginx/.htpasswd admin

然后在 Nginx 配置里加：

auth_basic "Restricted";
auth_basic_user_file /etc/nginx/.htpasswd;

2. 域名 + HTTPS

# DNS: dashboard.example.com → VPS_IP

# Nginx
server {
    listen 80;
    server_name dashboard.example.com;
    ...
}

# HTTPS（Let's Encrypt）
apt install -y certbot python3-certbot-nginx
certbot --nginx -d dashboard.example.com

3. GitHub Actions 自动部署

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.VPS_HOST }}
          username: root
          key: ${{ secrets.VPS_SSH_KEY }}
          script: |
            bash /root/update-project-dashboard.sh

总结

1. 静态网站部署最简单：Nginx 直接服务，不需要 Node.js/PM2/Docker
2. GitHub 是代码托管的正确选择：自己控制，可用 CI/CD
3. ufw 是最大陷阱：本地 200 ≠ 外部可访问，必须开端口
4. Nginx 配置要 try_files：处理 SPA 路由（找不到文件返回 index.html）
5. 更新流程要脚本化：一键 `git pull` + `cp`

核心领悟：部署不复杂，但每个环节都可能出错。Docker、Nginx、Git、防火墙 —— 任何一层配置错，网站就打不开。逐层验证（ss → curl 127.0.0.1 → curl 公网IP → 浏览器）能快速定位问题。

本文记录于 2026-09-29。