使用Docker+Github实现自动化部署前端应用

挽晚风
1,098 阅读3分钟

前言

在现代软件开发中，容器化技术已经变得越来越重要，它可以帮助开发者将应用程序及其所有依赖项打包在一个独立的环境中，从而实现在不同平台和环境中的一致性部署。Docker：加速容器应用程序开发 是最受欢迎的容器化平台之一，它提供了简单而强大的工具，可以轻松地创建、分发和运行应用程序的容器。本文将介绍如何使用Docker 自动化部署前端应用。

我本人为什么要实现自动化部署前端呢，主要是我有一个前端项目，每1~2个星期需要进行一次发版，一次发版需要打包俩个项目，每一次都需要手动打包并上传到服务器，然后前往服务器解压。一开始觉得没什么问题，随之发版的次数越来越频繁，我实在受不了啦，于是遍有了这个。

通过自动化部署，解放我们的双手，再也不用为手动打包上传而烦恼~

1、Docker

1、首先前往官网注册一个账号。

2、创建一个仓库(注意个人账号只能创建一个私有仓库, 这里我们使用的均是公开仓库)。

image.png

3、Docker其他相关知识:

  • 仓库(Docker Hub)
  • 镜像(Image)
  • 容器(Container)

2、Nginx配置文件

nginx配置, 可以根据项目实际情况进行修改。

# 根目录/_nginx/default.conf

events{}
http {
    include /etc/nginx/mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    gzip on;
    gzip_types text/plain application/json image/svg+xml application/x-javascript text/css application/xml text/javascript application/javascript image/jpeg image/gif image/png;
    gzip_vary on;
    server_tokens off;

    #修改默认限制上传附件大小
    client_max_body_size 100m;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;

        underscores_in_headers on;
        ignore_invalid_headers off;

        location / {
            try_files $uri $uri/ /index.html;

             #设置某个文件不缓存读取本地，永远走200，拿到最新的
            if ($request_filename ~* .*\.(?:htm|html)$) {
                add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
            }
        }
    }
}

3、Dockerfile配置文件

此处xxxxxxx为docker注册的账号。

进行项目打包并将打包后的代码以及将上面配置的nginx打包成镜像。根据项目实际情况进行修改。

# 根目录/Dockerfile

# ================== STEP 1: Build ==================
FROM xxxxxxx/node:16.13.1 as builder

# 将前端源码复制到 /app 目录中
WORKDIR /app
COPY . .

# 还原 node_modules
RUN npm config get registry
RUN yarn install --frozen-lockfile
RUN ls -l
RUN echo "package restore is success"

# 编译项目
# RUN npm run build
RUN yarn run docs:build
RUN echo "build is success"

# ================== STEP 2: Publish ==================
FROM nginx:1.19.6

# 复制 nginx.conf 配置文件到镜像中
COPY ["./_nginx/default.conf", "/etc/nginx/nginx.conf"]

# 删除 nginx html 原有内容
RUN rm -rf /usr/share/nginx/html/*

EXPOSE 80

# 从编译镜像复制编译结果到此镜像
COPY --from=builder /app/docs/.vitepress/dist /usr/share/nginx/html

4、docker-compose配置文件

此处xxxxxxx为docker注册的账号。

创建一个名称为hex-lowcode-engine-starter的docker容器, 并使用8086端口指向80端口, 可以根据项目实际情况进行修改。

# 根目录/docker-compose.yml

version: '3'

networks:
  web_net:
    external: true

services:
  vueui:
    container_name: hex-lowcode-engine-starter
    image: xxxxxxx/hex-lowcode-engine-starter:dev
    restart: always
    networks:
      - web_net
    ports:
      - '8086:80'

5、服务器Nginx配置文件

使用域名hles.zczchen.top代理http://服务器ip:8086/。

server {
    listen 80;
    server_name 域名;
    rewrite ^(.*)$  https://$host$2 permanent;
}

server {
    listen 80;
    server_name hles.zczchen.top;
    location / {
                proxy_pass http://服务器ip:8086/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
    }
}

6、Github工作流配置文件

位置: 根目录/github/workflows/ci.yml。

监听master分支, 当有push操作时, 执行工作流, 生成镜像, 上传镜像, 触发Github runner, 拉取镜像, 运行容器。

DOCKER_USER_NAME和DOCKER_PASSWORD是步骤一注册的账号密码。

fd-dev是Github runner（即连接Github和服务器通信的工具）自定义的标签。

name: CI

on:
  push:
    branches: ['master']

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Build docker
        run: |
          docker build -t xxxxxxx/hex-lowcode-engine-starter:dev .

      - name: Login to Docker Registry
        run: docker login --username=${{ secrets.DOCKER_USER_NAME }} --password=${{ secrets.DOCKER_PASSWORD }}

      - name: Push to Docker Registry
        run: |
          docker push xxxxxxx/hex-lowcode-engine-starter:dev

  deploy:
    needs: [build]
    name: Deploy
    runs-on: fd-dev

    steps:
      - uses: actions/checkout@v2

      - name: Update docker images
        run: |
          sudo su
          sudo docker pull xxxxxxx/hex-lowcode-engine-starter:dev

      - name: Login to Docker Registry 
        run: |
          sudo su
          sudo docker login --username=${{ secrets.DOCKER_USER_NAME }} --password=${{ secrets.DOCKER_PASSWORD }}

      - name: Run
        run: |
          sudo su
          sudo docker compose -f docker-compose.yml up -d
          
      - name: Clear Docker Cache
        run: |
          sudo su
          sudo docker image prune -f
          sudo docker volume prune -f

7、Github 配置

1、注册DOCKER_USER_NAME和DOCKER_PASSWORD

进入Github项目仓库/settings/security/secrets and variables

点击New repository secrets按钮。

填写DOCKER_USER_NAME和DOCKER_PASSWORD

image.png

2、注册runner

image.png

image.png

进入服务器运行以上命令。

# 这里是直接运行, 最好是使用相关工具, 将服务挂在到后台
./run.cmd

3、增加runner标签, 用于工作流

image.png 这里，我们添加了一个fd-dev的标签。

8、结尾

看到这里，您已经完成了如何使用Docker+Github实现自动化部署前端应用。

解放双手，再也不用为手动打包上传而烦恼啦~

有任何的问题可以评论区留言哦~

avatar
文章
阅读
粉丝