基于Docker与Github Actions的Next.js自动部署-一一网

如果前端是React项目，不用这样配置，使用scp的Action部署到服务器中即可。

前置知识

在读本文之前，需要对以下概念有所简单的了解。

Docker
SSH remote
Github Actions
Next.js

目标进度

在Github Actions中build Docker镜像并push到阿里ACR。
在Github Actions中使用SSH链接阿里ECS，pull并run镜像。
ACR中自动删除过期版本的镜像。
服务器中自动删除过期版本的镜像。
构建缓存。
配置docker的network与其他容器交互。

主要流程

本地使用git push origin main命令。
Github Actions根据根目录的.github/workflows下的yaml文件的配置进行jobs操作。

Dockerfile

# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /information-manage-com
COPY package.json yarn.lock ./
RUN yarn config set registry https://registry.npm.taobao.org/
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /information-manage-com
COPY . .
COPY --from=deps /information-manage-com/node_modules ./node_modules
RUN yarn build

# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /information-manage-com

ENV NODE_ENV production

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /information-manage-com/next.config.js ./
COPY --from=builder /information-manage-com/public ./public
COPY --from=builder /information-manage-com/.next ./.next
COPY --from=builder /information-manage-com/node_modules ./node_modules

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN chown -R nextjs:nodejs /information-manage-com/.next
USER nextjs

EXPOSE 3000

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# RUN npx next telemetry disable

CMD ["node_modules/.bin/next", "start"]d
复制代码

Next.js的官方配置，我在其中加了npm的国内镜像。

build-docker

创建了两个job，依此是build-docker功能是构建docker并push到Docker Hub或阿里ACR。

build-docker:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        ref: main
    - name: Login to ACR
      uses: aliyun/acr-login@v1
      with:
        login-server: <ACR 公网路径>
        username: "${{ secrets.ACR_USERNAME }}"
        password: "${{ secrets.ACR_PASSWORD }}"
    - name: Build and push image
      env:
        IMAGE_TAG: ${{ github.sha }}
      run: |
        docker build -t <ACR 公网路径>/<ACR namespace>/<ACR iamges name>:$IMAGE_TAG .
        docker push <ACR 公网路径>/<ACR namespace>/<ACR iamges name>:$IMAGE_TAG
复制代码

其中涉密信息可以放在github项目的setting中设置secrets。项目中就可以使用${{ secrets.<你设置的键> }} 。${{ github.sha }}代表这次提交的独一无二的id可用做docker的tag。其次使用了两个Action，具体参数参考文档。

切换分支 actions/checkout@v2
登录ACR aliyun/acr-login@v1

ecs-pull

  ecs-pull:
    needs: build-docker
    runs-on: ubuntu-latest
    steps:
    - name: Execute SSH commmands on remote server
      uses: fifsky/ssh-action@master
      with:
        user: root
        host: "${{ secrets.ECS_HOST }}"
        key: ${{ secrets.ECS_PRIVATE_KEY }}
        command: |
          cd /
          docker login --username=${{ secrets.ACR_USERNAME }} --password=${{ secrets.ACR_PASSWORD }} <ACR 公网路径>
          docker pull <ACR 公网路径>/<ACR namespace>/<ACR iamges name>:${{ github.sha }}
          docker run -p 80:3000 -d <ACR 公网路径>/<ACR namespace>/<ACR iamges name>:${{ github.sha }}
复制代码