阿里云制作加密情书送给女朋友

我不是女神ヾ 2022-11-29 12:08 151阅读 0赞

前言

> 这是我在阿里云活动体验做的笔记，链接地址[https://developer.aliyun.com/adc/scenario/8464960ac980400d95ff092b95e1a97e?spm=a2c6h.19231629.J\_6577362420.1.1c241caeIiULhc][https_developer.aliyun.com_adc_scenario_8464960ac980400d95ff092b95e1a97e_spm_a2c6h.19231629.J_6577362420.1.1c241caeIiULhc]
> 
> 前提：你得有阿里云账号

> 基于云效提供的七夕情书示例源码以及云效DevOps的云端代码托管平台和持续交付流水线，快速发布一款云端密码情书H5网页。

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center]

### 这里写目录标题 ###

*   *  一. 克隆七夕示例库
     *  二. 用心书写情书内容
     *  三. 新建流水线
     *  四. 配置流水线代码源
     *  五. 配置Docker镜像构建
     *  六. 配置Kubernetes发布
     *  七. 修复单元测试问题并分享情书

## 一. 克隆七夕示例库 ##

> 本步骤将指导您把七夕示例库克隆到您的云效代码仓库，后续您可以修改示例库代码并使用流水线部署代码。

1.  前往云效代码管理Codeup：[https://codeup.aliyun.com?channel=qixi ][https_codeup.aliyun.com_channel_qixi]新用户登录之后选择 **\[导入代码库\]**，老用户可以单击 **\[添加代码库\] – \[导入代码库\]。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 1]

1.  选择 **\[URL导入\]**，复制七夕示例库源码地址：`https://code.aliyun.com/yunxiao2020/letter.git`，然后单击 \[确定\]，即完成示例代码的导入。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 2]

稍等待一点时间，导入完成后如下所示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 3]

如果按照上述办法，您的代码库导入失败，可以尝试使用下面的方法进行示例代码导入。参见：

[https://thoughts.aliyun.com/share/5f3d6791db0b8f0024b11805\#title=示例代码导入方法2：手动复制示例代码][https_thoughts.aliyun.com_share_5f3d6791db0b8f0024b11805_title_2]

## 二. 用心书写情书内容 ##

在本步骤中您需要修改七夕示例库中的情书内容，请用心书写吧。

1.  左边目录选择 `app/service/data.js`文件，单击 **\[编辑\] 或者 \[Web IDE\]**，即可进行情书内容编辑。情书格式上，我们进行了字段注释。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 4]

（1）`theme` ：字段—选择情书书信模板。我们提供了爱人、朋友、同事3种书信风格模板（见下图）。你可以根据寄信角色，设置不同的主题模板。

（2）`from` ：字段—填写寄信人名字；To字段—填写收信人名字，这里的名字设置将会体现在书信正文、以及H5页面的分享标题上。

（3）`avatar`：字段— 填写寄信人头像。

如下所示，头像主要在书信中的以下位置体现出来。

头像的设置上，输入一个无需登录公开可访问的图片链接。

（4）`question`字段——设置一个打开情书需要完成的问题，我们称他为情书暗号。

一个好的暗号问题，可以勾起 2个人之间的一段共同回忆，强烈推荐设置。例如：

> 对女朋友，你可以设置：还记得我们第一次见面是什么时候吗？
> 
> 对大学同学，你可以设置：还记得咱们大学宿舍的门牌号吗？
> 
> 对同事，你可以设置：还记得咱们第一次一起通宵加班是什么时候吗？

效果示例：

（5）**answer**： 字段 ——解密的正确答案，注意不要超过10个字

（6）**text** ：字段 ——情书正文，可以输入文字或图片

情书内容编辑好后，请一定记得点击 **\[保存\]**。

点击 **\[确定\]**，提交到**Maste**r。

1.  编写好情书内容后，单击右上角的 **\[设置\]** 按钮，选择 **\[集成与服务\]**，开启右边开关，云效内置的AI研发助手云豆将会对你的代码进行代码质量和安全检测，帮你发现代码缺陷和敏感信息等。

你可以选择1到2个进行试用体验。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 5]

情书编写好后，就要进入我们的下一个环节啦——发布上线！

## 三. 新建流水线 ##

本节介绍以流水线的方式进行发布部署。

1.  打开云效流水线。点击击左上角九宫格，选择 **\[流水线\]**。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 6]

1.  单击 \[新建流水线\]。模板选择: \[其他-云效七夕活动\]，然后单击 \[创建\]。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 7]

## 四. 配置流水线代码源 ##

单击 **\[添加代码源\]**，选择 **\[云效Codeup\]** 代码源，代码仓库选择导入创建的代码库 **\[letter\]**，默认分支选择 **\[master\]**,同时 开启代码源触发，最后单击 **\[添加\]**。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 8]

## 五. 配置Docker镜像构建 ##

单击 **\[Docker 镜像构建\]** \--> \[**镜像构建并推送至自定义镜像仓库\]**，并填写以下信息。

镜像仓库地址: registry.cn-hangzhou.aliyuncs.com/yunxiao-letter/yunxiao-letter:${BUILD_JOB_ID}
    
    用户名:       yunxiao-letter@1515906102291199
    
    密码:         yunxiao2020

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 9]

## 六. 配置Kubernetes发布 ##

1.  新建集群连接配置。

单击\*\*\[Kubernetes 发布\]\*\* -> **\[Kubectl发布\]** \-> **\[新建连接\]。**  
选择 \[自定义集群\]，集群名称自定义即可，集群配置文件，将如下配置全部粘贴进去，然后点击 \[保存\]。

复制以下链接 [https://research.devops.aliyun.com/kube.config.yml ][https_research.devops.aliyun.com_kube.config.yml] 进入集群配置文件页面，将页面配置文件复制到集群配置文件中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 10]

1.  填写完集群配置文件后继续配置其他信息。

命名空间填   yunxiao
    YAML路径填   deployment.yml
    新建变量1    选择上游输出，YUNXIAO_LETTER_IMAGE，镜像仓库地址
    新建变量2    选择自定义，PIPELINE_ID，${PIPELINE_ID}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 11]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 12]

## 七. 修复单元测试问题并分享情书 ##

1.  运行完成后，可以看到，流水线中设置的质量卡点 **\[JavaScript 单元测试\]** 检测出了代码错误。这里，其实我们可以感受到云效流水线的质量卡点功能。在企业实际研发流程中，代码发布前，我们推荐有这样的质量卡点环节。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 13]

我们点击图中的1，查看错误提示，标注了出错文件名和正确写法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 14]

知道错误提醒后，点击九宫格，我们回到云效Codeup进行错误代码的修改。  
![在这里插入图片描述][20200820121220413.png_pic_center]

1.  按照提示更改完代码错误后 点击 **\[保存\]并 \[提交\]**，我们再回到 云效流水线Flow 页面。因为我们在前面的流水线里设置了 **\[提交代码源触发\]**，所以可以看到，修改代码后，流水线已经被自动触发运行了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 15]

然后等待运行就行,没有被触发运行，你也可以手动点击 \[运行\]。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 16]

> 作者：RodmaChen  
> 本人博客：https://blog.csdn.net/weixin\_46654114  
> qq：1342709867  
> 转载说明：务必联系我，注明来源，附带本人博客连接。谢谢配合。

请给我点个赞鼓励我吧  
![在这里插入图片描述][20200507113619405.png_pic_center]

[https_developer.aliyun.com_adc_scenario_8464960ac980400d95ff092b95e1a97e_spm_a2c6h.19231629.J_6577362420.1.1c241caeIiULhc]: https://developer.aliyun.com/adc/scenario/8464960ac980400d95ff092b95e1a97e?spm=a2c6h.19231629.J_6577362420.1.1c241caeIiULhc
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/4d42e677520544c29071f00680c7bdc5.png
[https_codeup.aliyun.com_channel_qixi]: https://codeup.aliyun.com?channel=qixi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/7f5c0a6f72414cc297c71fc806b4e999.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/3bd8d434d6a741bb875811d2f040c6be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/3c0be7cff4ba44959e0a1b36792165bb.png
[https_thoughts.aliyun.com_share_5f3d6791db0b8f0024b11805_title_2]: https://thoughts.aliyun.com/share/5f3d6791db0b8f0024b11805?spm=a2c6h.13858378.0.0.3e555906SZAGSM#title=%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%E5%AF%BC%E5%85%A5%E6%96%B9%E6%B3%952%EF%BC%9A%E6%89%8B%E5%8A%A8%E5%A4%8D%E5%88%B6%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/c8c6133e4e4247f8ad1392613d9d4c1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/dbf6a7d08d3d49d1a9a3a91f03d1772a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/22551d16ccc44093815609948dd56356.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221124/cd8960e54fe74c3dbc23bab768891e5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221124/d834398ef35543359b916b150de321a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221124/385b35dfbd8c44199eae32bf20aa8355.png
[https_research.devops.aliyun.com_kube.config.yml]: https://research.devops.aliyun.com/kube.config.yml
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221124/c21dd991340148e58cad4d5bf44852f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221124/e6a3fe5b50524e898b7b1986b23a1567.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221124/4845e39f37f641d38a20c982e4c239f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221124/a5b3b4ba5c1a4e989ac367937336a0ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221124/6fb427b804d748109a0445e6429a9e6e.png
[20200820121220413.png_pic_center]: /images/20221124/921d2bd6b13945868c42d32312aa23b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221124/1571c6c933d041168a4ba8ce8a0f534d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221124/90724f48ec4f4a8a93a020ecc8b90315.png
[20200507113619405.png_pic_center]: /images/20221124/ca285c792de5402c815e8be47ccbeac9.png