Jenkins+Docker 镜像自动打包及推送到阿里云容器仓库

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

前言

在开发实践中,自动化是标配,而基于 Docker 的自动化镜像构建能力快速广受青睐。在实际生产场景中,往往需要将构建好的 Docker 镜像推送到阿里云容器镜像服务以方便管理和使用。本文将详细介绍如何实现基于 Jenkins+Docker 的自动化镜像构建和推送,旨在提高开发效率和操作效率。

动手实践

1. 准备工作

在进行实践前,需要先准备好以下工具和资源:

  • Git 用于本地代码管理和版本控制
  • Docker 用于构建容器镜像
  • Jenkins 用于配置和执行自动化打包构建任务
  • 阿里云容器镜像服务,用于存储 Docker 镜像

2. 创建项目

使用 Git 克隆或新建一个前端项目,将代码放到任意目录下,以本文中的“sample-app”项目为例。该项目的代码目录结构如下:

-----------
--- ---------
--- -------------
--- ------------
--- -----------------
--- ----
-   --- ----------
-   --- --------
-   --- ---------
--- -----------------

其中,src 目录下包含了项目的源代码和资源文件,package.json 是项目的依赖管理文件,webpack.config.js 是项目的构建配置文件。

3. 安装 Docker

安装 Docker 参考官方文档:https://docs.docker.com/get-docker/

4. 构建 Docker 镜像

在项目根目录下新建 Dockerfile 文件,用于构建 Docker 镜像:

- -- ------- -- ------
---- --------------

- ------ --- ----------
------- ----

- - ------------ - ----------------- ------ --- --
---- ------------- --

- ------
--- --- -------

- ---------- --- --
---- - -

- --------
--- --- --- -----

- ----------
------ ----

- ------
--- ------- --------

自动化构建脚本通过 Dockerfile 文件产生 Docker 镜像,其中包含了项目代码、应用依赖和运行环境等信息,并在其中声明了容器内部暴露的端口号和启动容器的命令。

使用 Docker CLI 构建 Docker 镜像,命令行如下:

------ ----- -- ---------- -

其中,-t 参数指定 Docker 镜像名称及标签,. 表示当前目录下的 Dockerfile 文件。

构建成功时,会在本地 Docker 镜像库中产生一张名为 sample-app 的 Docker 镜像,可以使用以下命令查看:

------ ------

5. 配置 Jenkins

在 Jenkins 中创建一个新的 Freestyle 项目,填写项目名称和描述,并在项目配置界面中设置 Git 代码源和构建任务等参数。

Git 代码源配置

在项目配置界面中,选择“源码管理”,填写 Git 仓库地址、分支和认证信息等。

构建任务配置

在项目配置界面中,选择“构建环境”,勾选“删除工作空间”和“用 Docker 构建环境”。

在“构建”选项中添加“Execute shell”任务,进行 Docker 镜像构建和推送操作。

下面是一个示例构建命令:

-----------

---- --- ------ ---

- --------
-- - - -- ----------------------------- -- ----
    ---- ---- -- ---------------------------------------------------------------------------------- ----------- ---- -- -----------------------------
    ---- ----- -- -----------------------------
--

- ------- ------ --
---- --------------------------- - ------ ----- -------------------------------------- ---------------- ------------------

- -- ------ --
------ ----- -- ---------- -

- -- ------ --
------ --- ---------- -------------------------------------------------------

- -- ------ ------
------ ---- -------------------------------------------------------

该构建任务首先安装了 Docker Compose,根据环境变量 DOCKER_REGISTRYDOCKER_IMAGE_NAME 以及项目构建编号动态计算 Docker 镜像的名称,最后将构建好的 Docker 镜像推送到阿里云镜像服务中。

6. 配置环境变量

在 Jenkins 项目配置界面中,选择“构建环境”,在“环境变量”中添加如下配置:

------------------------------
--------------------------------------------
--------------------------------------------
------------------------------

其中,DOCKER_REGISTRY为阿里云容器镜像服务实例的地址,DOCKER_REGISTRY_USERNAMEDOCKER_REGISTRY_PASSWORD 为阿里云镜像服务的登陆认证信息,DOCKER_IMAGE_NAME为 Docker 镜像的名称。

在实际操作中,DOCKER_REGISTRYDOCKER_REGISTRY_USERNAME 等敏感信息应该存储在 Jenkins 的“凭据”中,以避免在代码仓库和构建任务中对敏感信息明文存储。

7. 前端项目部署

sample-app 构建好的 Docker 镜像推送到阿里云镜像服务后,即可在阿里云的 Kubernetes 集群中部署前端应用。

下面是一个示例的 Kubernetes 配置文件:

----------- -------
----- ----------
---------
  ----- ----------
  ---------- -------
-----
  --------- -
  ---------
    ------------
      ---- ----------
  ---------
    ---------
      -------
        ---- ----------
    -----
      -----------
        - ----- ----------
          ------ ---------------------------------
          ---------------- ------
          ------
              - -------------- --

在 Kubernetes 中,通过创建 Deployment 来管理应用的副本,启动后根据指定的镜像和端口号自动部署容器。

总结

本文详细介绍了如何使用 Jenkins+Docker 完成前端项目的自动化构建和推送,良好的自动化构建能力能够显著提高工作效率和持续交付质量。学习本文所介绍的知识可以促进前端开发者更好地熟悉 Docker 以及应用容器化自动化构建工具,实现更高效的持续交付。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64f6ecfcf6b2d6eab3f7a696


猜你喜欢

  • Mongoose 中使用 $slice 操作符对数组进行截取

    Mongoose 中使用 $slice 操作符对数组进行截取 在开发过程中,我们经常需要对数组进行截取。Mongoose 是一个 Node.js 环境下的 MongoDB 驱动程序,它提供了 $sli...

    1 年前
  • 使用 Stencil 编写轻量级 Web Components

    Web Components 技术是现代 Web 应用开发的重要组成部分,可以让开发者方便地创建可重用的 UI 组件,不必担心组件之间的隔离和污染问题。Stencil 是一个基于 Web Compon...

    1 年前
  • 使用 CPU 校正技术提高神经网络在移动平台上的性能

    在移动应用开发中,神经网络技术得到了广泛的应用,例如人脸识别、语音识别、图像分类等等。然而,在移动平台上运行神经网络模型的性能问题一直是一个挑战。CPU 校正技术可以帮助提高神经网络在移动平台上的性能...

    1 年前
  • 如何在 LESS CSS 中实现动态效果?

    在前端开发中,动态效果是非常重要的。在 LESS CSS 中,可以通过使用变量、循环、条件语句等功能,实现各种动态效果。本文将介绍如何在 LESS CSS 中实现动态效果,并提供示例代码供读者参考。

    1 年前
  • Babel+Webpack 如何实现 Autoprefixer 自动添加浏览器前缀?

    随着 Web 技术的不断发展,前端开发工作越来越复杂。其中,浏览器兼容性问题一直是前端开发人员面临的挑战。而浏览器前缀,是其中的一部分。在前端开发中,我们经常需要为 CSS 样式添加浏览器前缀,以兼容...

    1 年前
  • Redis 实现消息队列详解

    什么是消息队列 在计算机领域中,消息队列(Message Queue,简称MQ)是一种允许一些不同应用程序之间进行通信和传输消息的协议和模式。 它允许在应用程序之间异步传输消息,减少应用程序之间的依赖...

    1 年前
  • React 生命周期及使用场景详解

    在 React 中,组件的生命周期是非常重要的概念之一。React 生命周期指的是组件在它被创建和销毁的过程中所经历的状态和方法调用的顺序。本篇文章将详细讲解 React 生命周期和常见的使用场景,为...

    1 年前
  • Koa.js 中如何使用 Passport.js 进行身份认证

    身份认证是将用户身份信息与其使用的应用程序进行关联的过程。在 Web 应用程序开发中,“身份认证”通常用于保护 Web 应用程序中的资源,如页面,API 端点等。Passport.js 是一个身份验证...

    1 年前
  • 响应式设计的排版效果案例解析

    什么是响应式设计? 响应式设计是一种Web设计方法,能够在各种设备上提供一致的用户体验,包括桌面电脑、笔记本电脑、平板电脑以及智能手机等移动设备。这种设计方法利用CSS媒体查询和弹性网格布局技术,使页...

    1 年前
  • Webpack 打包优化实践:externals 和 CDN 篇

    Webpack 是一个在前端项目开发中应用广泛的打包工具。在项目打包时,会将所有代码打入一个文件中,这包括了应用的所有依赖和代码。但是,随着项目规模的逐渐增大,由此带来的包体积也会越来越大,这意味着用...

    1 年前
  • 完全入门 Custom Elements

    在现代 Web 开发中,前端技术日新月异,新的技术层出不穷。Custom Elements 是一项非常有趣的技术,它让我们能够创建自定义的 HTML 元素,使得我们可以更好地组织和重用代码。

    1 年前
  • Angular 中使用 RxJS 避免数据冲突

    在 Angular 应用中,数据冲突是一个常见的问题。当多个组件同时访问同一组数据时,就容易出现数据不一致的问题。为了避免这种问题,我们可以使用 RxJS 来处理数据流,确保数据的一致性。

    1 年前
  • 如何在 SASS 中使用属性嵌套

    引言 SASS 是一种颇受欢迎的 CSS 预处理器,具有诸多功能和优点,其中属性嵌套是其中的一项。属性嵌套可以减少冗余代码,提高代码的可读性和可维护性,本文将详细介绍如何在 SASS 中使用属性嵌套。

    1 年前
  • 如何处理 Sequelize 查询时返回 NULL 问题

    在使用 Sequelize 进行数据库操作时,我们常常会遇到查询结果为 NULL 的情况。这时候,我们需要对这种情况进行处理,以保证程序的正常运行。 本文将详细介绍 Sequelize 查询时返回 N...

    1 年前
  • 如何解决 Serverless 碰到的无限循环问题?

    随着我们使用 Serverless 技术的越来越多,我们也逐渐发现了一些可能会遇到的问题。其中之一就是无限循环问题。在使用 Lambda 这样的无服务器服务时,无限循环可能会导致一些不良的影响,例如资...

    1 年前
  • 如何使用 Express.js 进行 Web 爬虫开发?

    概述 Web 爬虫是一种自动化采集互联网信息的程序,通过发送 HTTP 请求并解析响应数据,可以获取网站上的有用信息。在前端开发中,我们经常需要从其他网站获取数据来完成数据分析、信息展示等任务。

    1 年前
  • PM2 中如何设置 Nginx 反向代理

    前言 在前端开发中,我们常常会遇到需要将前端应用部署到服务器上的情况,并且需要通过 Nginx 进行反向代理进行访问。本文将介绍如何使用 PM2 和 Nginx 进行反向代理,以便实现更加高效的前端应...

    1 年前
  • 解析 ES10 中新增的动态 import() 方法

    ES10中新增了动态 import() 方法,允许在运行时动态地加载 JavaScript 模块。在以往,为了实现异步加载模块,我们常常需要借助你异步加载器库以实现主流程执行后再加载。

    1 年前
  • Vue.js 实践中的数据绑定技巧

    Vue.js 是一种现代化的 Javascript 框架,它强调了响应式的数据绑定、组件化架构和灵活的模板语法。在实践中,我们发现数据绑定是 Vue.js 中最重要的特性之一,因为它可以使我们的应用程...

    1 年前
  • Windows 下 Docker 快速安装教程

    Docker 是一款非常流行的容器化工具,可以让你快速的构建、打包、部署应用程序。本篇文章将介绍 Docker 在 Windows 上的安装过程,帮助广大前端开发者快速上手。

    1 年前

相关推荐

    暂无文章