记一次前端容器化实践K8S

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
简介: 一次前端容器化实践K8S

e096de27787c2acad24ef8c1e100a06.png

前言

k8s 全称 kubernetes,这个名字大家应该都不陌生,k8s是为容器服务而生的一个可移植容器的编排管理工具,集应用的部署和运维,负载均衡,服务发现和扩容,版本回滚于一身,越来越多的公司正在拥抱 k8s ,本篇从操作层面记一次前端应用部署到 k8s 上的流程

相关站点

  • Jenkins 创建前端项目,日常打包构建
  • Rancher 前端应用部署,服务发现,nginx配置,版本管理等

前端项目结构改造

Dockerfile

在项目根目录下添加 Dockerfile 文件

FROM nginx:1.19.8-alpine COPY dist /usr/share/nginx/html 
复制代码

Jenkinsfile

在项目根目录下添加文件 Jenkinsfile (主要的指定环境,打包脚本,发布进程选项都在该文件编排)

${{project-name}} 为项目名称

pipeline {
    agent {
        label 'node2'
    }
    tools {
        nodejs 'node-v14.15.3'
        jdk 'jdk8'
    }
    stages {
        stage('package'){
            steps(){
                   script{
                        // sh 'npm cache clean --force'
                        // sh 'rm -rf node_modules'
                        sh 'pnpm install'
                        if (params.prodCommon) {
                            sh 'npm run build:prod'
                        } else {
                            sh 'npm run build'
                        }
                        if (params.sonar) {
                            sh  '/u02/jenkins/tools/hudson.plugins.sonar.SonarRunnerInstallation/scanner4.6/bin/sonar-scanner -Dsonar.projectKey=${{project-name}} -Dsonar.host.url=http://xxxxxxxxxx -Dsonar.login=02472590e8204ccd7087c9ca9d08e0ce369c9745'
                        }
                   }
            }
        }
        stage('docker push'){
            steps(){
                   script{
                       sh '/root/k8s-tools/bin/docker-push.sh ${{project-name}}'
                   }
            }
        }
        stage('helm upload'){
            steps(){
                   script{
                       sh '/root/k8s-tools/bin/helm-push.sh ${{project-name}}'
                   }
            }
        }
        stage('rancher refresh pro') {
            steps() {
                script {
                    if (params.rancherRefreshPro) {
                        sh "/root/k8s-tools/bin/rancher-refresh-pro.sh"
                    }
                }
            }
        }
        stage('rancher update'){
            steps(){
                   script{
                       def targetEnv = params.targetEnv
                       sh '/root/k8s-tools/bin/rancher-updateApp.sh ${{project-name}} sofa-cloud ${{project-name}}-${targetEnv}'
                   }
            }
        }
    }
}
复制代码

366121045c92953c24b7129df21d4d8.png

红框中的运行阶段都可以在 Jenkinsfile 的 stages 中定义,包括是否使用 cnpm,是否使用 sonar 扫描,使用哪些环境变量等等

把前端项目改造好就可以去 Jenkins 建项目了

Jenkins

  • 管理员新建项目配置访问权限

af3eae9f9b480acede22f34ad9e1ddf.png

  • 修改项目配置

2cd1318489378a6f4c6c3a3da9b7d06.png

  • 关联 git仓库

f13e4344ece04deb96475fa68f0a3ad.png

这个时候前端就可以正常构建了,但是最后推送 rancher 的时后会报错,那是因为还没有把 chart 包推送到 rancher 上

关于 helm chart

官方文档:helm.sh/zh/docs/

Helm 使用的包格式称为 chart。 chart 就是一个描述 Kubernetes 相关资源的文件集合。单个chart可以用来部署一些简单的, 类似于memcache pod,或者某些复杂的HTTP服务器以及web全栈应用、数据库、缓存等等。

Chart 是作为特定目录布局的文件被创建的。它们可以打包到要部署的版本存档中。

如果你想下载和查看一个发布的chart,但不安装它,你可以用这个命令:

helm pull chartrepo/chartname
复制代码

文件结构

chart是一个组织在文件目录中的集合。目录名称就是chart名称(没有版本信息)。因而描述WordPress的chart可以存储在wordpress/目录中。

在这个目录中,Helm 期望可以匹配以下结构:

wordpress/
  Chart.yaml          # 包含了chart信息的YAML文件
  LICENSE             # 可选: 包含chart许可证的纯文本文件
  README.md           # 可选: 可读的README文件
  values.yaml         # chart 默认的配置值
  values.schema.json  # 可选: 一个使用JSON结构的values.yaml文件
  charts/             # 包含chart依赖的其他chart
  crds/               # 自定义资源的定义
  templates/          # 模板目录, 当和values 结合时,可生成有效的Kubernetes manifest文件
  templates/NOTES.txt # 可选: 包含简要使用说明的纯文本文件
复制代码

Chart.yaml文件是chart必需的。包含了以下字段:

apiVersion: chart API 版本 (必需)
name: chart名称 (必需)
version: 语义化2 版本(必需)
kubeVersion: 兼容Kubernetes版本的语义化版本(可选)
description: 一句话对这个项目的描述(可选)
type: chart类型 (可选)
keywords:
  - 关于项目的一组关键字(可选)
home: 项目home页面的URL (可选)
sources:
  - 项目源码的URL列表(可选)
dependencies: # chart 必要条件列表 (可选)
  - name: chart名称 (nginx)
    version: chart版本 ("1.2.3")
    repository: (可选)仓库URL ("https://example.com/charts") 或别名 ("@repo-name")
    condition: (可选) 解析为布尔值的yaml路径,用于启用/禁用chart (e.g. subchart1.enabled )
    tags: # (可选)
      - 用于一次启用/禁用 一组chart的tag
    import-values: # (可选)
      - ImportValue 保存源值到导入父键的映射。每项可以是字符串或者一对子/父列表项
    alias: (可选) chart中使用的别名。当你要多次添加相同的chart时会很有用
maintainers: # (可选)
  - name: 维护者名字 (每个维护者都需要)
    email: 维护者邮箱 (每个维护者可选)
    url: 维护者URL (每个维护者可选)
icon: 用做icon的SVG或PNG图片URL (可选)
appVersion: 包含的应用版本(可选)。不需要是语义化,建议使用引号
deprecated: 不被推荐的chart (可选,布尔值)
annotations:
  example: 按名称输入的批注列表 (可选).
复制代码

各个公司可以根据自己公司的需求定制自己的 chart 包模板,有新项目时复制模板在上面修改即可

前端项目打成 chart 包

我们把 chart 包都配置好,然后就是推送 Chart 到 Harbor

3ccdf13e15b3ade7996a17654259ab0.png

推送Chart到Harbor

安装

brew install helm
复制代码

安装helm push插件

helm plugin install https://github.com/chartmuseum/helm-push
复制代码

添加helm仓库

helm repo add --username ***** --password ***** 仓库名 https://XXXXXXX
复制代码

查看已添加的仓库

helm repo list
复制代码

推送Chart包到Harbor

helm cm-push chart包名 仓库名
复制代码

推送成功后,就可以在 rancher 的应用商店中看到我们推送的应用了

94a71c91bd00dd99e8d4928daee8b02.png

280bb6f1725cb87cf81f2a7972f7b17.png

到这里,我们的所有应用启动前的操作就完成,后续就只要在 rancher 配置好项目需要的资源,服务的发现,以及nginx等配置,项目就可以在线上跑起来了,而起后续的发布,回滚,都可以在 Jenkins 和 rancher 的站点完成,非常方便

相关实践学习
通过Ingress进行灰度发布
本场景您将运行一个简单的应用,部署一个新的应用用于新的发布,并通过Ingress能力实现灰度发布。
容器应用与集群管理
欢迎来到《容器应用与集群管理》课程,本课程是“云原生容器Clouder认证“系列中的第二阶段。课程将向您介绍与容器集群相关的概念和技术,这些概念和技术可以帮助您了解阿里云容器服务ACK/ACK Serverless的使用。同时,本课程也会向您介绍可以采取的工具、方法和可操作步骤,以帮助您了解如何基于容器服务ACK Serverless构建和管理企业级应用。 学习完本课程后,您将能够: 掌握容器集群、容器编排的基本概念 掌握Kubernetes的基础概念及核心思想 掌握阿里云容器服务ACK/ACK Serverless概念及使用方法 基于容器服务ACK Serverless搭建和管理企业级网站应用
相关文章
|
7天前
|
Kubernetes 监控 开发者
掌握容器化:Docker与Kubernetes的最佳实践
【10月更文挑战第26天】本文深入探讨了Docker和Kubernetes的最佳实践,涵盖Dockerfile优化、数据卷管理、网络配置、Pod设计、服务发现与负载均衡、声明式更新等内容。同时介绍了容器化现有应用、自动化部署、监控与日志等开发技巧,以及Docker Compose和Helm等实用工具。旨在帮助开发者提高开发效率和系统稳定性,构建现代、高效、可扩展的应用。
|
15天前
|
Kubernetes 监控 Cloud Native
|
2天前
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
21 4
|
8天前
|
Kubernetes 负载均衡 Cloud Native
云原生应用:Kubernetes在容器编排中的实践与挑战
【10月更文挑战第27天】Kubernetes(简称K8s)是云原生应用的核心容器编排平台,提供自动化、扩展和管理容器化应用的能力。本文介绍Kubernetes的基本概念、安装配置、核心组件(如Pod和Deployment)、服务发现与负载均衡、网络配置及安全性挑战,帮助读者理解和实践Kubernetes在容器编排中的应用。
32 4
|
8天前
|
Kubernetes 监控 Cloud Native
云原生应用:Kubernetes在容器编排中的实践与挑战
【10月更文挑战第26天】随着云计算技术的发展,容器化成为现代应用部署的核心趋势。Kubernetes(K8s)作为容器编排领域的佼佼者,以其强大的可扩展性和自动化能力,为开发者提供了高效管理和部署容器化应用的平台。本文将详细介绍Kubernetes的基本概念、核心组件、实践过程及面临的挑战,帮助读者更好地理解和应用这一技术。
36 3
|
9天前
|
存储 运维 Kubernetes
云端迁移:备份中心助力企业跨云迁移K8s容器服务平台
本文将简要介绍阿里云容器服务ACK的备份中心,并以某科技公司在其实际的迁移过程中遇到具体挑战为例,阐述如何有效地利用备份中心来助力企业的容器服务平台迁移项目。
|
11天前
|
运维 Kubernetes Cloud Native
云原生入门:Kubernetes和容器化的未来
【10月更文挑战第23天】本文将带你走进云原生的世界,探索Kubernetes如何成为现代软件部署的心脏。我们将一起揭开容器化技术的神秘面纱,了解它如何改变软件开发和运维的方式。通过实际的代码示例,你将看到理论与实践的结合,感受到云原生技术带来的革命性影响。无论你是初学者还是有经验的开发者,这篇文章都将为你开启一段新的旅程。让我们一起踏上这段探索之旅,解锁云原生技术的力量吧!
|
16天前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
15天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
15天前
|
Kubernetes 监控 开发者
专家级实践:利用Cloud Toolkit进行微服务治理与容器化部署
【10月更文挑战第19天】在当今的软件开发领域,微服务架构因其高可伸缩性、易于维护和快速迭代的特点而备受青睐。然而,随着微服务数量的增加,管理和服务治理变得越来越复杂。作为阿里巴巴云推出的一款免费且开源的开发者工具,Cloud Toolkit 提供了一系列实用的功能,帮助开发者在微服务治理和容器化部署方面更加高效。本文将从个人的角度出发,探讨如何利用 Cloud Toolkit 来应对这些挑战。
32 2

相关产品

  • 容器服务Kubernetes版