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

前言

在开发实践中,自动化是标配,而基于 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


猜你喜欢

  • Array: ES10 的最新特性和运用

    在前端开发中,数组(Array)是一个非常常见且重要的数据类型。可以说,在 JavaScript 中,数组的使用频率非常高。在 ECMAScript 10(ES10)中,对数组的功能也进行了一些扩展和...

    1 年前
  • 如何在 Next.js 中使用 MongoDB?

    MongoDB 是一种非关系型数据库,广泛应用于现代 Web 开发和云计算应用中,它的灵活性和可扩展性能够满足各种需求。在 Next.js 框架中使用 MongoDB 不但可以提高 Web 应用的性能...

    1 年前
  • Cypress 如何实现动态路由下的测试

    在前端开发的过程中,动态路由通常被用来实现页面跳转和参数传递的功能。而在测试阶段,我们需要能够验证动态路由的正确性。本文将通过 Cypress 测试框架为例,介绍如何实现动态路由下的测试,并提供相应的...

    1 年前
  • 使用 Angular Material 创建漂亮的用户界面

    前言 在现代的 Web 开发中,UI 设计变得越来越重要。好的用户界面可以带来更好的用户体验和更高的转化率。Angular Material 是一个能够帮助我们在 Angular 应用程序中创建漂亮的...

    1 年前
  • ES2016:轻松学习 Spread Operator 的实现技巧

    在 JavaScript 编程中,Spread Operator (展开运算符)是一个非常有用的特性,它的实现技巧也值得我们深入学习。本文将详细介绍 Spread Operator 在 JavaScr...

    1 年前
  • Mongoose:避免使用 find() 抓取所有文档

    Mongoose 是一个 Node.js 下对 MongoDB 进行建模操作的 ORM 框架。它能够将 MongoDB 中的文档转化为与 Node.js 中 JavaScript 对象类型相似的 Mo...

    1 年前
  • Web Components 概述 - 3 - 如何自定义 shadow DOM?

    Web Components 是 Web 技术的一种新思路,它可以让开发者创建可重用的自定义组件,这些组件可被多个应用程序重用并显著提升开发效率。其中一个关键特性是 Shadow DOM,它使得我们可...

    1 年前
  • Deno 中如何使用 WebSocket 进行文件传输?

    前端开发人员通常需要进行文件传输,例如将文件上传到服务器或从服务器下载文件。在传输文件时,WebSocket 是一种流行的选择,因为它提供了实时、可靠和高效的双向通信。

    1 年前
  • Koa 项目中 session 导致的内存泄漏如何解决

    前言 在 Koa 项目中使用 session 是常见的需求。然而由于不合适的使用方式可能会导致内存泄漏的问题,本文将介绍这个问题及其解决方法。 问题描述 在 Koa 项目中使用 session 时,一...

    1 年前
  • React 中使用 Axios 发送 AJAX 请求

    在前端开发中,经常需要向后端发送 AJAX 请求来获取数据。而 Axios 是一个流行的 HTTP 请求库,它可以方便地在 React 中发送 AJAX 请求。本文将介绍在 React 中使用 Axi...

    1 年前
  • 对 OAuth2 与 RESTful API 的理解与应用

    什么是 OAuth2 OAuth2 是一种流行的开放标准协议,用于为 Web 应用程序和移动应用程序提供安全的 API 访问机制。通过 OAuth2,用户可以以受限的方式,授权给第三方应用程序访问其数...

    1 年前
  • RxJS 应用之过滤流数据

    RxJS (Reactive Extensions for JavaScript) 是一个非常流行的用于响应式编程的 JavaScript 库。它在实现异步数据流处理、数据筛选等方面非常强大。

    1 年前
  • ES11 (2020) 中的函数式编程:如何提高代码的可读性和可维护性?

    在前端开发中,函数式编程一直是一个非常强大的编程范式。最近发布的 ES11 (2020) 版本中加入了一些新特性,使函数式编程更加容易、更加简洁、更加实用。本文将介绍一些新特性,以及如何使用它们来提高...

    1 年前
  • Serverless 应用开发中的安全性问题分析与防御

    随着云计算技术的发展和应用场景的变化,Serverless 架构作为一种新型的云计算范式,越来越受到关注。Serverless 应用开发不需要考虑服务器环境和资源管理等问题,使得应用开发更加简单、高效...

    1 年前
  • 如何在 ECMAScript 2017 中使用 class 关键字优化代码结构

    JavaScript 语言在演进过程中,越来越靠近其他高级编程语言,原生的面向对象编程机制也越来越完善。ES6 引入了 class 关键字,它是一种定义类的语法糖,用起来比 ES5 的原型继承方式更加...

    1 年前
  • Jest 测试中使用 Puppeteer 的最佳实践

    在前端开发中,测试是非常重要的环节。而 Jest 作为目前最流行的前端测试框架,拥有着非常便捷的测试方式和出色的测试报告。但是 Jest 并不能测试一些 UI、DOM 相关的内容,这时候,我们就需要 ...

    1 年前
  • 使用 Chai 进行 HTTP 断言测试中的超时错误及解决方法

    在进行前端开发中,测试是一个不可或缺的步骤。而 HTTP 断言测试则是其中的一种常见形式。通过测试 HTTP 请求和响应的内容,可以确保应用程序的行为是符合预期的,同时减少潜在的错误。

    1 年前
  • PWA 应用如何处理文件是否可以被缓存的判断

    在 PWA 应用中,我们通常需要使用 Service Worker 技术来缓存应用的资源,从而提升应用的性能和用户体验。但是,在缓存资源时,我们需要判断哪些文件可以被缓存,哪些文件不可以被缓存。

    1 年前
  • ES10 中新的 Array.prototype.slice 能否代替常用操作?

    在 JavaScript 中,数组是一个非常有用的数据结构,对于数组的操作在前端开发中是十分常见的。在 ES6 中,JavaScript 引入了很多方便开发者的新的特性,包括数组扩展和解构赋值。

    1 年前
  • Docker 使用 vsFTP 搭建 FTP 映射

    在前端开发中,我们可能需要通过 FTP 上传或下载文件到服务器上,而在本地使用 FTP 客户端时需要进行端口映射等配置,不方便且容易出错。而 Docker 则为我们提供了一种更加便捷,稳定的方式。

    1 年前

相关推荐

    暂无文章