使用 GitHub Actions 和 Docker 驾驭 CI/CD，让你的 SaaS 前端项目飞上云端！

镇场名画：Web猿之殇

All right！此次的目标是：

使用 GitHub Actions + Docker

让你的 SaaS 前端项目自动化构建和部署，实现CI/CD：持续集成和持续部署

Lets Go！

一、准备工作

首先，你需要有一个 GitHub 仓库，里面有你的 SaaS 前端项目的代码。这个项目应该使用 Node.js 和 Nginx，并且有一个 Dockerfile 和一个 docker-compose.yml 文件。如果你还没有这些文件，不用担心，我会在下面给你提供一个示例。

这是 Dockerfile 文件的内容：

js 复制代码

# 使用 Node.js 官方镜像作为构建环境
FROM node:14 as build

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json 到工作目录
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制其他源代码文件到工作目录
COPY . .

# 构建项目
RUN npm run build

# 使用 Nginx 官方镜像作为运行环境
FROM nginx:stable-alpine as production

# 从构建环境中复制构建结果到 Nginx 的静态文件目录
COPY --from=build /app/dist /usr/share/nginx/html

# 复制 Nginx 配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

这是 docker-compose.yml 文件的内容：

yml 复制代码

version: '3'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"

二、设置 GitHub Actions

接下来，我们要在 GitHub 仓库中设置 GitHub Actions。首先，你需要在你的项目根目录下创建一个新的 GitHub Actions 工作流文件 .github/workflows/ci-cd.yml：

yml 复制代码

name: CI/CD

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v2  # 使用 GitHub 官方 action 来检出代码
      
    - name: Build Docker Compose
      run: |
        docker-compose build  # 使用 Docker Compose 构建服务

    - name: Save Docker images
      run: |
        docker save my-app_web:latest | gzip > my-app.tar.gz  # 保存 Docker 镜像为 tar.gz 文件

    - name: Deploy
      uses: appleboy/scp-action@master  # 使用社区 action 来通过 SCP 传输文件
      with:
        host: ${{ secrets.DEPLOY_HOST }}
        username: ${{ secrets.DEPLOY_USER }}
        key: ${{ secrets.DEPLOY_KEY }}
        source: "my-app.tar.gz"
        target: "/tmp"

    - name: Load and run Docker image on the server
      uses: appleboy/ssh-action@master  # 使用社区 action 来通过 SSH 连接服务器并执行命令
      with:
        host: ${{ secrets.DEPLOY_HOST }}
        username: ${{ secrets.DEPLOY_USER }}
        key: ${{ secrets.DEPLOY_KEY }}
        script: |
          docker load < /tmp/my-app.tar.gz  # 加载 Docker 镜像
          docker-compose up -d  # 使用 Docker Compose 启动服务

在这个工作流中，我们首先检出代码，然后使用 Docker Compose 构建服务。然后，我们将 Docker 镜像保存为一个 tar.gz 文件，并将这个文件传输到你的服务器。最后，我们在你的服务器上加载 Docker 镜像，并使用 Docker Compose 启动服务。

三、设置 Secrets

最后，你需要在你的 GitHub 仓库的 "Settings" -> "Secrets" 中设置 DEPLOY_HOST、DEPLOY_USER 和 DEPLOY_KEY 这三个 secrets，分别对应你的服务器地址、用户名和 SSH 私钥。

四、启动工作流

现在，你已经完成了所有的设置。每次你向 master 分支推送代码时，GitHub Actions 就会自动启动这个工作流，构建你的项目，创建 Docker 镜像，并将这个镜像部署到你的服务器。

恭喜你，你已经学会了如何使用 GitHub Actions 和 Docker 自动化部署你的 SaaS 前端项目！现在，你可以坐下来，撸一口加菲，看着你的代码自动被部署到服务器。是不是很酷？

P.S. 如果你的项目是私有的，记得查看 GitHub Actions 的定价信息，因为私有仓库使用 GitHub Actions 是需要收费的。但是，对于公开仓库，GitHub Actions 是完全免费的。所以，如果你还没有试过 GitHub Actions，现在就去试试吧！