前端阿里流水线部署

1,544 阅读4分钟

入口和文档

**
**

访问 流水线 Flow

点击右上角 ? icon(帮助)-> 云效学院,找到 “云效流水线 Flow” 相关文档

当前云效流水线文档链接地址

image.png

 基本介绍

流水线是「Flow」提供的自定义流程编排工具,我们主要关注将测试、构建、部署等工作组织好。流水线的基本概念

以下是官方文档的介绍

  •  输入源:持续交付的原始物料,如 Git 仓库。
  • 阶段:在流水线中需要按顺序执行的一组任务的集合,一个阶段可以是手动运行也可以是自动运行的。阶段之间串行执行;
  •  任务:在阶段中具体需要完成的动作,任务之间可以串行执行也可以并行执行,目前任务包含:代码扫描,单元测试,构建, 部署,合并代码,人工审核等功能。 这些任务分为两类,一类是与工作区相关的(AgentJob)以及与工作区无关的(Agentless Job),工作区相关任务会在固定的工作目录中执行用户定义的任务。
  • 步骤:步骤作为Flow最底层的核心能力,所有的流水线都是通过步骤的编排组合而成的。

使用

创建流水线

  1. 点击流水线列表右上角的“新建流水线”按钮,开始创建流水线
  2.  选择流水线模版

可以选择 “快速配置流水线模板” 或者自定义的 “企业模板 ·咨讯前端流水线模板”,这里以前者为例。

选择好模板 -> 点击创建按钮 -> 选择 Nodejs,点击下一步

  • 测试阶段,根据项目情况选择开启单元测试、代码扫描 ESlint、代码扫描 TSlint
  • 构建阶段,可以选择 “构建 Docker 镜像”
  • 部署阶段,镜像选择 “Kubernetes 镜像升级”
  • 点击完成

image.png

 添加流水线源

  1. 选择代码源,“自建Gitlab” 或者 “通用Git”
  2. 复制代码仓库地址
  3. 输入分支
  4. 服务连接,选择 yangfasheng
  5. 点击添加按钮

可选:

  • 开启代码源触发(Webhook)
  • 工作目录可自己修改或者使用默认生成的

image.png

流水线编排

测试阶段

如有这个阶段,配置相关代码扫描、单元测试

构建阶段

构建集群可选择云效香港构建集群,其他默认

任务步骤需要有两个: Node.js 构建、镜像构建并推送至阿里云镜像仓库企业版

image.png
1) Node.js 构建

版本选择方式:可以从预置版本中选择、输入指定版本,或者使用代码库中 .nvmrc 文件中的版本。如果 .nvmrc 文件存在的话,则无论选择哪个选项都会使用 .nvmrc 文件

构建命令:构建命令为用户自定义构建命令。支持 npm,cnpm 和 yarn,命令执行目录为代码库根路径。如:\

npm i
npm run build

image.png

2)镜像构建并推送至阿里云镜像仓库企业版

“仓库” 需要和发胜确认名称

“Dockerfile路径” 根据项目填写

其他一般如下图所示

image.png

部署阶段

部署需要 “Kubectl镜像升级” 一个任务步骤

image.png

  • 命名空间:zx-app,表示资讯应用
  • Workloads 名称、容器名称和镜像构建配置时的 “仓库” 一致
  • 镜像选择 “镜像构建并推送至阿里云镜像仓库企业版.镜像VPC地址”

\

其他一般如下图:

image.png

使用自定义的 “企业模板 ·咨讯前端流水线模板”

使用自定义的 “企业模板 ·咨讯前端流水线模板”更加简单,以上3个任务步骤已建好,只需要根据项目情况再适当修改。一般只需要配置流水线源、修改 Node.js 构建命令、与后端定好 “仓库” 名称。 这个名称需要在 “镜像构建并推送至阿里云镜像仓库企业版” 步骤的  “仓库” 和 “Kubectl镜像升级” 步骤的 “Workloads 名称”、“容器名称” 中修改。

image.png

运行

保存配置,点击右上角运行,查看日志如果 Node.js 构建、镜像构建并推送至阿里云镜像仓库企业版 两个步骤可以正常运行即可,剩下的由后端和运维配合处理。