GithubAction结合Docker部署 - 快速部署React项目学习如何结合GithubAction以及Dock

前言

学习如何结合GithubAction以及Docker镜像的方式快速部署一个程序。

前置环境

Ubuntu22.04
阿里云\存在公网环境
Docker
Github

流程描述

环境安装

Docker环境安装

# 更新软件依赖 
sudo apt update 
# 安装依赖包 
sudo apt install -y apt-transport-https ca-certificates curl software-properties-common # 添加 Docker 的官方 GPG 密钥 
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - 
# 添加 Docker CE 的稳定版仓库 
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" 
# 安装 Docker CE sudo apt install -y docker-ce

Docker提权

此步骤的作用是避免在GithubAction使用appleboy/ssh运行远程服务器时需要执行sudo docker的命令

# 将当前用户组加入到Docker组 
sudo gpasswd -a ${USER} docker 
# 刷新Docker成员 
newgrp - docker

DockerHub

前往Docker官网注册账号并登录
个人中心 -> My account -> Security -> NewAcceessToken

远程服务器

生成ssh-key(没有的情况下),生成一个ssh-key

Github配置

新建一个前端项目并进入该项目
为项目创建多个变量, 路径: Settings -> Secrets and variables -> Actions -> Secrets
创建变量:
- DOCKER_USERNAME: DockerHub账号
- DOCKER_PASSWORD: 前面环境配置生成的DockerAccessToken
- SERVER_HOST: 远程服务器Host
- SERVER_SSH_KEY: 远程服务器ssh-key生成的私钥，注意是私钥，一般存储在~/.ssh/id_rsa文件里，复制时需注意首行的---BEGIN xxx---和尾行都一并复制进去.当action ssh出现权限问题无法访问时，添加执行cat id_rsa.pub >> ~/.ssh/authorized_keys
- SERVER_USER: 远程服务器登录账号

本地项目与Github关联

创建一个React项目并与Github仓库关联
在项目根目录创建文件与项目.github/workflows/cicd.yml
项目更目录创建文件DockerFile

DockerFile

# 以React+Vite+Yarn为例子
# Node环境
FROM node:20
# 工作目录
WORKDIR /app
# 拷贝package.json文件
COPY package.json yarn.lock ./
# 安装依赖和设置镜像源
RUN yarn config set registry https://registry.npmmirror.com
RUN yarn
COPY . ./
# Build静态文件
RUN yarn build
# 拉取nginx镜像
FROM nginx:stable-alpine
# 将静态文件复制到nginx文件下
COPY --from=0 /app/dist /usr/share/nginx/html
# 暴露端口80
EXPOSE 80
# 运行nginx
CMD ["nginx", "-g", "daemon off;"]

cicd.yml

name: Deploy Frontend to Docker

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: 检查Git代码
        uses: actions/checkout@v2

      - name: 前置DockerBuild
        uses: docker/setup-buildx-action@v1

      - name: 登录Dockerhub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      - name: 构建Docker镜像
        uses: docker/build-push-action@v2
        with:
          context: .
          file: ./Dockerfile
          push: true
          tags: botlin000/my-frontend:latest

  deploy:
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: 连接远程服务器并部署
        uses: appleboy/ssh-action@v0.1.7
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: |
            docker pull botlin000/my-frontend:latest
            docker stop my-frontend || true
            docker rm my-frontend || true
            docker run -d --name my-frontend -p 9093:80 botlin000/my-frontend:latest