资讯专栏INFORMATION COLUMN

使用阿里云codepipeline来持续部署前端工程(vue,react等等)教程

jone5679 / 556人阅读

摘要:是什么阿里云是一款提供持续集成持续交付能力,并完全兼容的能力和使用习惯的化产品。后续遇到的坑如果发生构建失败,记得要删除当前构建,否则触发器不会工作

1、codepipeline是什么
阿里云CodePipeline是一款提供持续集成/持续交付能力,并完全兼容Jenkins的能力和使用习惯的SAAS化产品。通过使用阿里云CodePipeline,您可以方便的在云端实现从代码到应用的持续集成和交付,方便您快速的对您的产品进行功能迭代和演进。
讲人话就是,帮你 构建 你的项目,然后部署到你指定的服务器位置上;
2、codepipieline的流程

首先会从你指定的git地址拉取你的项目文件,然后执行构建命令(自行填写)

构建命令执行完毕后,把构建物上传到oss上;

部署服务器会从oss拉取构建物,并且自动解压到工作空间

执行部署命令

3、为什么选择使用codepipeline

不需要自己部署ci服务器,比如jenkins,也不会占用服务器资源

集成到项目里面非常简单(坑我已经给你踩了)

目前情况来开,免费的可能性非常高。阿里出了云效(另一个ci)给大中型公司使用。而codepipeline针对的是个人开发和中小公司。

可以配合钉钉使用,自动同步构建结果。非常舒服

如果本身就在使用阿里云code和阿里云服务器,就更加适合使用了 4、准备工作

因为需要上传到oss上,所以必须要开通oss。(可能会产生费用,存储1G一个月0.12元,这个应(ken)该(ding)可以承受)

5、正式开搞

1、先开通codepipeline

2、创建一个新项目,前端必备都是nodejs环境

3、这儿记得填写项目的ssh地址。就是git@....,证书一定要配置!

4、配置证书,选择ssh用户。填入你的私钥,注意不是公钥。

如果是阿里云code的项目,如图:存放你的公钥。

5、 构建命令:比如我的vue项目。就是

npm install
npm run build

测试命令就要看自己项目的配置了

6、上传到oss上,vue默认的打包生成的目录都是dist,根据自己实际的填写就行了。这儿是打包成 xxx.gz的压缩包上传的

去oss上新建bucket,选择默认选项就行了。区域就用华北2就行了。

7、这里有大坑 (加红加粗)(如果需要不需要部署到ECS就直接跳过)

如果在ECS上执行了下面的代码(每个人的不一样,不要复制我的代码),但是可选部署目标里面刷新不出来。
export DEPLOYINDENTIFIER=9996e9f03039d1d121f5cb015e701d62 && wget -nv -O-  http://aliclouddeployclient.oss-cn-beijing.aliyuncs.com/alicloud_deployclient_installer.sh | bash(别复制,只是示例)

请含泪查看官方文档,是的,只支持两个地方的ECS服务器,其他的需要提工单。

然而我是遇到的是第一次出现了,第二次配置的刷新不出来了。属于官方文档的第二种情况

第二次配置的时候,同一个服务器不要在执行上面的代码 (加红加粗)!!!!

官方文档 官方文档 官方文档 官方文档 官方文档,真不好找。。

部署命令(加红加粗)!!!!

先解释下:部署命令 会把构建物从oss上下载下来并且解压后才会执行。(文档上没有)

部署命令的执行环境是下面的工作空间指定的目录,构建物也是放在这个目录的。

官方的建议是:最佳实践是 工作空间 不要指定为代码部署的路径,而是多带带的一个目录,然后在部署命令里面把解压出来的文件复制到代码部署的地方,然后清空这个多带带的目录。

检查命令和回滚命令请自行玩耍,我目前是空着的。
8、 依旧是大坑(如果你要使用触发器的话) 如图,框起来的部分,千万别动了。一定不要去改!!!(加红加粗)!!!! 如果修改了,就会导致触发器的代码无效。

其实到这儿基本上就ok,如果你需要添加触发器的话,请继续往下读。不需要的话,也继续往下,因为你忘了给我点赞 :)
8、添加触发器,强烈建议使用触发器,这样当你需要构建的时候,只需要push一次代码就自动构建了。

生成触发器请仔细阅读触发器文档,一定要注意步骤,最后才去点 生成 按钮。

特别提醒,一定不要修改源码管理的东西,别问我为什么,卡了两天才得出来的结论我会告诉你
9、部署成功后,目前可以发邮件和钉钉提示。这个很简单就不介绍了
其实部署成功后还可以有很多玩法,这个就需要自己去玩耍了。
后续遇到的坑:

如果发生构建失败,记得要删除当前构建,否则触发器不会工作

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97785.html

相关文章

  • 前端阅读 - 收藏集 - 掘金

    摘要:实现不定期更新技巧前端掘金技巧,偶尔更新。统一播放效果实现打字效果动画前端掘金前端开源项目周报前端掘金由出品的前端开源项目周报第四期来啦。 Web 推送技术 - 掘金腾讯云技术社区-掘金主页持续为大家呈现云计算技术文章,欢迎大家关注! 作者:villainthr 摘自 前端小吉米 伴随着今年 Google I/O 大会的召开,一个很火的概念--Progressive Web Apps ...

    lingdududu 评论0 收藏0
  • 2019年微服务5大趋势,你pick哪个?

    摘要:趋势扩展到机器学习领域已经成为容器编排的事实标准,它的领域也在不断扩张,未来将成为机器学习技术栈的一部分。比如,发布了开源的,通过添加到集群中,扩展了的,使得机器学习的工作负载在中成为一等公民。 2018年对于微服务来说是非常重要的一年,这一年Service Mesh开始崭露头角,解决服务间复杂的通信问题,这一年很多国内互联网公司已经有了较为成熟的微服务实践案例,网易云主办的微服务实践...

    fanux 评论0 收藏0
  • 前端相关大杂烩

    摘要:希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎,由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时,老司机们首先就会告诉你其实是个没有网络请求功能的库。 前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 评论0 收藏0
  • 前端每周清单第 47 期:NPM 年度报告与 2018 展望,Airbnb React Router

    摘要:确定新的包命名规则为了尽可能避免包的误植域名现象,将不会再允许使用相似的包命名不过会进一步鼓励开发者使用自己的命名空间来发布包。本文是对其几十年来技术之路的回顾与展望,也是一代技术人的青春回忆。 showImg(https://segmentfault.com/img/remote/1460000012846628); 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了...

    makeFoxPlay 评论0 收藏0
  • 项目开发

    摘要:前端菜鸟项目,大佬们轻喷美团外卖项目演示地址第期分享推荐上好玩容易上手的项目,帮你找到编程的乐趣。包含支持冒泡的事件框架资源模块等组件,按需选择组件,不绑架开发者。 基于 Vue 的 WebSocket 实时聊天实战项目 一个基于vue的,从前端到后端构建的项目。能让学到如何用,用到了vue全家桶,nodejs,通过webpack打包,图灵机器人,websocket等前沿知识进行构建。...

    elva 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<