前言
这是我在阿里云活动体验做的笔记,链接地址https://developer.aliyun.com/adc/scenario/8464960ac980400d95ff092b95e1a97e?spm=a2c6h.19231629.J_6577362420.1.1c241caeIiULhc
前提:你得有阿里云账号
基于云效提供的七夕情书示例源码以及云效DevOps的云端代码托管平台和持续交付流水线,快速发布一款云端密码情书H5网页。
效果图
这里写目录标题
- 一. 克隆七夕示例库
- 二. 用心书写情书内容
- 三. 新建流水线
- 四. 配置流水线代码源
- 五. 配置Docker镜像构建
- 六. 配置Kubernetes发布
- 七. 修复单元测试问题并分享情书
一. 克隆七夕示例库
本步骤将指导您把七夕示例库克隆到您的云效代码仓库,后续您可以修改示例库代码并使用流水线部署代码。
- 前往云效代码管理Codeup:https://codeup.aliyun.com?channel=qixi 新用户登录之后选择 [导入代码库],老用户可以单击 [添加代码库] – [导入代码库]。
- 选择 [URL导入],复制七夕示例库源码地址:
https://code.aliyun.com/yunxiao2020/letter.git
,然后单击 [确定],即完成示例代码的导入。
稍等待一点时间,导入完成后如下所示
如果按照上述办法,您的代码库导入失败,可以尝试使用下面的方法进行示例代码导入。参见:
https://thoughts.aliyun.com/share/5f3d6791db0b8f0024b11805#title=示例代码导入方法2:手动复制示例代码
二. 用心书写情书内容
在本步骤中您需要修改七夕示例库中的情书内容,请用心书写吧。
- 左边目录选择
app/service/data.js
文件,单击 [编辑] 或者 [Web IDE],即可进行情书内容编辑。情书格式上,我们进行了字段注释。
(1)theme
:字段—选择情书书信模板。我们提供了爱人、朋友、同事3种书信风格模板(见下图)。你可以根据寄信角色,设置不同的主题模板。
(2)from
:字段—填写寄信人名字;To字段—填写收信人名字,这里的名字设置将会体现在书信正文、以及H5页面的分享标题上。
(3)avatar
:字段— 填写寄信人头像。
如下所示,头像主要在书信中的以下位置体现出来。
头像的设置上,输入一个无需登录公开可访问的图片链接。
(4)question
字段——设置一个打开情书需要完成的问题,我们称他为情书暗号。
一个好的暗号问题,可以勾起 2个人之间的一段共同回忆,强烈推荐设置。例如:
对女朋友,你可以设置:还记得我们第一次见面是什么时候吗?
对大学同学,你可以设置:还记得咱们大学宿舍的门牌号吗?
对同事,你可以设置:还记得咱们第一次一起通宵加班是什么时候吗?
效果示例:
(5)answer: 字段 ——解密的正确答案,注意不要超过10个字
(6)text :字段 ——情书正文,可以输入文字或图片
情书内容编辑好后,请一定记得点击 [保存]。
点击 [确定],提交到Master。
- 编写好情书内容后,单击右上角的 [设置] 按钮,选择 [集成与服务],开启右边开关,云效内置的AI研发助手云豆将会对你的代码进行代码质量和安全检测,帮你发现代码缺陷和敏感信息等。
你可以选择1到2个进行试用体验。
情书编写好后,就要进入我们的下一个环节啦——发布上线!
三. 新建流水线
本节介绍以流水线的方式进行发布部署。
- 打开云效流水线。点击击左上角九宫格,选择 [流水线]。
- 单击 [新建流水线]。模板选择: [其他-云效七夕活动],然后单击 [创建]。
四. 配置流水线代码源
单击 [添加代码源],选择 [云效Codeup] 代码源,代码仓库选择导入创建的代码库 [letter],默认分支选择 [master],同时 开启代码源触发,最后单击 [添加]。
五. 配置Docker镜像构建
单击 [Docker 镜像构建] --> [镜像构建并推送至自定义镜像仓库],并填写以下信息。
镜像仓库地址: registry.cn-hangzhou.aliyuncs.com/yunxiao-letter/yunxiao-letter:${BUILD_JOB_ID}
用户名: yunxiao-letter@1515906102291199
密码: yunxiao2020
六. 配置Kubernetes发布
- 新建集群连接配置。
单击**[Kubernetes 发布]** -> [Kubectl发布] -> [新建连接]。
选择 [自定义集群],集群名称自定义即可,集群配置文件,将如下配置全部粘贴进去,然后点击 [保存]。
复制以下链接 https://research.devops.aliyun.com/kube.config.yml 进入集群配置文件页面,将页面配置文件复制到集群配置文件中。
- 填写完集群配置文件后继续配置其他信息。
命名空间填 yunxiao
YAML路径填 deployment.yml
新建变量1 选择上游输出,YUNXIAO_LETTER_IMAGE,镜像仓库地址
新建变量2 选择自定义,PIPELINE_ID,${PIPELINE_ID}
七. 修复单元测试问题并分享情书
- 运行完成后,可以看到,流水线中设置的质量卡点 [JavaScript 单元测试] 检测出了代码错误。这里,其实我们可以感受到云效流水线的质量卡点功能。在企业实际研发流程中,代码发布前,我们推荐有这样的质量卡点环节。
我们点击图中的1,查看错误提示,标注了出错文件名和正确写法。
知道错误提醒后,点击九宫格,我们回到云效Codeup进行错误代码的修改。
- 按照提示更改完代码错误后 点击 [保存]并 [提交],我们再回到 云效流水线Flow 页面。因为我们在前面的流水线里设置了 [提交代码源触发],所以可以看到,修改代码后,流水线已经被自动触发运行了。
然后等待运行就行,没有被触发运行,你也可以手动点击 [运行]。
作者:RodmaChen
本人博客:https://blog.csdn.net/weixin_46654114
qq:1342709867
转载说明:务必联系我,注明来源,附带本人博客连接。谢谢配合。
请给我点个赞鼓励我吧