前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务

叠甲前言

本文仅作为个人学习GitLab的CI/CD功能记录，不适合作为专业性指导，如有纰漏，烦请君指正。

Gitlab的CI/CD做什么用的

自工作以来，去过大大小小公司，有一些公司技术人员专业性欠佳，每当产品经理或测试人员需要最新或者某个版本的包时【比如安卓的apk包，IOS的ipa包，前端的打包静态资源】，开发总是要停下手中的工作，去手动给测试打包，这类手动工作包括了打开某个项目，加载项目依赖，构建项目生成产物，然后部署产物让测试人员得以看到效果；可这些步骤都需要时间，非常影响开发效率。
所以一些有经验的开发人员会去构建一套自动化部署脚本，方便测试人员测试与产品经理验收，如果公司项目仓库用的是GitLab，那么CI/CD工具将是非常适合解决这类问题的。它可以通过脚本自由的配置打包部署流程，简单说，就是代替你做这些事情，掌握这类工具的使用是非常有必要的。

Gitlab的CI/CD由什么构成

Gitlab的CI/CD主要是由流水线和Runner组成。

流水线：就是每当你提交代码到GitLab仓库后，会生成一个Job任务，这个任务可以自定义流程，也就是要完成什么事情，基本常见的就是：构建、测试、发布。

Runner：就是这个任务由谁来执行。你可以定义在哪台主机执行，一般情况推荐使用专门用于打包工作的云主机，当然不是绝对的，这个取决于你公司的需求和业务。【因为之前有个公司就存在玄学说法：“安卓打包机器IP如果是国内的那么上架谷歌商店机审通过概率会很低”， 真假我就不去探究，我放云服务器上完全是为了方便部署】

准备工作

  1. 申请一个Gitlab个人账号【需要有管理员权限的账号，主要你也不能用公司的GitLab瞎搞呀】
  2. 购买一个云服务器, 并配置好Nodejs环境。
  3. 将前端项目的远程地址切换为GitLab仓库。

注意：国内Gitlab代理商的应该是极狐gitlab。此外姑且认为你对于Linux基本命令操作有一些了解，会使用一些基本部署工具。

配置Runner

云服务器下载安装Runner
请按详细文档操作：安装Runner
我的云服务器是 Linux的Ubuntu 24.0

curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh" | sudo bash

sudo apt install gitlab-runner

云服务器注册Runner
请按详细文档操作：注册Runner
这里，我注册一个 群组Runner，这样在gitlab的group下的所有项目都可以用这个Runner，具体看你个人需求。
在这里插入图片描述
进入步骤：
GitLab -> project -> setting -> CI/CD -> Runner->创建 群组Runner
我的云服务器是 Linux的Ubuntu 24.0， 暂未使用Docker等部署容器
在这里插入图片描述
在云主机上执行 提示命令
在这里插入图片描述
注册时，execute选择 shell.
此时Runner就注册好了，回到GitLab -> project -> setting -> CI/CD -> Runner，应该可以看到群组已经创建了Runner。
在这里插入图片描述

配置流水线脚本

流水线脚本就是定义 任务具体要做哪些事情：

# 定义全局变量，之后脚本可以引用
variables:ProjectName: "webpack_study"BuildResult: buildResult.txt# 定义Job任务脚本流程顺序：构建 -> 部署（测试） -> 发布（线上）
stages:- build- deploy- publish# 定义缓存，缩短每次拉取依赖的时间（前端项目主要缓存node_modules和package-lock.json）
cache:key: defaultCache # 缓存名字paths:- node_modules/- package-lock.json# 定义每次执行Job任务前 都会去执行 （主动拉取项目依赖）
before_script:- echo "初始化环境 更新依赖和配置..."- npm install- echo "环境初始化完成!"- echo "依赖和配置更新完成!"# 执行构建测试环境脚本
Build_Test_Job:stage: build     # 流程阶段when: manual     # 手动触发， 可以自定义条件触发 only:- /^\d{8}$/    # 限制分支，正则表达式匹配只有分支名包含8个数字的才能生成此脚本【具体原因见末尾《1》】tags: - webPro       # tags匹配Runner，只有Runner具有这个Tag，任务才能在这个Runner上执行，【查看Runner-Tag见《2》】script:- echo "开始执行构建测试环境Web打包脚本..."    # echo 是输出日志- npm run stage > $BuildResult         # 执行Package.json的脚本构建脚本，并将日志输出到 buildResult.txt文件中【具体看你自己的前端项目配置的打包命令是什么】- echo "测试环境Web打包完成!"artifacts:paths:- $BuildResult       # gitlab平台可见的打包产物：日志buildResult.txt文件- build              # gitlab平台可见的打包产物：build文件夹【取决于你前端项目的脚本】Deploy_Test_Job:stage: deploywhen: manualonly:- /^\d{8}$/tags: - webProneeds: ["Build_Test_Job"] # 执行必要的前置条件script:- echo "开始执行部署测试环境Web打包产物到云服务器上的脚本..."- mkdir -p /var/www/web/build          # 云服务器 递归创建/var/www/web/build目录，如果已有，则跳过【为何是这个目录？请看《3》】- rm -rf /var/www/web/build/*          # 云服务器 移除/var/www/web/build目录下的所有文件【需要授予gitlab-runner用户读写权限，这里存在一定风险，建议使用DOCKER容器隔离】- cp -r build /var/www/web/ > $BuildResult # 将前端打包生成的build目录【取决于你前端项目的脚本】文件移动到 /var/www/web 目录- echo "测试环境Web发布完成!"artifacts:paths:- $BuildResult       # gitlab平台可见的打包产物：日志buildResult.txt文件# 执行构建线上环境脚本
Build_Online_Job:stage: build     # 流程阶段when: manual     # 手动触发， 可以自定义条件触发 only:- /^\d{8}$/    # 限制分支，正则表达式匹配只有分支名包含8个数字的才能生成此脚本【具体原因见末尾《1》】tags: - webPro       # tags匹配Runner，只有Runner具有这个Tag，任务才能在这个Runner上执行，【查看Runner-Tag见《2》】script:- echo "开始执行构建线上环境Web打包脚本..."    # echo 是输出日志- npm run product > $BuildResult         # 执行Package.json的脚本构建脚本，并将日志输出到 buildResult.txt文件中- echo "线上环境Web打包完成!"artifacts:paths:- $BuildResult       # gitlab平台可见的打包产物：日志buildResult.txt文件- build_online              # gitlab平台可见的打包产物：build文件夹Publish_Online_Job:stage: publishwhen: manualonly:- /^\d{8}$/tags: - webProneeds: ["Build_Online_Job"] # 执行必要的前置条件script:- echo "开始执行部署线上环境Web打包产物到云服务器上的脚本..."- mkdir -p /var/www/web/build_online          # 云服务器 递归创建/var/www/web/build_online目录，如果已有，则跳过- rm -rf /var/www/web/build_online/*          # 云服务器 移除/var/www/web/build_online目录下的所有文件【需要授予gitlab-runner用户读写权限，这里存在一定风险，建议使用DOCKER容器隔离】- cp -r build_online /var/www/web/ > $BuildResult # 将前端打包生成的build_online目录文件移动到 /var/www/web 目录- echo "线上环境Web发布完成!"#《1》
# 需求决定：前端项目因为每周五都要发一次版本，分支名字就是 20250718，分支上线后会合并到main分支，main分支的代码就是稳定的，所以打包构建分支只允许周分支生成Job
#《2》
# GitLab -> Project -> setting -> CI/CD -> Runner
#《3》
# /var/www/web/因为此目录我配置了 Nginx访问映射，只要访问xx.xx.xx（云服务器公网IP）:端口就会自动去找 /var/www/web/build/index.html
# 云服务器前端项目部署的测试环境端口是：113.45.241.111:8087
# 云服务器前端项目部署的线上环境端口是：113.45.241.111:8089
# 当然你也可以用Nginx部署, 也可以用Docker，jetBains哪个你熟悉用哪个。

完整前端项目代码：
前端项目地址

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

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

相关文章

基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考

基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考

下面是一个完整的、严格模式下的 TypeScript 实现，包含 CommandManager、Command 和 CompositeCommand 类，支持 undo/redo 功能。完整实现代码1. Command 接口和基类// src/commands/ICommand.ts export interface ICommand {execute(): void;undo(): vo…
阅读更多...
2022年CIE SCI2区TOP，NSGA-II+直升机-无人机搜救任务分配，深度解析+性能实测

2022年CIE SCI2区TOP，NSGA-II+直升机-无人机搜救任务分配，深度解析+性能实测

目录1.摘要2.数学模型3.求解方法4.结果展示5.参考文献6.代码获取7.算法辅导应用定制读者交流1.摘要 无人机任务分配对于保障搜救活动高效有序开展具有重要意义，但现有研究较少考虑无人机作业环境与性能对任务分配的影响。针对低空风场和地形因素对无人机能耗与性能…
阅读更多...
暑期算法训练.4

暑期算法训练.4

目录 15.力扣 904.水果成篮 15.1 题目解析： 15.2 算法思路： 15.2.1 暴力解法： 15.2.1 滑动窗口 15.3代码演示： 15.4 总结反思： 16 力扣 438.找出字符串中所有字母的异位词 16.1 题目解析： 16.2算法…
阅读更多...
关于个人博客系统的测试报告

关于个人博客系统的测试报告

1）项目背景2）项目功能介绍 登陆写博客/编辑已存在博客删除博客注销 2）基于项目功能设计相关测试用例3）基于测试用例编写自动化测试 准备工作登陆界面相关博客首页相关博客详情页相关编辑博客相关删除博客相关注销相关 4&#xff0…
阅读更多...
Spring Boot 与微服务详细总结

Spring Boot 与微服务详细总结

一、Spring Boot 核心概述 Spring Boot 是简化 Spring 应用开发的框架，作为 Spring 技术栈的整合方案和 J2EE 开发的一站式解决方案，其核心优势体现在： 快速创建独立运行的 Spring 项目，轻松集成主流框架内置 Servlet 容器&…
阅读更多...
轻松上手：从零开始启动第一个 Solana 测试节点

轻松上手：从零开始启动第一个 Solana 测试节点

嗨，各位技术爱好者们！ 大家是否对 Solana 的“光速”交易处理能力感到好奇？或者你是一名开发者，正准备在 Solana 上构建下一个杀手级 dApp？无论大家是出于学习目的还是实际开发需求，亲手运行一个 Solana 节…
阅读更多...
Gerrit workflow

Gerrit workflow

提交代码 每次提交代码前，先执行 git pull --rebase ，确保已经合并天上代码，解决冲突 git add git commit -m git push origin HEAD:refs/for/{BRANCH_NAME} 可考虑设置 alias 方式，参考下文 CR-2 情况处理(verify-1情况一样处理…
阅读更多...
量化交易如何查询CFD指数实时行情

量化交易如何查询CFD指数实时行情

CFD即所谓的差价合约，是投资者在不拥有实际资产的情况下，交易金融市场的一种方式。最近笔者研究这一块比较多，但查遍整个中文互联网却很少找到关于CFD实时行情的查询教程。因此有了这篇文章。以下我将通过一个简单的Python代码示例&#xff0…
阅读更多...
sql练习二

sql练习二

首先，建表。创建学生表和score表接着导入创建好基础信息就可以开始做了。3、分别查询student表和score表的所有记录4、查询student表的第2条到第5条记录5、从student表中查询计算机系和英语系的学生的信息6、从student表中查询年龄小于22岁的学生信息7、从student表…
阅读更多...
windows11下基于docker单机部署ceph集群

windows11下基于docker单机部署ceph集群

windows下基于docker单机部署ceph集群 创建ceph专用网络 docker network create --driver bridge --subnet 172.20.0.0/16 ceph-network查看是否创建成功（查看创建状态） docker network inspect ceph-network拉取镜像：(镜像源自行选择) docke…
阅读更多...
使用DataGrip连接安装在Linux上的Redis

使用DataGrip连接安装在Linux上的Redis

目录 一、前言 二、开放防火墙端口 三、使用DataGrip连接安装在Linux上的Redis 一、前言 在学习黑马Redis从入门到实战的视频，完成了Redis在linux上的安装配置之后，我们可以使用图形化界面方便操作使用redis数据库。在24年JavaWebAI学习时连接MySQL数…
阅读更多...
MySQL的union、union all导致排序失效

MySQL的union、union all导致排序失效

今天练习SQL，使用union all 连接各个查询导致我的各个查询排序失效，最后发现使用union all后会忽略各个模块的order by，只有最外层的order by才会生效原SQL如下：( selectexam_id tid,count(distinct uid) uv, count(uid) pv frome…
阅读更多...
LVS 集群技术实践：NAT 与 DR 模式的配置与对比

LVS 集群技术实践：NAT 与 DR 模式的配置与对比

1 实验环境规划 实验目标是搭建一个负载均衡集群，通过 LVS 调度器将流量分发到两台真实服务器（RS1 和 RS2）。2.网络配置3 实验步骤关闭防火墙和 SELinux安装 HTTP 服务（在 RS21和 RS2 上）：sudo systemctl s…
阅读更多...
YOLOv8中添加SENet注意力机制

YOLOv8中添加SENet注意力机制

注意力机制（Attention Mechanism）是深度学习中的一种方法，在图像处理领域，尤其是在卷积神经网络（CNN）和视觉Transformer等架构中。图像数据具有局部相关性，注意力机制可以帮助模型聚焦于图像中更重要的区域，从而提升处理效果。 SENet（Squeeze-and-Excitation Network）…
阅读更多...
SpringBoot五分钟快速入门指南

SpringBoot五分钟快速入门指南

使用 Spring Boot 构建应用 本指南提供了关于Spring Boot如何帮助您加速应用开发的一些示例。随着您阅读更多 Spring 入门指南，您将看到 Spring Boot 的更多用例。本指南旨在让您快速了解 Spring Boot。如果您想创建自己的基于 Spring Boot 的项目，请访问 Spring Initializr…
阅读更多...
docker，防火墙关闭后，未重启docker，导致端口映射失败

docker，防火墙关闭后，未重启docker，导致端口映射失败

首先，看这篇文章前，建议先把网上其他的文章说的方法尝试一遍！！！ 1. 现象 docker启动某一个容器，然后映射端口时显示失败2. 解决 把网上的方法尝试一遍之后，最后发现是防火墙的问题！&…
阅读更多...
事务处理与AOP(web后端笔记第四期)

事务处理与AOP(web后端笔记第四期)

p.s.这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解 目录事务spring事物管理事物属性--回滚事物属性--传播行为(propagation)AOP一些核心概念通知类型通知的执行顺序切入点表达式executionannotation连接点事务 事物是一组操作的集合&…
阅读更多...
第36周———— RNN实现阿尔茨海默病诊断

第36周———— RNN实现阿尔茨海默病诊断

目录 前言 1.检查GPU 2.查看数据 3.划分数据集 4.创建模型与编译训练 ​​​​5.编译及训练模型 6.结果可视化 7.模型预测 8.总结： 前言 🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 1.检查G…
阅读更多...
equals和hashcode方法重写

equals和hashcode方法重写

在 Java 中，当你需要基于对象的内容而非引用地址来判断两个对象是否相等时，就需要重写equals和hashCode方法。以下是具体场景和实现原则：一、为什么需要同时重写这两个方法？equals方法：默认比较对象的内存地址&#xf…
阅读更多...
Excel批量生成SQL语句 Excel批量生成SQL脚本 Excel拼接sql

Excel批量生成SQL语句 Excel批量生成SQL脚本 Excel拼接sql

Excel批量生成SQL语句 Excel批量生成SQL脚本 Excel拼接sql一、情境描述在Excel中有标准的格式化数据，如何快速导入到数据库中呢？有些工具支持Excel导入的，则可以快速导入数据---例如Navicat；如果不支持呢，如果将Excel表…
阅读更多...
最新文章

Copyright @ 2022~2023