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

个人项目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;
 }
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇