当前位置： 首页 > news >正文

南宁 网站设计,无锡做食品网站的公司哪家好,光伏电站建设的国家网站,网站公司怎么做推广近年来#xff0c;随着前端技术的发展#xff0c;前端项目的构建和打包过程变得越来越复杂#xff0c;占用的资源也越来越多。我有一台云服务器#xff0c;原本打算使用Docker进行部署#xff0c;以简化操作流程。然而#xff0c;只要执行sudo docker-compose -f deploy/… 近年来随着前端技术的发展前端项目的构建和打包过程变得越来越复杂占用的资源也越来越多。我有一台云服务器原本打算使用Docker进行部署以简化操作流程。然而只要执行sudo docker-compose -f deploy/docker-compose/docker-compose.yaml up命令服务器就直接卡死CPU占用率飙升至100%导致我无法正常使用。 经过一番思考和尝试我决定借助GitHub的CICD功能来解决这个问题。通过利用免费的GitHub的服务器资源我可以只将打包好的文件部署到我的后台服务器上简直不要太方便啦下面详细介绍具体步骤。 背景 在使用Docker进行前端项目和后端服务的部署时我遇到的问题主要出在资源占用上。由于我的云服务器配置较低同时执行多个Docker容器的构建和启动指令导致服务器资源被瞬间耗尽。因此我决定寻找一种更高效的方式来完成前端项目的构建和打包而无需占用本地服务器的大量资源。GitHub的CICD功能恰好可以满足这一需求它提供了一个强大的云端构建环境可以轻松地完成项目的构建和打包工作。
准备工作 GitHub账户确保你有一个GitHub账户并且已经创建了一个仓库来存放你的前端项目代码。部署服务器准备好你的部署服务器确保服务器可以访问GitHub并且已经做好了相应的部署准备工作。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 –frombuild-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 Projecton:push:branches:- mainjobs:build:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkoutv4- name: Set up Node.jsuses: actions/setup-nodev4with:node-version: 20- name: Install dependenciesrun: npm install- name: Run build scriptrun: npm run build- name: Upload build artifactsuses: actions/upload-artifactv4with:name: frontend-buildpath: ./distdeploy:needs: buildruns-on: ubuntu-lateststeps:- name: Download build artifactsuses: actions/download-artifactv4with:name: frontend-buildpath: ./dist- name: Deploy to serveruses: appleboy/scp-actionmasterwith:host: \({{ secrets.SERVER_HOST }}username: \){{ secrets.SERVER_USERNAME }}password: \({{ secrets.SERVER_PASSWORD }}port: \){{ secrets.SERVER_PORT }}source: disttarget: /root/build3. 配置GitHub Secrets 在GitHub仓库设置中配置以下Secrets SERVER_HOST你的服务器IP地址SERVER_USERNAME你的服务器用户名SERVER_PASSWORD你的服务器密码SERVER_PORT你的服务器SSH端口默认为22 这些Secrets用于在GitHub Actions Workflow中安全地存储和使用敏感信息如服务器的登录凭证。

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

3. 下载构件 当工作流运行完成后构建好的前端文件会被上传为构件。可以在 GitHub 项目的 Actions 标签下找到对应的运行记录并下载构件。具体操作如下 打开GitHub 项目页面在左侧菜单中点击 Actions。找到触发的构建工作流点击对应的运行记录。在运行记录页面的右上角会看到 Artifacts 标签点击它。点击上传的构件名称如 frontend-build就可以开始下载。

4. 自动化部署到后台服务器 为了进一步提升效率可以借助 scp 或 rsync 将构件从 GitHub Actions 自动部署到云服务器。这里以 scp 为例需要配置 SSH 密钥并在 GitHub Secrets 中设置服务器的访问凭据。 配置 SSH 密钥 在本地生成 SSH 密钥对如果还没有的话使用命令 ssh-keygen -t rsa -b 4096 -C your_emailexample.com。将生成的公钥添加到云服务器的 ~/.ssh/authorized_keys 文件中。将私钥添加到 GitHub 项目的 Secrets 中设置为 SSH_PRIVATE_KEY。 修改工作流文件以支持自动部署 在build.yml 文件中添加部署步骤

• name: Install SSH Clientuses: webfactory/ssh-agentv0.5.4with:ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}- name: Deploy to Remote Serverrun: |scp -r ./build useryour_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: 1FROM node:20-slim AS base

  ENV PNPM_HOME/pnpm ENV PATH\(PNPM_HOME:\)PATH RUN corepack enable COPY . /app WORKDIR /appFROM base AS prod-deps RUN –mounttypecache,idpnpm,target/pnpm/store pnpm install –prodFROM base AS build COPY –fromprod-deps /app/node_modules /app/node_modules RUN –mounttypecache,idpnpm,target/pnpm/store pnpm install pnpm run buildFROM nginx:alpine LABEL MAINTAINERbypanghu163.com COPY –frombase /app/.docker-compose/nginx/conf.d/my.conf /etc/nginx/conf.d/my.conf COPY –frombuild /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: defaultconfig:- subnet: 177.7.0.0/16# 设置mysqlredis持久化保存 volumes:mysql:redis:services:web:build:context: ../../webdockerfile: ./Dockerfilecontainer_name: gva-webrestart: alwaysports:- 8080:8080depends_on:- servercommand: [ nginx-debug, -g, daemon off; ]networks:network:ipv4_address: 177.7.0.11server:build:context: ../../serverdockerfile: ./Dockerfilecontainer_name: gva-serverrestart: alwaysports:- 8888:8888depends_on:mysql:condition: service_healthyredis:condition: service_healthylinks:- mysql- redisnetworks:network:ipv4_address: 177.7.0.12mysql:image: mysql:8.0.21 # 如果您是 arm64 架构如 MacOS 的 M1请修改镜像为 image: mysql/mysql-server:8.0.21container_name: gva-mysqlcommand: mysqld –character-set-serverutf8mb4 –collation-serverutf8mb4_unicode_ci #设置utf8字符集restart: alwaysports:- 13306:3306 # host物理直接映射端口为13306environment:#MYSQL_ROOT_PASSWORD: Aa6447985 # root管理员用户密码MYSQL_DATABASE: qmPlus # 初始化启动时要创建的数据库的名称MYSQL_USER: gvaMYSQL_PASSWORD: Aa6447985healthcheck:test: [CMD, mysqladmin, ping, -h, localhost, -u, gva, -pAa6447985]interval: 10stimeout: 5sretries: 3volumes:- mysql:/var/lib/mysqlnetworks:network:ipv4_address: 177.7.0.13redis:image: redis:6.0.6container_name: gva-redis # 容器名restart: alwaysports:- 16379:6379healthcheck:test: [CMD-SHELL, redis-cli ping | grep PONG || exit 1]interval: 10stimeout: 5sretries: 3volumes:- redis:/datanetworks:network:ipv4_address: 177.7.0.14 最后附上我的cicd脚本代码测试ok,完全可用 .github\workflows\ci-cd.yml name: CI-CD Build and Deploy Frontendon:push:branches: [ main ]pull_request:branches: [ main ]jobs:build:runs-on: ubuntu-lateststrategy:matrix:node-version: [20.x]steps:- uses: actions/checkoutv4- name: set Node.js versionuses: actions/setup-nodev4with:node-version: \({{ matrix.node-version }}- name: cache Node.js moduleuses: actions/cachev4with:path: ~/.npmkey: \){{ runner.os }}-node-\({{ hashFiles(**/package-lock.json) }}restore-keys: |\){{ runner.os }}-node– name: install dependenciesrun: npm install- name: Create build directoryrun: mkdir -p ./dist- name: Build projectrun: npm run build- name: upload Artifactuses: actions/upload-artifactv4with:name: build resultpath: ./dist- name: Install SSH clientrun: sudo apt-get install -y openssh-client- name: Create a text file for testingrun: touch ./dist/text.txt- name: Set up SSH keysrun: |mkdir -p ~/.sshecho \(SSH_PRIVATE_KEY | tr -d \r ~/.ssh/id_ed25519chmod 600 ~/.ssh/id_ed25519ssh-keyscan -t ed25519 120.27.146.247 ~/.ssh/known_hostsenv:SSH_PRIVATE_KEY: \){{ secrets.SSH_PRIVATE_KEY }}- name: Deploy to Remote Serverrun: |scp -r ./dist root120.27.146.247:/root/buildenv:SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} 参考资料 GitHub ActionsDocker ComposeSCP Action 注文中提到的docker-compose.yaml内容主要用于本地开发环境的构建和部署可以按照实际需求进行调整。在CICD流程中我们主要是利用Docker来构建前端项目的镜像然后将构建好的静态文件通过SCP方式上传至部署服务器。