故城瞎折腾系列第二期【都2024年了，你还在手动部署前端项目吗】

1. 背景

• 以前传统的前端项目部署都是自己把 dist 文件夹丢到服务器，或者压根就是运维或者后端帮着丢的
• 有一些同学可能写了脚本辅助部署，亦或是用一些服务器面板工具辅助部署
• 现在容器化时代，用 Docker 管理前端项目，可能更方便的部署和回滚
• 如果结合 github-action 部署一些个人项目也是极好的

2. 导语

• 此篇文章分享如何利用 github-action 一键自动发布 npm 包、docker 镜像、部署 linux 服务器
• 废话不多说先上demo仓库：OpenAPI-UI，你可以直接使用本仓库里面的github配置，如果对你有帮助请 star、fork 支持一下

以下是我的【故城瞎折腾系列】文章

第一篇：故城瞎折腾系列第一期【你要不要动手封装个前端Docker容器玩一玩】
第二篇：故城瞎折腾系列第二期【都2024年了，你还在手动部署前端项目吗】 第三篇：故城瞎折腾系列第三期【你看我这样用Nginx部署前端Docker项目，姿势对不对】

3. 首先注册 github-token, npm-token

• 注册 github-token
• 注册 npm-token

4. 构建 Docker 镜像

4.1. 在项目根目录新建Dockerfile

pnpm缓存，使用以下代码：

# syntax = docker/dockerfile:experimental
FROM --platform=${BUILDPLATFORM:-linux/amd64,linux/arm64} node:20-buster AS builder

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

WORKDIR /src
COPY ./ /src

RUN --mount=type=cache,target=/src/node_modules,id=myapp_pnpm_module,sharing=locked \
    --mount=type=cache,target=/pnpm/store,id=pnpm_cache \
        pnpm install

RUN --mount=type=cache,target=/src/node_modules,id=myapp_pnpm_module,sharing=locked \
        pnpm run build

FROM --platform=${BUILDPLATFORM:-linux/amd64,linux/arm64} ghcr.io/rookie-luochao/nginx-runner:latest

COPY --from=builder /src/dist /app

无需使用pnpm缓存，使用以下代码：

# syntax = docker/dockerfile:experimental
FROM --platform=${BUILDPLATFORM:-linux/amd64,linux/arm64} node:20-buster AS builder

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

WORKDIR /src
COPY ./ ./

# RUN两次方便观察install和build, 也可以用pnpm cache and locked
RUN pnpm install
RUN npm run build

FROM --platform=${BUILDPLATFORM:-linux/amd64,linux/arm64} ghcr.io/rookie-luochao/nginx-runner:latest

COPY --from=builder /src/dist /app

4.2. 使用 github-action 构建 docker 镜像

项目根目录执行：新建.github文件夹 => 在.github文件夹下面新建workflows文件夹 => 新建 docker-image-ci.yml文件 然后贴入一下代码：

name: Docker Image CI

on:
  push:
    tags:
      - v*

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  workflow_dispatch:

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

      - uses: actions/checkout@v4

      - name: set up QEMU
        uses: docker/setup-qemu-action@v3

      - name: set up docker buildx
        uses: docker/setup-buildx-action@v3

      - name: login ghrc hub
        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: $
          password: $

      - name: build and push
        uses: docker/build-push-action@v5
        with:
          push: true
          platforms: linux/amd64,linux/arm64
          tags: |
            ghcr.io/$/webapp:$
            ghcr.io/$/webapp:latest

4.3. 使用 github-action 构建 npm 包

name: Publish Package CI
on:
  push:
    tags:
      - v*

jobs:
  build:
    # 指定操作系统
    runs-on: ubuntu-latest
    steps:
      # 将代码拉到虚拟机
      - name: Checkout repository
        uses: actions/checkout@v4
      # 指定node版本
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          registry-url: 'https://registry.npmjs.org'
      # 依赖缓存策略
      - name: Cache
        id: cache-dependencies
        uses: actions/cache@v4
        with:
          path: |
            **/node_modules
          key: $-$
      - name: Install pnpm
        run: npm install -g pnpm
      # 依赖下载
      - name: Installing Dependencies
        if: steps.cache-dependencies.outputs.cache-hit != 'true'
        run: pnpm install
      # 打包
      - name: Running Build
        run: npm run build:package
      # 测试
      # - name: Running Test
      #   run: pnpm run test-unit
      # 发布
      - name: Running Publish
        run: npm publish
        env:
          # NPM_TOKEN is access token
         NODE_AUTH_TOKEN: $

4.4. 利用 github-action 部署服务器

name: Deploy CI

on:
  workflow_run:
    workflows: [Docker Image CI]
    types:
      - completed

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to remote server
        uses: appleboy/ssh-action@master
        with:
          host: $
          username: $
          password: $
          port: $
          command_timeout: 30m
          script: |
            docker login ghcr.io -u rookie-luochao -p $
            echo "---------docker login success--------"
            docker pull ghcr.io/rookie-luochao/openapi-ui
            echo "---------docker pull success--------"
            docker stop $
            echo "---------docker stop container success--------"
            docker rm $
            echo "---------docker rm container success--------"
            docker run -dp $:80 -e $ --name $ ghcr.io/rookie-luochao/openapi-ui
            echo "---------docker deploy success--------"

如果上述 action 配置无法部署成功，则可以将 docker script 脚本放在服务器, 然后使用如下配置进行部署：

name: Deploy CI

on:
  workflow_run:
    workflows: [Docker Image CI]
    types:
      - completed

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to remote server
        uses: appleboy/ssh-action@master
        with:
          host: $
          username: $
          password: $
          port: $
          command_timeout: 30m
          script: |
            cd ~ && sh deploy.sh

4.5. 配置 github-action Token、npm Token、各种环境变量，并触发 docker 镜像构建

1. 将项目推到 github 仓库
2. 需要申请一个 github Token(建议权限全部勾选上)
3. 点击仓库 Tab 页面的 Settings
4. 点击左侧边栏：Secrets and variables
5. 点击 Actions
6. 点击 New repository secrets 添加 GHCR_TOKEN 对应的 TOKEN，github-action脚本里面会用到
7. 点击 New repository secrets 添加 NPM_TOKEN 对应的 TOKEN，github-action脚本里面会用到
8. 点击 New repository secrets 添加各种部署服务需要用到的环境变量，如：REMOTE_HOST、REMOTE_USERNAME、REMOTE_PASSWORD、REMOTE_PORT 等等，github-action脚本里面会用到
9. 新建仓库 release 或者 tag 去触发 docker 镜像构建
10. 查验各种 action 是否能顺利跑通

5. 结语

• 介绍了如何注册 github-token, npm-token
• 介绍了如何利用 github-action 发布npm包，构建 docker 镜像，部署 docker 镜像到linux服务器
• 看都看完了，还不动手操作一波