如何使用阿里云云效流水线发布vuecli项目到oss?

本文涉及的产品
对象存储 OSS,OSS 加速器 50 GB 1个月
简介: 如何使用阿里云云效流水线发布vuecli项目到oss?

1.新建流水线(https://flow.aliyun.com/),选择node.js->构建上传到oss,如下图


2.选择流水线源,我这里使用的码云,下面有个 开启代码源触发,有个webhook地址,需要在代码仓库配置下,这样就能实现码云代码仓库代码被提交后自动触发流水线去拉取代码。

3.测试里面的代码扫描和单元测试先不去管

4.构建上传,需要注意node的版本和你项目依赖库有关系,一定要选择好对应的版本,此外构建的流程是先从流水线源下载源码到构建集群,然后执行构建命令

cnpm install && npm run build  

构建完毕之后上传,需要获得本账号oss的授权,指定oss的bucket,指定源文件目录,也就是构建完毕后的构建产物文件夹,因为是把这个文件夹下面所有东西上传到oss里面,默认文件夹  dist。


5.这个流程最后还可以添加一个邮件通知插件,成功失败邮件通知到你的邮箱,是不是很友好呢?

6.此外还要说一个触发设置下面有个定时触发还有一个webhook触发流水线,定时触发不用多说,比如明天凌晨发布版本这种定时发布的情况,webhook触发和那个代码仓库源触发有啥区别呢?

体验下感觉就是统计到的触发信息不一致。

7.为啥要用阿里云流水线构建发布前端项目到oss呢?整体来说这一套流程下来很是丝滑,oss又是阿里云的产品,在使用阿里云流水线发布起来,产品衔接上很是优秀。此外vue的项目在构建的时候还容易出现在本机windows环境下构建没问题,到阿里云流水线集群上面构建就失败,后来发现是代码里面文件大小写问题导致的,windows下面不敏感大小写,阿里云构建的集群是linux系统需要大家注意了。

相关实践学习
对象存储OSS快速上手——如何使用ossbrowser
本实验是对象存储OSS入门级实验。通过本实验,用户可学会如何用对象OSS的插件,进行简单的数据存、查、删等操作。
相关文章
|
8月前
|
Kubernetes Devops 应用服务中间件
基于 Azure DevOps 与阿里云 ACK 构建企业级 CI/CD 流水线
本文介绍如何结合阿里云 ACK 与 Azure DevOps 搭建自动化部署流程,涵盖集群创建、流水线配置、应用部署与公网暴露,助力企业高效落地云原生 DevOps 实践。
938 2
|
8月前
|
监控 安全 Devops
DevOps 流水线的网络安全盲区与防御策略
在软件研发中,DevOps流水线加速了开发与交付,但也带来严重安全风险。自动化节点和第三方集成成为攻击入口,凭证泄露、供应链渗透、配置错误和依赖混乱等问题频发。企业需构建全流程安全体系,嵌入自动化安全策略,强化访问控制与监控,提升全员安全意识,实现效率与安全的协同发展。
597 1
|
运维 Devops 持续交付
自动化运维的魔法:打造高效DevOps流水线
【10月更文挑战第34天】在数字化时代的浪潮中,DevOps成为企业追求敏捷、高效和稳定的关键。本文将通过一个真实案例,展示如何构建一个高效的DevOps流水线,实现从代码提交到部署的全自动化流程。我们将探讨流水线设计的哲学、工具选择以及面临的挑战,并分享实际的代码示例和操作步骤,帮助读者理解自动化运维的精髓。
416 2
|
运维 监控 Devops
自动化运维实践:打造高效的DevOps流水线
在软件开发的快节奏中,自动化运维成为提升效率、确保质量的关键。本文将引导你理解自动化运维的价值,通过实际案例分享如何构建一个高效、可靠的DevOps流水线。我们将从持续集成(CI)开始,逐步深入到持续部署(CD),并展示代码示例来具体说明。准备好让你的运维工作飞跃式进步了吗?让我们开始吧!
|
运维 监控 Devops
自动化运维的魔法:打造高效DevOps流水线
【10月更文挑战第6天】 在现代软件开发的快节奏中,自动化运维成为提高效率、保障质量的重要手段。本文将带你了解如何构建高效的DevOps流水线,从持续集成到部署,再到监控和反馈,我们将一步步揭开自动化运维的神秘面纱。你将学习到如何通过代码和工具的结合,实现软件交付过程的自动化,以及如何通过这一流程提升团队的协作和响应速度。让我们开始探索自动化运维的奇妙之旅吧!
|
运维 Devops jenkins
自动化运维:打造高效DevOps流水线
【8月更文挑战第44天】本文将通过深入浅出的方式,带你构建一个自动化的DevOps流水线,提升开发和部署效率。从基础概念到实际操作,我们一步步剖析如何实现代码提交、自动测试、构建、部署的全过程自动化。你将学会使用Jenkins、Git、Docker等工具,并结合Shell脚本编写,完成一个完整的自动化流程。文章末尾附有完整的示例代码,助你快速上手实践。
|
Java Spring 传感器
AI 浪潮席卷,Spring 框架配置文件管理与环境感知,为软件稳定护航,你还在等什么?
【8月更文挑战第31天】在软件开发中,配置文件管理至关重要。Spring框架提供强大支持,便于应对不同环境需求,如电商项目的开发、测试与生产环境。它支持多种格式的配置文件(如properties和YAML),并能根据环境加载不同配置,如数据库连接信息。通过`@Profile`注解可指定特定环境下的配置生效,同时支持通过命令行参数或环境变量覆盖配置值,确保应用稳定性和可靠性。
257 0
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
301 0
|
前端开发 Devops 持续交付
【前端自动化新高度】Angular与Azure DevOps完美结合:从零构建持续集成与持续部署的全自动流水线,提升开发效率与软件交付质量!
【8月更文挑战第31天】Angular作为领先的前端框架,以强大功能和灵活性深受开发者喜爱。Azure DevOps提供一站式DevOps服务,涵盖源码管理、持续集成(CI)及持续部署(CD)。本文将指导你如何在Azure DevOps中搭建Angular项目的CI/CD流程,并通过具体示例代码展示整个过程。首先,我们将创建一个Angular项目并初始化Git仓库;然后,在Azure DevOps中设置CI流水线,定义YAML文件以自动化构建和部署流程。最终实现每次提交代码后自动构建并部署至Azure Web App,极大提升了开发效率和软件交付速度,使团队更专注于创新。
316 0
|
Devops API
阿里云效流水线API简单使用
阿里云效流水线API简单使用