使用 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,现在就去试试吧!

相关推荐
木易双人青20 分钟前
01-Docker-简介、安装与使用
运维·docker·容器
专注API从业者2 小时前
Python + 淘宝 API 开发:自动化采集商品数据的完整流程
大数据·运维·前端·数据挖掘·自动化
烛阴2 小时前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
样子20183 小时前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html
Nicholas683 小时前
flutterAppBar之SystemUiOverlayStyle源码解析(一)
前端
黑客飓风4 小时前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
emojiwoo5 小时前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)
前端·react.js·前端框架
张人玉5 小时前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧6 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang6 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript