Gitlab CI/CD教程以及实战docker自动部署前端项目（全）

已于 2022-09-29 00:02:00 修改
阅读量6.6k 收藏 34
点赞数 7
分类专栏： 配置 文章标签： ci 前端 docker
于 2022-05-22 14:44:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_47872288/article/details/124818005
版权
本文详细介绍了如何使用Gitlab CI/CD结合Docker实现前端项目的自动化部署，包括gitlab和gitlab-runner的Docker安装、.gitlab-ci.yml文件编写、使用阿里云OSS部署、变量注入以及各种流水线类型和触发方式。还提供了错误分析和调试手段。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

前言

主要用来记录自已怎么通过gitlab-cicd实现自动化部署
通过git代码来触发自动更新

具体的参考资料如下：

  1. GitLab CI/CD 教程
  2. 官网gitlab对cicd的说明文档

主要的视频链接如下：
GitLab CI/CD系列教程
以下博客知识点大部分来源于该b站视频知识（非常不错，推荐）

关于下面的技术点中遇到的错误以及实战遇到的错误
都可看我这篇博客知识：
Gitlab CI/CD中的yml遇到的错误分析含解决方法（全）

1. 技术知识

1.1 docker安装gitlab

<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
GitLab CI/CD 视频教程 + 文字教程，从入门到精通。
知无涯
05-22 7640
之前我在优快云直播了GitLab CI/CD 入门及实践，收到了很多小伙伴的私信和赞誉，于是我开始了坚持在B站分享有关GitLab CI/CD的视频。以下是内容目录传送路。 GitLab CI/CD系列教程（一）：Docker安装GitLab GitLab CI/CD系列教程（二）：Docker安装GitLab Runner GitLab CI/CD系列教程（三）：.gitlab-ci.yml的介绍与简单编写 GitLab CI/CD系列教程（四）：.gitlab-ci.yml的常用关键词介绍与使用 G
实战：从 0 到 1 GitLab CI/CD 前端持续部署
知无涯
08-17 6562
文章目录写在前面服务器配置环境安装安装 Docker安装 GitLab测试 GitLabGitLab Runner前端项目 CI/CD 流程的设计正式开始编写 .gitlab-ci.yml 的内容介绍 .gitlab-ci.yml镜像的使用stages 执行顺序的定义job 内容的编写在 CI/CD 中使用 SSH keys前端项目部署到阿里云OSS前端项目 CI/CD 最佳业务配置思路常见问题排查及修复相关参考链接 写在前面 首先感谢大家能来参加我的 Chat，能来参加的同学都是想在业余有一些其他知识的
Gitlab CI/CD 自动化打包部署前端（vue）项目
biubiubiuPlus的博客
03-12 4360
4.本地将公钥(~/.ssh/id_rsa_vue_deploy.pub)添加到服务器的授权密钥中。2.在/etc/nginx/conf.d目录下，新增nginx配置文件。10.在gitlab上查看runner和流水线。四、GitLab Runner安装与注册。5.输入您获得的令牌以注册Runner。2.安装GitLab Runner。4.输入您的GitLab实例URL。6.设置CI/CD变量–值为私钥。6.输入对这个Runner的描述。7.输入Runner的tag。8.输入Runner执行程序。
gitlab cicd docker 部署 前端纯静态项目
07-30
gitlab cicd docker 部署 包含dockerfile .gitlab-ci.yml 文件. 不包含隐秘信息. demo版本.使用node npm版本
GitLab CI/CD学习教程（第二章Runner）
最新发布
qq_41898196的博客
03-18 1705
🚀从零开始，结合具体场景和示例，让你彻底掌握 GitLab CI/CD 的配置！
持续集成指南：Gitlab CI/CD 自动部署前端项目
寒冰屋的专栏
10-11 355
之前陆续写了 Gitlab 的安装使用还有 Gitlab CI/CD 的配置使用，已经把 AspNetCore 的后端项目都做了持续集成了，尝到甜头之后，现在前端的项目也要加入自动化部署，所以经过一番折腾，有了本文~
GitLab CI/CD系列教程（一）
哈哈
12-04 980
来自：GitLab CI/CD系列教程（一）：Docker安装GitLab_哔哩哔哩_bilibili1. 创建虚拟机并连接Xterm 创建一个4G内存的虚拟机，否则很容易启动不了，报502虚拟机的创建看这篇：VMware16的安装及VMware配置Linux虚拟机_爱吃咖喱鸡的博客-优快云博客https://blog.youkuaiyun.com/m0_49879527/article/details/124405332虚拟机创建好了以后修改一下ssh.service的端口号为60022，因为Gitlab需要占用2
如何使用极狐GitLab CI/CD 构建容器镜像并推送到 AWS ECR？
GitLab 中国发行版
04-28 845
极狐GitLab CI/CD 和 AWS ECR 的集成实战。
GitLab CI_CD 从入门到实战笔记
demon7552003的小本本
09-15 2732
本书主要介绍GitLabCI/CD的相关内容。首先介绍GitLabCI/CD的基础知识，包括CI/CD的几个基本概念（pipeline、stages、job、GitLabRunner和.gitlab-ci.yml文件）；然后介绍GitLabCI/CD的35个关键词、每个关键词的语法及其使用场景，并给出一些示例；最后介绍CI/CD的实践，通过3种不同的项目详细讲解各种部署方式，包括微服务架构项目流水线开发、GitLabCI/CD与Kubernetes的集成，以及如何将项目部署到Kubernetes集群中等。
Gitlab CI/CD基础教程
bocai_xiaodaidai的博客
08-20 2991
一、编写CI/CD流程文件 仓库根目录下创建 .gitlab-ci.yml # 定义 stages（阶段）。任务将按此顺序执行。 stages: - pull-source-code - restart-service # 定义 job pull-source-code: stage: pull-source-code tags: - localhost # runner的tag名称 only: - master #只有master分支提交代
GitLab CI/CD 入门与简单实践
2301_77373203的博客
01-26 4242
黄色标注的地方即为源分支的流水线情况，我这里是已经成功完成流水线因而会出现绿色的勾代表流水线已经完成，若未完成流水线，则此处会出现一个检测流水线状态的圆圈，此时管理员需要点击 CI/CD 栏目，选择右上角的 Run Pipelines ，并选择此新提交的源分支触发其流水线进程，等待流水线完成之后才会出现 Merge 按钮。同时，GitLab 也提供了自托管的选择，你可以将 GitLab 部署在自己的服务器或云环境中，对保密性和隐私性有更高的要求的组织可以选择自行管理。
GitLab-CI/CD指南
陈戏猿
08-10 2814
由于公司没有运维，写go服务时各个环境编译部署还是略显麻烦，由于代码管理使用的是 gitlab，所以决定使用 gitlab 自带的 CI/CD 来做自动编译和部署，这样每次提交代码以后就可以自动部署到服务器上了。Executor的类型在注册 Runner 的时候确定，比较常用的是 Docker 和 SSH。GitLab，Runner 和 Executor 之间的关系如下图所示(图片来自GitLab官方文档)。
Gitlab CICD进阶教程
bocai_xiaodaidai的博客
01-27 7257
基于我所在公司的代码管理和发布流程，分享一套CICD最佳实践。 我们的项目有三个分支： master：生产分支，生产环境使用的分支 uat：测试分支，测试环境使用的分支 dev：开发分支，人少的话开发人员可直接在此分支上开发，也可基于此分支创建各自的分支，功能开发完合并再到dev分支 我们的工作流： 假如当前版本是1.0.0，即将发布一个新版本1.0.1。 1、开发人员在deb分支上开发，开发完1.0.1的功能后上传各自代码。 2、由项目负责人确认大家都提交了最新代码，提交MR，将dev
Gitlab CI/CD：入门指南
csfchh的博客
02-15 6123
Web端登录Gitlab仓库后，如果有用户有相应权限，可以在左侧边栏看到CI/CD菜单，包含：Pipelines, Jobs, Schedules三个选项。下面对这些菜单的功能和使用方法进行介绍。
Docker(三) 通过gitlab部署CICD
skyyemperor的博客
03-16 2177
文章目录Docker(三) docker通过gitlab部署CICD一、 部署gitlab1.1 拉取gitlab镜像1.2 运行gitlab镜像1.3 配置1.4 若发生502报错二、 CI2.1 Runner 搭建2.2 注册Runner2.3 样例测试2.3.1 新建maven-tomcat项目2.3.2 创建.gitlab-ci.yml2.3.3 编写Dockerfile文件2.3.4 编写docker-compose.yml文件三、 CD3.1 安装Jenkins3.2 配置目标服务器及Gitla
GitLab CI/CD学习教程（第一章概念）
qq_41898196的博客
03-12 920
CI（持续集成）是代码提交后自动构建、测试，快速发现错误。CD（持续交付/部署）是自动将代码部署到测试或生产环境。
Gitlab-CICD最简单明了的入门教程
AlbenXie的博客
12-17 178
gitlab-ci.yml 文件被用来管理项目的 runner 任务，Gitlab CI通过.gitlab-ci.yml文件管理配置job，该文件定义了statge顺序、job应该如何触发和工作、执行什么脚本、如何构建pipeline等流程该文件存放于仓库的根目录, 默认名为我们先看一个简单的例子：.gitlab-ci.yml## 定义pipeline流程：verify->build->dockerpush->deploystages:- verify- build- deploy#单元测试。
gitlab cicd docker
08-10
GitLab CI/CD是GitLab提供的持续集成和持续交付的解决方案，可以方便地进行项目的构建、测试和部署等工作。使用Docker作为GitLab CI/CD的部署环境可以提供更好的灵活性和可移植性。 要在Docker环境中安装GitLab Runner，可以使用以下命令： ``` 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的容器，并将GitLab Runner的配置文件挂载到容器中。同时，还将宿主机的Docker套接字文件挂载到容器中，以便GitLab Runner可以与宿主机上的Docker进行交互。123 #### 引用[.reference_title] - *1* *2* [GitLab CI/CD+Docker的CI/CD部署工作流](https://blog.youkuaiyun.com/weixin_45685541/article/details/128357953)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *3* [Gitlab CI/CD教程以及实战docker自动部署前端项目（全）](https://blog.youkuaiyun.com/weixin_47872288/article/details/124818005)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农研究僧

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值