search

weoyk / note

0 stars 0 forks source link

故城瞎折腾系列第二期【都2024年了，你还在手动部署前端项目吗】1. 背景 以前传统的前端项目部署都是自己把 dist - 掘金 #1

Open weoyk opened 2 weeks ago

weoyk commented 2 weeks ago

1. 背景

2. 导语

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

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

3. 首先注册 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*

  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: ${{ github.repository_owner }}
          password: ${{ secrets.GHCR_TOKEN }}

      - name: build and push
        uses: docker/build-push-action@v5
        with:
          push: true
          platforms: linux/amd64,linux/arm64
          tags: |
            ghcr.io/${{ github.repository_owner }}/webapp:${{ steps.vars.outputs.version }}
            ghcr.io/${{ github.repository_owner }}/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

      - 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: ${{runner.OS}}-${{hashFiles('**/pnpm-lock.yaml')}}
      - 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 Publish
        run: npm publish
        env:

         NODE_AUTH_TOKEN: ${{ secrets.NPM_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: ${{ secrets.REMOTE_HOST }}
          username: ${{ secrets.REMOTE_USERNAME }}
          password: ${{ secrets.REMOTE_PASSWORD }}
          port: ${{ secrets.REMOTE_PORT }}
          command_timeout: 30m
          script: |
            docker login ghcr.io -u rookie-luochao -p ${{ secrets.GHCR_TOKEN }}
            echo "---------docker login success--------"
            docker pull ghcr.io/rookie-luochao/openapi-ui
            echo "---------docker pull success--------"
            docker stop ${{ secrets.IMAGE_NAME }}
            echo "---------docker stop container success--------"
            docker rm ${{ secrets.IMAGE_NAME }}
            echo "---------docker rm container success--------"
            docker run -dp ${{ secrets.HOST_PORT }}:80 -e ${{ secrets.ENVS }} --name ${{ secrets.IMAGE_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: ${{ secrets.REMOTE_HOST }}
          username: ${{ secrets.REMOTE_USERNAME }}
          password: ${{ secrets.REMOTE_PASSWORD }}
          port: ${{ secrets.REMOTE_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. 结语