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

智善
• 阅读 8655

1、codepipeline是什么

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

2、codepipieline的流程

  1. 首先会从你指定的git地址拉取你的项目文件,然后执行构建命令(自行填写)
  2. 构建命令执行完毕后,把构建物上传到oss上;
  3. 部署服务器会从oss拉取构建物,并且自动解压到工作空间
  4. 执行部署命令

3、为什么选择使用codepipeline

  • 不需要自己部署ci服务器,比如jenkins,也不会占用服务器资源
  • 集成到项目里面非常简单(坑我已经给你踩了)
  • 目前情况来开,免费的可能性非常高。阿里出了云效(另一个ci)给大中型公司使用。而codepipeline针对的是个人开发和中小公司。
  • 可以配合钉钉使用,自动同步构建结果。非常舒服

如果本身就在使用阿里云code和阿里云服务器,就更加适合使用了

4、准备工作

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

5、正式开搞

1、先开通codepipeline

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

2、创建一个新项目,前端必备都是nodejs环境
使用阿里云codepipeline来持续部署前端工程(vue,react等等)教程

3、这儿记得填写项目的ssh地址。就是git@....,证书一定要配置!
使用阿里云codepipeline来持续部署前端工程(vue,react等等)教程

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

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

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

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

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

npm install
npm run build

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

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

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

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

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

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

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

如果在ECS上执行了下面的代码(每个人的不一样,不要复制我的代码),但是可选部署目标里面刷新不出来。

export DEPLOYINDENTIFIER=9996e9f03039d1d121f5cb015e701d62 && wget -nv -O-  http://aliclouddeployclient.oss-cn-beijing.aliyuncs.com/alicloud_deployclient_installer.sh | bash(别复制,只是示例)
  • 请含泪查看官方文档,是的,只支持两个地方的ECS服务器,其他的需要提工单。
  • 然而我是遇到的是第一次出现了,第二次配置的刷新不出来了。属于官方文档的第二种情况
  • 第二次配置的时候,同一个服务器不要在执行上面的代码 (加红加粗)!!!!

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

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

  • 先解释下:部署命令 会把构建物从oss上下载下来并且解压后才会执行。(文档上没有)
  • 部署命令的执行环境是下面的工作空间指定的目录,构建物也是放在这个目录的。
  • 官方的建议是:最佳实践是 工作空间 不要指定为代码部署的路径,而是单独的一个目录,然后在部署命令里面把解压出来的文件复制到代码部署的地方,然后清空这个单独的目录。

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

检查命令和回滚命令请自行玩耍,我目前是空着的。

8、 依旧是大坑(如果你要使用触发器的话)

如图,框起来的部分,千万别动了。一定不要去改!!!(加红加粗)!!!! 如果修改了,就会导致触发器的代码无效。

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

其实到这儿基本上就ok,如果你需要添加触发器的话,请继续往下读。不需要的话,也继续往下,因为你忘了给我点赞 :)

8、添加触发器,强烈建议使用触发器,这样当你需要构建的时候,只需要push一次代码就自动构建了。

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

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

特别提醒,一定不要修改源码管理的东西,别问我为什么,卡了两天才得出来的结论我会告诉你

9、部署成功后,目前可以发邮件和钉钉提示。这个很简单就不介绍了

其实部署成功后还可以有很多玩法,这个就需要自己去玩耍了。

后续遇到的坑:

  • 如果发生构建失败,记得要删除当前构建,否则触发器不会工作
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Peter20 Peter20
4年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Stella981 Stella981
3年前
CentOS 7 部署Gitlab+Jenkins持续集成(CI)环境
持续集成概述及运行流程:持续集成概述:持续集成(Continuousintegration)持续集成是指开发者在代码的开发过程中,可以频繁的将代码部署集成到主干,并进行自动化测试 开发→代码编译→测试持续交付:持续交付指的是在持续集成的环境基础之上,将代码部署到预生产环境持续部署:在持续交付的基础上,把部署到
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
智善
智善
Lv1
祸在于贪小利,害在于亲小人。
文章
4
粉丝
0
获赞
0