🚀 本站自动化部署流程 ✨

这篇文章记录了本站基于 GitHub Actions + Docker + 阿里云服务器的完整自动化部署流程。

推送代码 → GitHub Actions → Docker镜像构建 → 推送到GHCR → 自动部署到服务器

🛠️ 技术栈#

• 前端框架: TypeScript
• 容器化: Docker + nginx
• CI/CD: GitHub Actions
• 镜像仓库: GitHub Container Registry (GHCR)
• 服务器: 阿里云 Ubuntu 24.04
• 自动部署: SSH + Shell脚本

📁 项目结构#

项目根目录/
├── .github/workflows/
│   ├── ci.yml              # 代码质量检查
│   ├── docker-build.yml    # Docker镜像构建
│   └── deploy.yml          # 自动部署到服务器
├── Dockerfile              # 生产环境Docker配置
├── nginx.conf              # nginx配置文件
├── deploy.sh               # 服务器部署脚本

🔄 完整部署流程#

1. 代码推送触发#

git add .
git commit -m "更新内容"
git push origin main

2. GitHub Actions 自动执行#

步骤1: CI检查 (ci.yml)#

• ✅ 代码格式检查 (ESLint)
• ✅ TypeScript类型检查
• ✅ 项目构建测试
• ✅ 兼容性测试 (Ubuntu)

步骤2: Docker构建 (docker-build.yml)#

• 🏗️ 多阶段构建优化
• 📦 构建生产镜像
• 🏷️ 生成镜像标签:
  • ghcr.io/github-xsong/leonsong:latest
  • ghcr.io/github-xsong/leonsong:main-{commit}
• 📤 推送到 GitHub Container Registry

步骤3: 自动部署 (deploy.yml)#

• 🔗 SSH连接到阿里云服务器
• 🐳 拉取最新Docker镜像
• 🔄 零停机更新容器
• ✅ 健康检查验证

🐳 Docker 配置详解#

Dockerfile 多阶段构建#

# 第一阶段: 构建环境
FROM node:20-alpine AS base
RUN npm install -g pnpm
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

# 第二阶段: 构建应用
FROM base AS builder
COPY . .
RUN pnpm build

# 第三阶段: 生产环境
FROM nginx:alpine AS production
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx 配置特性#

• ✅ Gzip压缩优化
• ✅ 静态资源缓存策略
• ✅ SPA路由支持
• ✅ 安全头设置
• ✅ 健康检查端点

🔧 服务器环境配置#

Docker环境安装#

官方完整文档：Install Docker Engine on Ubuntu

Docker镜像源配置#

# 配置国内镜像加速(填写加速地址)
sudo tee /etc/docker/daemon.json > /dev/null << 'EOF'
{
  "registry-mirrors": [
    "xxxxxxxxxxxxxxxxxx",
    "xxxxxxxxxxxxxxxx"
  ]
}
EOF

sudo systemctl restart docker

🔐 GitHub Secrets 配置#

GitHub 仓库 Settings → Secrets and variables → Actions → Repository secrets

在 GitHub 仓库设置中添加以下 Secrets:

SSH密钥生成#

# 在服务器上生成密钥对
ssh-keygen -t ed25519 -C "github-actions" -f ~/.ssh/github_actions -N ""

# 添加公钥到授权列表
cat ~/.ssh/github_actions.pub >> ~/.ssh/authorized_keys

# 复制私钥到GitHub Secrets
cat ~/.ssh/github_actions

🔍 监控和调试#

查看部署状态#

# 服务器容器状态
docker ps | grep blog-website
docker logs blog-website

常用调试命令#

# 检查容器运行状态
docker ps -a | grep blog-website

# 查看容器日志
docker logs blog-website --tail 50

# 进入容器调试
docker exec -it blog-website sh

# 测试网站访问
curl -I http://localhost
curl http://localhost/health

# 查看镜像信息
docker images | grep leonsong

健康检查端点#

• GET /health - 返回 healthy 表示服务正常

🎉 部署成功验证#

部署成功后应该看到:

1. ✅ GitHub Actions 三个工作流全部绿色
2. ✅ 网站可以正常访问: http://服务器IP
3. ✅ 健康检查正常: http://服务器IP/health
4. ✅ 容器运行状态正常: docker ps | grep blog-website

🔄 日常维护#

内容更新#

# 只需要推送代码，一切自动完成
git add .
git commit -m "更新博客内容"
git push origin main

版本发布#

# 发布新版本
git tag v1.1.0
git push origin v1.1.0
# 自动生成带版本号的镜像

紧急回滚#

# 如果需要手动回滚到上一版本
docker stop blog-website
docker rm blog-website
docker rename blog-website-backup blog-website
docker start blog-website

📝 总结#

这套自动化部署方案实现了:

• 🚀 完全自动化: 推送代码即可完成部署
• 🛡️ 零停机部署: 用户无感知更新
• 🔄 自动回滚: 部署失败自动恢复
• 📊 全程可视: GitHub Actions界面监控
• 🎯 标准化流程: 可复制到其他项目

从此，我们只需要专注于内容创作，技术细节全部自动化处理！🎉