Docker配置Gitlab-runner实现自动化容器化部署前端项目

叠甲前言

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

云主机注册Gitlab Runner 自动化构建部署的弊端

在前一文中,我们在Linux云主机上注册了Gitlab-runner, 每次在gitlab流水线上发起构建部署时,云主机上的gitLab-runner先校验环境,再拉取项目依赖,然后将打包生成的产物放置到云主机的本地目录里,最后用nginx将公共访问端口映射到产物放置的目录。它不可避免的会存在3个问题:

  1. 依赖冲突,资源未隔离。 如果项目很多,管理将会非常麻烦,尤其还存在项目之间依赖资源冲突【比如 A项目用node14,B项目用node20】,构建需要频繁切换环境。同时一些项目如果要清理移除【或者更新】,那么需要去一一寻找并清理此项目独有的冗余依赖和资源,同时又需要避免一些依赖可能其他项目正在使用,所以会不可避免存在项目与项目之间相互影响、资源泄漏。
  2. 可移植性差。 如果云主机故障、停用、资源超额、续费昂贵等,要将已有项目迁移,那么就存在新云主机环境配置等各种繁琐操作【比如 不仅需要从新走一遍配置流程,同时不同操作系统对同一工具存在配置差异】,如果项目很多,尤其是项目迭代很久,使用到的各类资源多时,迁移工作会更加麻烦。
  3. 安全性问题。 云主机上放置了各种项目的各种依赖和资源,打包产物也是直接挂到云主机上,通过nginx将公共访问端口映射到产物放置的目录,会存在安全性问题,一些违规脚本可能可以直接操作到云主机上的目录和文件。

针对这3个问题,我们采用目前主流的自动化容器化部署工具Docker来解决这些问题。

Docker

什么是Docker?Docker有什么用?
Docker 是一个开源的容器化平台,它允许开发者将应用程序及其所有依赖(如代码、运行时环境、库、配置文件等)打包到一个标准化的容器中,从而实现 “一次构建,到处运行” 的目标。
大白话就是:Docker 解决了 “在我电脑上能运行,在你电脑上却不行” 的环境一致性问题。

Docker由什么构成?
Docker由镜像、容器、容器引擎构成。

镜像是什么?
镜像就是一个模版,包含了应用运行的所有环境、依赖、代码。
举个例子:
我们要打包一个前端项目,那么我们会先基于NodeJs镜像为基础,下载项目依赖到/node_modules,然后用webpack打包成一个静态资源,再以此用Docker 构建成一个项目镜像。
其中,NodeJs镜像也可以被其他项目所使用,你构建出来的项目镜像也可以在不同容器中加载,镜像就像一个规定好具体功能的模版,一次创建后,可以多次使用,嵌套使用。
镜像本身不可修改,只可读。

容器是什么?
容器就是基于镜像创建的运行实例,是一个完全独立的运行单元。容器会牢牢包裹镜像,在镜像基础上添加了一层可写层,所有运行时的修改【如文件创建修改】都会保存到这一层,不会影响到原始镜像。你可以理解为,镜像是“类”, 容器是基于类构建的“对象”。

容器引擎是什么?
容器引擎是 Docker 的核心运行环境,负责管理镜像和容器的生命周期(创建、启动、停止、删除等)

怎么使用Docker?

在使用之前,我们需要知道 配置这一套自动化部署流程的最终目地是什么:

即我们修改了前端项目代码,提交到Gitlab后,只需要在Gitlab上 CI/CD流水线
点击一下构建、发布就可以将最新的修改迅速部署到测试、线上环境。

Docker在上述流程中承担的工作就是 处理构建打包,并将打包产物通过创建容器加载镜像的方式部署
其实流程很简单,可以看下方简化图:
在这里插入图片描述

准备工作

  1. 拥有一台云主机
  2. 拥有一个Gitlab管理员权限账号,并将项目代码远程地址链接到Gitlab。

安装Docker

云主机运行(我的是Linux):

sudo apt-get update
sudo apt-get install ca-certificates curl gnupg

添加官方GPG密钥

sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL --connect-timeout 10 --max-time 30 https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg

添加Docker软件源

echo \"deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \"$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

安装Docker Engine

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

验证安装

sudo docker run hello-world

出现这条信息说明docker安装成功。

添加国内镜像

考虑到官方镜像仓库服务器距离东大比较远,建议添加国内镜像:

新建一个daemon.json文件,位置在 /etc/docker/daemon.json
在这里插入图片描述
json文件填入以下内容:

{"registry-mirrors": ["https://docker.registry.cyou","https://docker-cf.registry.cyou","https://dockercf.jsdelivr.fyi","https://docker.jsdelivr.fyi","https://dockertest.jsdelivr.fyi","https://mirror.aliyuncs.com","https://dockerproxy.com","https://mirror.baidubce.com","https://docker.m.daocloud.io","https://docker.nju.edu.cn","https://docker.mirrors.sjtug.sjtu.edu.cn","https://docker.mirrors.ustc.edu.cn","https://mirror.iscas.ac.cn","https://docker.rainbond.cc"]
}

更新配置

sudo systemctl daemon-reload

重启Docker

sudo systemctl restart docker

查看国内镜像配置是否成功

docker info

如果出现镜像地址,说明配置成功了
在这里插入图片描述

Docker拉取Nginx镜像

docker pull nginx

在这里插入图片描述

Docker安装NodeJS镜像

docker pull node:20

在这里插入图片描述

Docker安装GitLab-Runner镜像

创建gitlab-runner配置文件目录
(之后你的runner有什么配置需要改的可以直接在这个目录找到 /srv/gitlab-runner/config )

sudo mkdir -p /srv/gitlab-runner/config

安装镜像并启动gitlab-runner容器

sudo docker run -d --name gitlab-runner --restart always \-v /srv/gitlab-runner/config:/etc/gitlab-runner \-v /var/run/docker.sock:/var/run/docker.sock \gitlab/gitlab-runner:latest

在这里插入图片描述
在这里插入图片描述

在Docker的Gitlab-Runner容器中注册Runner

什么是注册?

Gitlab流水线自动化构建、部署等任务Job需要指定一个执行者,也就是用哪一个gitlab-runner去完成这个任务。而gitlab-runner只有注册后才会与gitlab项目/项目群组关联到。

生成一个群组gitlab-runner
在 项目的 setting->CI/CD->runner 选择创建群组runner

群组runner允许在同一个群组下,所有的项目都可以使用它去执行流水线任务

在这里插入图片描述
拷贝到 url 和 token值,云主机执行:

sudo docker exec -it gitlab-runner gitlab-runner register \--non-interactive \--url "这里填Url" \--registration-token "这里填token" \--executor "docker" \--docker-image alpine:latest \--description "docker-runner" \--tag-list "docker,linux,可以填自定义标签" \--run-untagged="true" \--locked="false" \--access-level="not_protected"

参数说明
--tag-list: 就是runner的标签列表,我们在编辑项目.gitlab-ci.yml文件时,可以给Job任务设置标签,这样执行任务时,就会去找用于这个标签的runner。

验证是否注册成功
在 项目的 setting->CI/CD->runner中可以看到状态:
在这里插入图片描述

配置项目的Dockerfile

在前端项目的根目录新建一个Dockerfile文件:
具体语法含义见 Docker官方文档:Dockerfile配置参考 和注解:
在这里插入图片描述
它本身并不难理解,常用的也就那几个,花点时间认真看一下文档学习一下,
可以参考我的(你的项目具体要看你自己的业务):

# 使用Nodejs20镜像环境,并命名为 builder阶段
FROM node:20 As builder
# 将builder阶段工作目录设置为 /app
WORKDIR /app
# 将项目所有文件复制到/app目录
COPY . .
# 允许传入构建环境【stage测试环境, product 线上环境】
ARG BUILD_SCRIPT=stage
# 安装项目依赖以及执行前端脚本【npm run xxx这个取决于你项目打包命令是怎样的,我的会打包生成build文件夹[线上环境是build_online文件夹]】
RUN npm install && npm run $BUILD_SCRIPT
# 分环境统一输出目录
RUN if [ "$BUILD_SCRIPT" = "product" ]; then \cp -r /app/build_online /app/dist; \else \cp -r /app/build /app/dist; \fi# 使用nginx最新版镜像环境
FROM nginx:latest
# 将builder阶段的/app/dist目录下的生成文件 复制到 nginx镜像的默认静态资源目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 声明容器对外暴露80端口(nginx默认端口)
EXPOSE 80
# 启动nginx映射服务
CMD ["nginx", "-g", "daemon off;"]

配置.gitlab-ci.yml文件

在前端项目的根目录新建一个.gitlab-ci.yml文件:
在这里插入图片描述
具体语法含义见 GitLab 官方文档:CI/CD 配置参考 和注解:
可以参考我的(你的项目具体要看你自己的业务):

# 定义Job任务脚本流程顺序:构建 -> 部署(测试) -> 发布(线上)
stages:- build- deploy- publish# 执行构建测试环境脚本
Build_Test_Job:stage: build     # 流程阶段image: docker:latestservices:- docker:dind  # dind意思是Docker in Docker, 让你的 CI-Job能在Runner容器里直接执行 Docker 命令(比如 docker build、docker run 等),就像在物理机上一样。when: manual     # 手动触发, 可以自定义条件触发 only:- /^\d{8}$/    # 限制分支,正则表达式匹配只有分支名包含8个数字的才能生成此脚本【具体原因见末尾《1》】tags: - webPro       # tags匹配Runner,只有Runner具有这个Tag,任务才能在这个Runner上执行,【查看Runner-Tag见《2》】script:- echo "开始构建测试环境Docker镜像..."    # echo 是输出日志- docker build --build-arg BUILD_SCRIPT=stage -t webpack_study:latest .  # docker构建一个镜像 命名为webpack_study标签为latest- docker save webpack_study:latest -o webpack_study.tar # 将构建好的镜像保存为tar文件- echo "测试环境Docker镜像构建并打包为tar文件完成!"- echo "尝试导出构建产物dist文件夹和打包镜像..."- docker create --name temp_container webpack_study:latest  # 创建一个临时容器加载镜像- docker cp temp_container:/usr/share/nginx/html ./dist     # 从临时容器中导出build产物- docker rm temp_container                                  # 删除临时容器- echo "导出构建产物dist文件夹和打包镜像完成..."artifacts:paths:- webpack_study.tar  # docker产物- distDeploy_Test_Job:stage: deployimage: docker:latestservices:- docker:dindwhen: manualonly:- /^\d{8}$/tags: - webProneeds: ["Build_Test_Job"] # 执行必要的前置条件script:- echo "开始在Docker容器上部署测试环境镜像..."- docker load -i webpack_study.tar              # 加载build阶段产物(打包的镜像)到本地- docker stop docker_webpack_study || true      # 如果有 容器叫 docker_webpack_study, 将其停止并移除- docker rm docker_webpack_study || true- docker run -d --name docker_webpack_study -p 8087:80 webpack_study:latest # 启动容器docker_webpack_study加载镜像webpack_study:latest把容器的80端口映射到服务器的8087端口- echo "测试环境Docker容器上部署镜像完成!"# 执行构建线上环境脚本
Build_Online_Job:stage: build     # 流程阶段image: docker:latestservices:- docker:dindwhen: manual     # 手动触发, 可以自定义条件触发 only:- /^\d{8}$/    # 限制分支,正则表达式匹配只有分支名包含8个数字的才能生成此脚本【具体原因见末尾《1》】tags: - webPro       # tags匹配Runner,只有Runner具有这个Tag,任务才能在这个Runner上执行,【查看Runner-Tag见《2》】script:- echo "开始构建线上环境Docker镜像..."    # echo 是输出日志- docker build --build-arg BUILD_SCRIPT=product -t webpack_study_online:latest .  # docker构建一个镜像 命名为webpack_study标签为latest- docker save webpack_study_online:latest -o webpack_study_online.tar # 将构建好的镜像保存为tar文件- echo "线上环境Docker镜像构建并打包为tar文件完成!"- echo "尝试导出构建产物dist_online文件夹和打包镜像..."- docker create --name temp_container webpack_study_online:latest  # 创建一个临时容器加载镜像- docker cp temp_container:/usr/share/nginx/html ./dist_online     # 从临时容器中导出build产物- docker rm temp_container                                  # 删除临时容器- echo "导出构建产物dist_online文件夹和打包镜像完成..."artifacts:paths:- webpack_study_online.tar  # docker产物- dist_onlinePublish_Online_Job:stage: publishimage: docker:latestservices:- docker:dindwhen: manualonly:- /^\d{8}$/tags: - webProneeds: ["Build_Online_Job"] # 执行必要的前置条件script:- echo "开始在Docker容器上部署线上环境镜像..."- docker load -i webpack_study_online.tar              # 加载build阶段产物(打包的镜像)到本地- docker stop docker_webpack_study_online || true      # 如果有 容器叫 docker_webpack_study, 将其停止并移除- docker rm docker_webpack_study_online || true- docker run -d --name docker_webpack_study_online -p 8089:80 webpack_study_online:latest # 启动容器docker_webpack_study加载镜像webpack_study:latest把容器的80端口映射到服务器的8087端口- echo "线上环境Docker容器上部署镜像完成!"#《1》
# 需求决定:前端项目因为每周五都要发一次版本,分支名字就是 20250718,分支上线后会合并到main分支,main分支的代码就是稳定的,所以打包构建分支只允许周分支生成Job
#《2》
# GitLab -> Project -> setting -> CI/CD -> Runner
# 云服务器测试环境端口是:8087
# 云服务器线上环境端口是:8089
# 这里的端口需要你在云服务器上开通入口安全组。

到此,我们修改了前端项目代码,提交到Gitlab后,只需要在Gitlab上 CI/CD流水线
点击一下构建、发布就可以将最新的修改迅速部署到测试、线上环境。

在这里插入图片描述

其他

  1. 不止前端项目,什么安卓、IOS、Flutter、RN、后端项目等其他项目其实都可以用Docker与本文相同的方式实现容器化部署,唯一区别的就是在打包的脚本内容不同,比如 安卓的要到gradle命令, IOS要用到xcodebuild命令等。

完整Demo项目地址
Github Docker部署前端项目仓库地址
tips: 记得拉20240718 分支

可能遇到的问题

  1. Docker执行流水线构建时,出现 2375问题:
    在这里插入图片描述
    解决方案
    找到 /srv/gitlab-runner/config 目录下的 config.toml文件:
    在这里插入图片描述
    volumes 这一栏进行扩充:
    在这里插入图片描述
volumes = ["/cache", "/usr/bin/docker:/usr/bin/docker", "/var/run/docker.sock:/var/run/docker.sock"]

解释说明:
Docker 2375问题解决

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

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

相关文章

MySQL介绍和MySQL包安装

文章目录MySQL介绍和安装1.MySQL介绍1.1 MySQL 的定义1.2 MySQL 的特点1.3 MySQL 的应用领域1.4 MySQL 的存储引擎1.5 MySQL 的架构1.6 MySQL 的优势和局限性1.7 MySQL 的未来发展趋势2.MySQL安装2.1 主机初始化2.1.1 设置网卡名2.1.2 设置ip地址2.1.3 配置镜像源2.1.4 关闭防火…

J2EE模式---视图助手模式

视图助手模式基础概念视图助手模式(View Helper Pattern)是一种结构型设计模式,其核心思想是将视图层中复杂的逻辑提取到独立的助手类中,使视图代码更加简洁、易于维护。视图助手通常提供一系列工具方法,用于处理格式化…

开源的语音合成大模型-Cosyvoice使用介绍

1 模型概览 CosyVoice 是由阿里巴巴达摩院通义实验室开发的新一代生成式语音合成大模型系列,其核心目标是通过大模型技术深度融合文本理解与语音生成,实现高度拟人化的语音合成体验。该系列包含初代 CosyVoice 及其升级版 CosyVoice 2.0,两者…

深度学习·CLIP

CLIP 数据大小 4亿个文本-图像对,而且是高质量的 预训练方法 Text encoder“The text sequence is bracketed with [SOS] and [EOS] tokens and the activations of the highest layer of the transformer at the [EOS] token are used as the feature representati…

美光MTFC8GAKAJCN-4M_IT型eMMC应用介绍

1.1 芯片订购信息美光MTFC8GAKAJCN-4M_IT型eMMC,容量8GB,153-ball VFBGA封装。1.2 eMMC料号含义2.1 特性•多媒体卡(MMC)控制器和NAND闪存•153球FBGA封装(符合RoHS标准,环保封装)•VCC&#xf…

面向对象分析与设计40讲(6)设计原则之开闭原则

文章目录 一、概念 二、示例(C++ 实现) 1. 违反开闭原则的示例 2. 遵循开闭原则的示例 一、概念 开闭原则(Open-Closed Principle,OCP)是面向对象设计中的重要原则,由 Bertrand Meyer 提出,核心思想可以概括为:对扩展开放,对修改关闭。 具体来说,一个软件实体(如类…

[Linux入门] Linux 网络设置入门:从查看、测试到配置全攻略

目录 一、查看网络信息&#xff1a;了解你的网络状态 1️⃣核心工具&#xff1a;ip命令&#xff08;替代ifconfig&#xff09; <1> 基本语法&#xff1a; <2> 实用操作示例&#xff1a; 2️⃣查看路由表&#xff1a;route命令 3️⃣查看网络连接状态&#xf…

TyFlow:三维领域的粒子特效革命者

在动态模拟与视觉特效领域&#xff0c;​​TyFlow​​ 作为 3ds Max 中诞生的一款革命性粒子系统插件&#xff08;后来也支持独立开发&#xff09;&#xff0c;正在彻底改变艺术家们创作复杂动力学效果的方式。它以其无与伦比的灵活性、强大的计算能力和开创性的技术理念&#…

本地一键部署 Spark-TTS,支持Mac和Windows

Spark-TTS是一个文本转语音(TTS)的项目&#xff0c;零样本语音克隆逼真&#xff0c;多语言支持&#xff0c;语音参数可控。使用魔当(LM Downloader)&#xff0c;可以实现Spark-TTS的本地一键部署。 注意 如果使用Windows&#xff0c;推荐用NVIDIA显卡&#xff0c;生成速度较快…

传统时间:Date日期类,SimpleDateFormat,Calendar

目录DateSimpleDateFormatCalendarDate 代表的是日期和时间 常见构造器和方法&#xff1a; 构造器说明public Date()创建一个Date对象&#xff0c;代表的是系统当前此刻日期时间public Date(long time)把时间毫秒值转换成Date日期对象 常见方法说明public long getTime()返…

linus 环境 tomcat启动日志分隔

1.定义可执行文件&#xff1a;tomcatlog9090.sh fsize$(ls -l /data/tomcat-cms_9090/logs/catalina.out | cut -d -f 5)if [ $fsize -gt 40960000 ]; thenextdatedate %Y_%m_%d_%k_%Mdatapath/data/tomcat-cms_9090/logscd /data/tomcat-cms_9090/logscp catalina.out catali…

解密 Base64 编码:从原理到应用的全面解析

在网络传输、数据存储的世界里&#xff0c;Base64 编码如同一座隐形的桥梁&#xff0c;默默承担着重要的角色。当你发送邮件附件、在网页中嵌入图片&#xff0c;或是处理一些特殊格式的数据时&#xff0c;都可能在不知不觉中与它打交道。那么&#xff0c;Base64 编码究竟是什么…

C++实现Adam与RMSProp优化算法

C++中实现Adam和RMSProp优化算法 以下是一些关于C++中实现Adam和RMSProp优化算法的实用示例和资源,涵盖不同场景和应用。由于篇幅限制,完整代码,但提供关键实现片段、库使用方法和学习资源。 基础Adam优化器实现 Adam优化器实现 #include <vector> #include <c…

【物联网】基于树莓派的物联网开发【16】——树莓派GPIO控制LED灯实验

场景介绍 掌握GPIO引脚连接双色LED模块&#xff0c;编写Python程序代码&#xff0c;实现GPIO控制点亮双色LED灯&#xff01; 窗口查看引脚编号 1、在终端输入指令&#xff1a;pinout2、使用树莓派输入gpio readall命令查看pin状态 输入以下命令安装Git sudo apt install git-co…

低延迟网络中 gRPC 客户端的隐藏瓶颈及解决方案

低延迟网络中 gRPC 客户端的隐藏瓶颈及解决方案 在分布式系统性能优化领域,有一句名言:"优化非瓶颈环节都是徒劳"(Eliyahu M. Goldratt)。gRPC 作为广泛使用的高性能服务间通信框架,在特定场景下也会出现容易被忽略的客户端瓶颈。本文将解析这一问题的本质、复现…

打印机因为网络问题不能用,接到交换机后解决

之前的问题可参考&#xff1a; 打印机不能用&#xff1a;网络能ping通&#xff0c;并不表示网络正常好用_能ping通打印机却打印错误-CSDN博客 今天同事要打印个东西&#xff0c;问我打印机能不能用。我就奇怪了&#xff1a;之前不是好好的吗&#xff1f;一问&#xff0c;现在…

ubuntu22.04 录视屏软件推荐

4. VokoscreenNG功能&#xff1a;VokoscreenNG 是一个多功能的桌面录屏工具&#xff0c;支持录制整个屏幕、特定区域、窗口&#xff0c;并可以录制系统声音和麦克风。安装&#xff1a;sudo apt update sudo apt install vokoscreen-ng优点&#xff1a;界面友好&#xff0c;操作…

1、黑马点评复盘(短信登录-Session或Redis实现)

短信登录分别使用session和redis实现 1、基于Session实现登录 主要功能&#xff1a; 发送验证码短信验证码登录、注册校验登录状态 1.1 实现发送短信验证码功能 1.1.1 业务逻辑 用户在提交手机号后&#xff0c;会校验手机号是否合法&#xff0c;如果不合法&#xff0c;则要求…

文件管理困境如何破?ZFile+cpolar打造随身云盘新体验

文章目录前言【视频教程】1.关于ZFile2.本地部署ZFile3.使用ZFile4.ZFile的配置5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定ZFile公网地址前言 每天的数字生活如同在数据海洋中航行&#xff0c;工作文档、旅行照片、学习资料…这些重要资产是否总让你感到难以掌控&…

开源数据库E-R图绘制工具分享

1. 特点&#xff1a; 可直接使用&#xff0c;无需注册账号 无状态的纯前端工具&#xff0c;数据会存放在浏览器中。设计完成后可将数据保存到本地 2. 使用场景&#xff1a; 描述E-R图&#xff0c;对数据库表关系进行直观分析 3. 效果&#xff1a; 4. 测试数据 用来测试的建…