记一次前端容器化实践K8S

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 一次前端容器化实践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 的站点完成,非常方便

相关实践学习
深入解析Docker容器化技术
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。Docker是世界领先的软件容器平台。开发人员利用Docker可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker可以在隔离容器中并行运行和管理应用,获得更好的计算密度。企业利用Docker可以构建敏捷的软件交付管道,以更快的速度、更高的安全性和可靠的信誉为Linux和Windows Server应用发布新功能。 在本套课程中,我们将全面的讲解Docker技术栈,从环境安装到容器、镜像操作以及生产环境如何部署开发的微服务应用。本课程由黑马程序员提供。     相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
相关文章
|
1月前
|
存储 Kubernetes 网络安全
关于阿里云 Kubernetes 容器服务(ACK)添加镜像仓库的快速说明
本文介绍了在中国大陆地区因网络限制无法正常拉取 Docker 镜像的解决方案。作者所在的阿里云 Kubernetes 集群使用的是较旧版本的 containerd(1.2x),且无法直接通过 SSH 修改节点配置,因此采用了一种无需更改 Kubernetes 配置文件的方法。通过为 `docker.io` 添加 containerd 的镜像源,并使用脚本自动修改 containerd 配置文件中的路径错误(将错误的 `cert.d` 改为 `certs.d`),最终实现了通过多个镜像站点拉取镜像。作者还提供了一个可重复运行的脚本,用于动态配置镜像源。虽然该方案能缓解镜像拉取问题,
244 2
|
5月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
339 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
6月前
|
Kubernetes 调度 异构计算
生产环境 K8S + Deepseek 实现大模型部署 和 容器调度(图解+史上最全)
生产环境 K8S + Deepseek 实现大模型部署 和 容器调度(图解+史上最全)
生产环境 K8S + Deepseek 实现大模型部署 和 容器调度(图解+史上最全)
|
6月前
|
存储 负载均衡 测试技术
ACK Gateway with Inference Extension:优化多机分布式大模型推理服务实践
本文介绍了如何利用阿里云容器服务ACK推出的ACK Gateway with Inference Extension组件,在Kubernetes环境中为多机分布式部署的LLM推理服务提供智能路由和负载均衡能力。文章以部署和优化QwQ-32B模型为例,详细展示了从环境准备到性能测试的完整实践过程。
|
6月前
|
数据采集 消息中间件 Kubernetes
容器化爬虫部署:基于K8s的任务调度与自动扩缩容设计
随着业务复杂度提升,传统定时任务和手工扩缩容难以满足高并发与实时性需求。本文对比两种基于 Kubernetes 的爬虫调度与扩缩容方案:CronJob+HPA 和 KEDA。从调度灵活性、扩缩容粒度、实现难度等维度分析,并提供 YAML+Python 示例。方案 A(CronJob+HPA)适合固定定时任务,配置简单;方案 B(KEDA)支持事件驱动,适合高并发与异步触发场景。根据实际需求可混合使用,优化资源利用与效率。
200 4
|
7月前
|
存储 人工智能 Kubernetes
ACK Gateway with AI Extension:面向Kubernetes大模型推理的智能路由实践
本文介绍了如何利用阿里云容器服务ACK推出的ACK Gateway with AI Extension组件,在Kubernetes环境中为大语言模型(LLM)推理服务提供智能路由和负载均衡能力。文章以部署和优化QwQ-32B模型为例,详细展示了从环境准备到性能测试的完整实践过程。
|
7月前
|
存储 人工智能 物联网
ACK Gateway with AI Extension:大模型推理的模型灰度实践
本文介绍了如何使用 ACK Gateway with AI Extension 组件在云原生环境中实现大语言模型(LLM)推理服务的灰度发布和流量分发。该组件专为 LLM 推理场景设计,支持四层/七层流量路由,并提供基于模型服务器负载感知的智能负载均衡能力。通过自定义资源(CRD),如 InferencePool 和 InferenceModel,可以灵活配置推理服务的流量策略,包括模型灰度发布和流量镜像。
|
8月前
|
Kubernetes 监控 Serverless
基于阿里云Serverless Kubernetes(ASK)的无服务器架构设计与实践
无服务器架构(Serverless Architecture)在云原生技术中备受关注,开发者只需专注于业务逻辑,无需管理服务器。阿里云Serverless Kubernetes(ASK)是基于Kubernetes的托管服务,提供极致弹性和按需付费能力。本文深入探讨如何使用ASK设计和实现无服务器架构,涵盖事件驱动、自动扩展、无状态设计、监控与日志及成本优化等方面,并通过图片处理服务案例展示具体实践,帮助构建高效可靠的无服务器应用。
|
7月前
|
存储 监控 对象存储
ACK 容器监控存储全面更新:让您的应用运行更稳定、更透明
ACK 容器监控存储全面更新:让您的应用运行更稳定、更透明
197 0
ACK 容器监控存储全面更新:让您的应用运行更稳定、更透明
|
8月前
|
存储 监控 对象存储
ACK 容器监控存储全面更新:让您的应用运行更稳定、更透明
ACK 容器监控存储全面更新:让您的应用运行更稳定、更透明
137 1

相关产品

  • 容器服务Kubernetes版
  • 推荐镜像

    更多