巧用GitHub的CICD功能免费打包部署前端项目

news2025/2/21 20:13:43

近年来，随着前端技术的发展，前端项目的构建和打包过程变得越来越复杂，占用的资源也越来越多。我有一台云服务器，原本打算使用Docker进行部署，以简化操作流程。然而，只要执行sudo docker-compose -f deploy/docker-compose/docker-compose.yaml up命令，服务器就直接卡死，CPU占用率飙升至100%，导致我无法正常使用。

经过一番思考和尝试，我决定借助GitHub的CICD功能来解决这个问题。通过利用免费的GitHub的服务器资源，我可以只将打包好的文件部署到我的后台服务器上，简直不要太方便啦！下面详细介绍具体步骤。

背景

在使用Docker进行前端项目和后端服务的部署时，我遇到的问题主要出在资源占用上。由于我的云服务器配置较低，同时执行多个Docker容器的构建和启动指令，导致服务器资源被瞬间耗尽。因此，我决定寻找一种更高效的方式来完成前端项目的构建和打包，而无需占用本地服务器的大量资源。GitHub的CICD功能恰好可以满足这一需求，它提供了一个强大的云端构建环境，可以轻松地完成项目的构建和打包工作。
在这里插入图片描述

准备工作

  1. GitHub账户：确保你有一个GitHub账户，并且已经创建了一个仓库来存放你的前端项目代码。
  2. 部署服务器：准备好你的部署服务器，确保服务器可以访问GitHub，并且已经做好了相应的部署准备工作。
  3. SSH密钥：为GitHub配置SSH密钥，以便能够通过SSH连接到你的部署服务器。

步骤

1. 编写Dockerfile

首先，确保你的前端项目有一个Dockerfile，用于构建前端项目的镜像。以下是一个简单的Dockerfile示例：

# 使用官方Node镜像作为构建环境
FROM node:20-slim AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 使用官方Nginx镜像作为运行环境
FROM nginx:alpine AS production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 创建GitHub Actions Workflow

在GitHub仓库中创建一个.github/workflows文件夹，然后在文件夹中创建一个YAML文件，例如ci-cd.yml。这个文件将定义GitHub Actions的工作流程。

name: CI/CD for Frontend Project

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v4

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '20'

    - name: Install dependencies
      run: npm install

    - name: Run build script
      run: npm run build

    - name: Upload build artifacts
      uses: actions/upload-artifact@v4
      with:
        name: frontend-build
        path: ./dist

  deploy:
    needs: build
    runs-on: ubuntu-latest

    steps:
    - name: Download build artifacts
      uses: actions/download-artifact@v4
      with:
        name: frontend-build
        path: ./dist

    - name: Deploy to server
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USERNAME }}
        password: ${{ secrets.SERVER_PASSWORD }}
        port: ${{ secrets.SERVER_PORT }}
        source: "dist"
        target: "/root/build"

3. 配置GitHub Secrets

在GitHub仓库设置中，配置以下Secrets：

  • SERVER_HOST：你的服务器IP地址
  • SERVER_USERNAME：你的服务器用户名
  • SERVER_PASSWORD：你的服务器密码
  • SERVER_PORT：你的服务器SSH端口（默认为22）

这些Secrets用于在GitHub Actions Workflow中安全地存储和使用敏感信息，如服务器的登录凭证。

4. 配置服务器

确保服务器已经配置好Nginx，并且可以通过SSH访问。将前端项目的构建输出目录（例如dist）上传到服务器后，Nginx需要配置为指向这个目录以提供静态文件服务。

5. 下载构件

当工作流运行完成后，构建好的前端文件会被上传为构件。可以在 GitHub 项目的 Actions 标签下找到对应的运行记录，并下载构件。具体操作如下：

  1. 打开GitHub 项目页面，在左侧菜单中点击 Actions。
  2. 找到触发的构建工作流，点击对应的运行记录。
  3. 在运行记录页面的右上角，会看到 Artifacts 标签，点击它。
  4. 点击上传的构件名称（如 frontend-build），就可以开始下载。

6. 自动化部署到后台服务器

为了进一步提升效率，可以借助 scp 或 rsync 将构件从 GitHub Actions 自动部署到云服务器。这里以 scp 为例，需要配置 SSH 密钥，并在 GitHub Secrets 中设置服务器的访问凭据。

配置 SSH 密钥
  1. 在本地生成 SSH 密钥对（如果还没有的话），使用命令 ssh-keygen -t rsa -b 4096 -C "your_email@example.com"。
  2. 将生成的公钥添加到云服务器的 ~/.ssh/authorized_keys 文件中。
  3. 将私钥添加到 GitHub 项目的 Secrets 中，设置为 SSH_PRIVATE_KEY。
修改工作流文件以支持自动部署

在build.yml 文件中添加部署步骤：

- name: Install SSH Client
  uses: webfactory/ssh-agent@v0.5.4
  with:
    ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}

- name: Deploy to Remote Server
  run: |
    scp -r ./build user@your_server_ip:/path/to/deploy

确保将上述命令中的 user、your_server_ip 和 /path/to/deploy 替换为你的服务器用户名、服务器 IP 地址和你想部署到的路径。
在这里插入图片描述

为了使上述命令能够顺利执行，需要在GitHub仓库的“Settings” -> “Secrets”中添加SSH_PRIVATE_KEY和服务器的IP地址等信息，将本地生成的私钥内容复制到该Secret中。
在这里插入图片描述

总结需要确认以下三点：

  • 确认公钥已经正确添加到云服务器的~/.ssh/authorized_keys文件中。
  • 在GitHub仓库的“Settings” -> “Secrets”中添加SSH_PRIVATE_KEY。将本地生成的私钥内容复制到该Secret中。
  • 添加SERVER_IP，将你的云服务器的IP地址添加到该Secret中。

通过上述步骤，利用 GitHub Actions 的免费 CI/CD 资源编译打包前端项目，并将结果自动部署到你的云服务器上，无需占用本地服务器的资源。这样不仅提高了效率，还简化了部署流程，太美啦。

注: 在使用 GitHub Actions 实现 CI/CD 自动化部署时，将生成的公钥添加到云服务器的 ~/.ssh/authorized_keys 文件中是推荐的做法，这样可以实现无密码的自动化部署。这样 GitHub Actions 在执行部署时就可以使用私钥进行身份验证，而无需每次都输入密码。这不仅提高了部署的效率，也增强了安全性，因为私钥的存储和使用可以被更好地控制。
在这里插入图片描述

结论

通过GitHub的CICD功能，我们可以利用其强大的云端构建环境来完成前端项目的构建和打包工作，而无需占用本地服务器的大量资源。这样不仅可以提高构建效率，还可以降低服务器的负担，使我们的开发和部署过程更加流畅。

附：我的Dockerfile:

# 如果需要用 cicd ，请设置环境变量：
# variables:
#     DOCKER_BUILDKIT: 1

FROM node:20-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
COPY . /app
WORKDIR /app


FROM base AS prod-deps
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod

FROM base AS build
COPY --from=prod-deps /app/node_modules /app/node_modules
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install && pnpm run build


FROM nginx:alpine
LABEL MAINTAINER="bypanghu@163.com"
COPY --from=base  /app/.docker-compose/nginx/conf.d/my.conf /etc/nginx/conf.d/my.conf
COPY --from=build  /app/dist /usr/share/nginx/html
RUN ls -al /usr/share/nginx/html

我的docker-compose.yaml文件:

version: "3"

# 声明一个名为network的networks,subnet为network的子网地址,默认网关是177.7.0.1
networks:
  network:
    ipam:
      driver: default
      config:
        - subnet: '177.7.0.0/16'
        
# 设置mysql，redis持久化保存
volumes:
  mysql:
  redis:
  
services:
  web:
    build:
      context: ../../web
      dockerfile: ./Dockerfile
    container_name: gva-web
    restart: always
    ports:
      - '8080:8080'
    depends_on:
      - server
    command: [ 'nginx-debug', '-g', 'daemon off;' ]
    networks:
      network:
        ipv4_address: 177.7.0.11

  server:
    build:
      context: ../../server
      dockerfile: ./Dockerfile
    container_name: gva-server
    restart: always
    ports:
      - '8888:8888'
    depends_on:
      mysql:
        condition: service_healthy
      redis:
        condition: service_healthy
    links:
      - mysql
      - redis
    networks:
      network:
        ipv4_address: 177.7.0.12

  mysql:
    image: mysql:8.0.21       # 如果您是 arm64 架构：如 MacOS 的 M1，请修改镜像为 image: mysql/mysql-server:8.0.21
    container_name: gva-mysql
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci #设置utf8字符集
    restart: always
    ports:
      - "13306:3306"  # host物理直接映射端口为13306
    environment:
      #MYSQL_ROOT_PASSWORD: 'Aa@6447985' # root管理员用户密码
      MYSQL_DATABASE: 'qmPlus' # 初始化启动时要创建的数据库的名称
      MYSQL_USER: 'gva'
      MYSQL_PASSWORD: 'Aa@6447985'
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "gva", "-pAa@6447985"]
      interval: 10s
      timeout: 5s
      retries: 3
    volumes:
      - mysql:/var/lib/mysql
    networks:
      network:
        ipv4_address: 177.7.0.13

  redis:
    image: redis:6.0.6
    container_name: gva-redis # 容器名
    restart: always
    ports:
      - '16379:6379'
    healthcheck:
      test: ["CMD-SHELL", "redis-cli ping | grep PONG || exit 1"]
      interval: 10s
      timeout: 5s
      retries: 3
    volumes:
      - redis:/data
    networks:
      network:
        ipv4_address: 177.7.0.14

最后，附上我的cicd脚本代码（测试ok,完全可用）：
.github\workflows\ci-cd.yml

name: CI-CD Build and Deploy Frontend

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [20.x]

    steps:
    - uses: actions/checkout@v4
    - name: set Node.js version
      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
    - name: cache Node.js module
      uses: actions/cache@v4
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

    - name: install dependencies
      run: npm install

    - name: Create build directory
      run: mkdir -p ./dist

    - name: Build project
      run: npm run build


    - name: upload Artifact
      uses: actions/upload-artifact@v4
      with:
        name: build result
        path: ./dist

    - name: Install SSH client
      run: sudo apt-get install -y openssh-client

    - name: Create a text file for testing
      run: touch ./dist/text.txt

    - name: Set up SSH keys
      run: |
          mkdir -p ~/.ssh
          echo "$SSH_PRIVATE_KEY" | tr -d '\r' > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          ssh-keyscan -t ed25519 120.27.146.247 >> ~/.ssh/known_hosts
      env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}

    - name: Deploy to Remote Server
      run: |
        scp -r ./dist root@120.27.146.247:/root/build
      env:
        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}

参考资料

  • GitHub Actions
  • Docker Compose
  • SCP Action

注：文中提到的docker-compose.yaml内容，主要用于本地开发环境的构建和部署，可以按照实际需求进行调整。在CICD流程中，我们主要是利用Docker来构建前端项目的镜像，然后将构建好的静态文件通过SCP方式上传至部署服务器。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2302095.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

使用 DeepSeek 生成商城流程图

使用 DeepSeek 生成商城流程图

步骤 1.下载 mermaid 2.使用 DeepSeek 生成 mermaid 格式 3.复制内容到 4.保存备用。 结束。
阅读更多...
VSCode自定义快捷键和添加自定义快捷键按键到状态栏

VSCode自定义快捷键和添加自定义快捷键按键到状态栏

VSCode自定义快捷键和添加自定义快捷键按键到状态栏 📄在VSCode中想实现快捷键方式执行某些指令操作，可以通过配置组合式的键盘按键映射来实现，另外一种方式就是将执行某些特定的指令嵌入在面板菜单上，在想要执行的时候&#xff0…
阅读更多...
Ubuntu22.04 - gflags的安装和使用

Ubuntu22.04 - gflags的安装和使用

目录 gflags 介绍gflags 安装gflags 使用 gflags 介绍 gflags 是Google 开发的一个开源库，用于 C应用程序中命令行参数的声明、定义和解析。gflags 库提供了一种简单的方式来添加、解析和文档化命令行标志(flags),使得程序可以根据不同的运行时配置进行调整。 它具…
阅读更多...
java | MyBatis-plus映射和golang映射对比

java | MyBatis-plus映射和golang映射对比

文章目录 Java实体类和数据库的映射1.默认驼峰命名规则2.自定义字段映射3.关闭驼峰命名规则4.JSON序列化映射 Golang1. 结构体与表的映射2. 字段与列的映射3. 关联关系映射4. 其他映射相关标签 这篇也是做数据库映射方面的对比： Java 实体类和数据库的映射 1.默认…
阅读更多...
正则表达式–断言

正则表达式–断言

原文地址：正则表达式–断言 – 无敌牛 欢迎参观我的个人博客：正则表达式特殊字符 – 无敌牛 断言assertions 1、(?...)：正向预查（positive lookahead），表示某个字符串后面应该跟着什么。但这个字符串本身…
阅读更多...
电脑想安装 Windows 11 需要开启 TPM 2.0 怎么办？

电脑想安装 Windows 11 需要开启 TPM 2.0 怎么办？

尽管 TPM 2.0 已经内置在许多新电脑中，但很多人并不知道如何激活这一功能，甚至完全忽略了它的存在。其实，只需简单的几步操作，你就能开启这项强大的安全特性，为你的数字生活增添一层坚固的防护屏障。无论你是普通用户还…
阅读更多...
QT之改变鼠标样式

QT之改变鼠标样式

QT改变鼠标图片 资源路径如下 代码实现 QPixmap customCursorPixmap(":/images/mouse.png");QCursor customCursor(customCursorPixmap);QWidget::setCursor(customCursor); // 可以设置为整个窗口或特定控件QWidget::setCursor(); // 设置为透明光标&#xff0c…
阅读更多...
ue----git局域网内部署裸仓库，别的机器进行访问

ue----git局域网内部署裸仓库，别的机器进行访问

最近由于经常迁移项目到另一台机器上进行部署更新一点就要整个迁移 弄得麻烦了 就在网上学了一下这个方式 首先我们在想要建立裸仓库的电脑上找到一个文件夹放置我们的裸仓库 在此点击鼠标右键选择 open git bash here 输入命令 创裸仓库 git init --bare gitTestName.git…
阅读更多...
PaddlePaddle的OCR模型转onnx-转rknn模型_笔记4

PaddlePaddle的OCR模型转onnx-转rknn模型_笔记4

一、PaddlePaddle的OCR模型转onnx 1、首先建立一个新的虚拟环境 conda create -n ppocr python3.10 -y conda activate ppocr 2、进入paddlepaddle官网输入以下指令安装paddlepaddle GPU版本 （我的cuda版本是11.8,根据你电脑装合适版本） pip instal…
阅读更多...
【大模型系列篇】DeepSeek-R1如何通过强化学习有效提升大型语言模型的推理能力？

【大模型系列篇】DeepSeek-R1如何通过强化学习有效提升大型语言模型的推理能力？

如何通过强化学习（RL）有效提升大型语言模型（LLM）的推理能力？ 《DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning》由DeepSeek-AI团队撰写，主要介绍了他们开发的第一代…
阅读更多...
企业存储系统

企业存储系统

一、概述 数字经济 人类通过大数据（数字化的知识与信息）的识别—选择—过滤—存储—使用，引导、实现资源的快速优化配置与再生，实现经济高质量发展的经济形态。 产业互联网推动发展 企业开始进行数字化转型，将传统…
阅读更多...
数据结构系列一：初识集合框架+复杂度

数据结构系列一：初识集合框架+复杂度

前言 数据结构——是相互之间存在一种或多种特定关系的数据元素的集合。数据结构是计算机专业的基础课程，但也是一门不太容易学好的课，它当中有很多费脑子的东西，之后在学习时，你若碰到了困惑或不解的地方 都是很正常的反应&…
阅读更多...
Linux系统编程学习 NO.14——缓冲区的概念、模拟实现Cstdio库

Linux系统编程学习 NO.14——缓冲区的概念、模拟实现Cstdio库

用户缓冲区 先介绍一下关于用户缓冲区的周边知识。 fread和fwrite的返回值 谈一谈fread和fwrite的返回值，如果写入/读取文件成功，fread或fwrite的返回值指的是实际写入/读取的内存块数量(实际的nmemb的大小)。假如fwrite写入的size是5字节，…
阅读更多...
某手sig3-ios算法 Chomper黑盒调用

某手sig3-ios算法 Chomper黑盒调用

Chomper-iOS界的Unidbg 最近在学习中发现一个Chomper框架，Chomper 是一个模拟执行iOS可执行文件的框架，类似于安卓端大名鼎鼎的Unidbg。 这篇文章使用Chomper模拟执行某手的sig3算法，初步熟悉该框架。这里只熟悉模拟执行步骤以及一些常见的…
阅读更多...
MySQL版本选择与安装

MySQL版本选择与安装

MySQL版本选择与安装 MySQL 5.5 优点: 稳定性：5.5版本是长期支持（LTS）版本，因此它非常稳定，被广泛部署在生产环境中。 兼容性：与旧版本的MySQL和各种应用程序有很好的兼容性。 缺点: 过时：…
阅读更多...
【飞行器原理学习】——1. 机翼及机翼参数

【飞行器原理学习】——1. 机翼及机翼参数

飞行器原理学习——1.机翼 一、 概述 飞机的各种机翼是飞机的控制面 通过铰链、钢索、液压等方式连接在机身上 操纵面运动时，会改变机翼的弧度和形状，使流经的空气发生偏转，从而影响空气动力的大小。使飞机围绕着3轴运动 二、机翼的操纵面…
阅读更多...
TS语言自定义脚手架

TS语言自定义脚手架

初始化 新建文件夹初始化命令 npm init -ytsc --initnpm i types/nodenpm i typescript# 处理别名npm i -D tsc-alias -y 表示选项都为yes 安装ts相关依赖 新建相关文件 bin 文件夹 src文件夹 commands 文件夹 （命令 utils 文件夹 (封装方法） index.t…
阅读更多...
lab4 CSAPP：Cachelab

lab4 CSAPP：Cachelab

写在前面 最简单的一集 实验室分为两个部分。在A部分中，实现一个缓存模拟器。在B部分中，编写一个矩阵针对高速缓存性能优化的转置功能。 感觉是比较经典的问题，之前在体系结构的课程中接触过，终于能通过lab实操一下了。 实验目…
阅读更多...
VScode C语言学习开发环境；运行提示“#Include错误，无法打开源文件stdio.h”

VScode C语言学习开发环境；运行提示“#Include错误，无法打开源文件stdio.h”

C/C环境配置 参考： VS Code 配置 C/C 编程运行环境（保姆级教程）_vscode配置c环境-CSDN博客 基本步骤 - 安装MinGW-W64，其包含 GCC 编译器：bin目录添加到环境变量；CMD 中输入gcc --version或where gcc验证…
阅读更多...
雷龙CS SD NAND(贴片式TF卡)测评体验

雷龙CS SD NAND(贴片式TF卡)测评体验

声明：非广告，为用户体验文章 前段时间偶然获得了雷龙出品的贴片式 TF 卡芯片及转接板，到手的是两片贴片式 nand 芯片搭配一个转接板，其中有一片官方已经焊接好了，从外观来看，正面和背面设计布局合理&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023