前端项目 github actions 配合 docker hub CI/CD

775

个人项目github地址仅供参考

目的

通过github和docker配合, 优化个人项目的部署流程. 通过提交tags,自动发布版本, 基本通用于大部分项目.

准备

  • github github账号 新建项目

有无服务器都行, 没有服务器的可以本地安装docker,在本地调试.这里介绍通用的服务器部署方法, 大家如果有阿里云等服务的话, 阿里提供的也结合github actions的部署流程.

步骤

新建自己的node项目, 添加Dockerfile, 打包成docker必备

node使用 buster-slism版本 体积小, 足够用.

FROM node:14.16.0-buster-slim

ENV PORT 3000

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Installing dependencies
COPY package*.json /usr/src/app/
RUN npm install

# Copying source files
COPY . /usr/src/app

# Building app
RUN npm run build
EXPOSE 3000

# Running the app
CMD "npm" "start"

在github上添加actions

image.png image.png 复制下面的yml文件, 通过push tags事件触发github actions

steps里面 大家可以在github的actions仓库里去详细了解各个的作用 get_version 的作用是获取版本号 登录dockerhub设置自己的tokenDOCKERHUB_TOKEN和usenameDOCKERHUB_USERNAME 然后放入github项目的secrets

name: CI

on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Get version
        id: get_version
        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}

      - name: Checkout
        uses: actions/checkout@v2

      - name: Set up QEMU
        uses: docker/setup-qemu-action@v1

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1

      - name: 登录 DockerHub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push
        id: docker_build
        uses: docker/build-push-action@v2
        with:
          context: .
          file: ./Dockerfile
          push: true
          tags: **填入自己的docker名称**/web:${{steps.get_version.outputs.VERSION}}

      - name: Image digest
        run: echo ${{ steps.docker_build.outputs.digest }}

登录docker hub 进入个人中心

image.png 把用户名和生成好的token放入github

image.png 这时候提交tags就能看到action在运行了

image.png

更新服务器里的的docker-compose文件

version: '3.7'
services:
  next:
    image: **填入自己的docker名称**/wanandroid-next:0.0.1
    restart: always
    container_name: next_name
    ports:
      - 53000: 3000

只需改动镜像image的版本号, 执行更新操作就行 docker-compose up -d next

nginx的部分配置 进行代理

 if ($host ~ ^(你的子域名)\.你的域名\.com$){
    proxy_pass http://服务器ip:53000;
    break;
 }