云效流水线+ECS服务器,自动化部署属于自己的Web页面

本文涉及的产品
云效 DevOps 流水线,基础版人数 不受限
云效 DevOps 测试管理,基础版人数 不受限
云效 DevOps 制品仓库,基础版人数 不受限
简介: 本文主要介绍如何通过使用ECS服务器与npm,结合云效的流水线服务以仓库代码提交为触发方式,进行了基于Vue的Web网页部署。

引言


本文主要结合自身项目构建经历,介绍如何通过使用ECS服务器与npm,结合云效DevOps的流水线服务,以仓库代码提交为触发方式进行基于Vue的Web网页部署。从而带来集成式开发部署的良好体验。如有不足之处,欢迎各位开发者指正。


0、前言


 本文为参与飞天加速计划·高校学生在家实践的活动文章。本人为北京邮电大学软件工程专业的一名大三学生,通过本学期崔毅东老师的“云计算技术”课程了解到本活动。希望通过使用ECS云服务器来完成对云计算相关课程内容的学习,并希望结合阿里云云效服务,来更好地指导本学习实践课程的相关开发。



1、工件准备

本文中所使用到的工件有:

  • 阿里云云效
  • 阿里云ECS服务器
  • Node.js
  • 一个基于Vue的Web项目


2、配置步骤


2.1 准备工作

 首先我们来介绍一下云效。云效是一个一站式DevOps平台,能够为开发者从需求分析、项目协作与文档管理、产品开发与跟踪、项目测试与交付的一整套完整开发环境。云效平台所提供的功能如下图所示,健全的功能体系属实为项目开发提供了更好的便捷性与更高的效率。

 回到正题。首先需要注册一个阿里云的ECS服务器,并在云效上免费申请注册企业。这里不再进行赘述。

image.png

 

为了便于我们的主机部署,我们还需要在ECS服务器中安装Node.js:

(1)首先登录Node.js官网下载安装包:http://nodejs.cn/download/

(2)之后将安装包上传至服务器,解压缩后配置环境变量,具体内容可以参考这里

(3)为了便于我们部署页面,还需要安装serve插件:

npm install -g serve



2.2 配置云效代码管理仓库

 为便于我们采用云效流水线工具进行自动化部署,在申请开通云效服务后,我们首先来到工作台,点击右上角的【代码管理】进入到我们企业的代码仓库添加我们的项目代码:

image.png

【代码管理】功能其实就相当于一个Git仓库。进入Codeup代码管理界面后,可以点击右上角的【添加库】,新建或导入我们的项目代码:

image.png

  • 新建代码:可以像在Gitee或Github上新建代码仓库一样轻松构建我们的代码仓库:
  • 导入代码库:支持多种导入方式,包括GiteeGithub

image.png

完成项目代码的构建后,即可在项目内部配置部署流水线功能。



2.3 流水线的配置

 来到相应的项目中,点击页面左侧的【流水线】,然后在页面中选择【新建流水线】:

image.png

 在新建流水线界面,我们可以看到云效根据不同的开发环境,提供了多种流水线模板,这里大家可以根据自身需求,选择合适的模板:

image.png

在选定模板后,我们即可点击流水线上的项目,进行我们的流水线配置了。



2.3.1 添加流水线源

image.png

流水线源即为我们需要执行流水线源的项目代码。

点击【添加流水线源】后,我们便可以在页面右侧选择我们需要进行配置的相应代码仓库。

image.png

在这里,我们选择了已经在【Codeup(代码管理)】中部署好的项目。



2.3.2 配置主机部署

 为了将构建好的项目制品部署在主机上,我们需要在流水线上点击【主机部署】,然后在右侧界面选择需要部署到的主机上:

image.png

 如果是第一次部署,可以选择【新建主机组】,根据列表中情况选择相应的主机:

image.png

 这里以阿里云ECS为例,我们可以在本页面添加服务连接,然后根据自己的ECS服务器所处地域对主机进行添加(如忘记ECS服务器的所在地域,可以在【控制台】-【云服务器ECS】中查看相应实例的地址):

image.png



2.3.3 配置代码提交自动运行流水线

 流水线支持webhook方式触发流水线的运行。我们可以在流水线的编辑页面,选择上方的【触发设置】,复制触发器信息:

image.png

 然后来到【代码管理】所需配置的项目界面,选择左下角的【设置】,然后选择【Webhooks】-【新建Webhook】,刚才复制的触发器链接填写至此,然后在触发器上勾选触发事件。这里我们选择【推送事件】。

image.png

经过上述的配置后,在每次通过Git推送Commit后,流水线便可自动运行。



2.3.4 配置流水线命令

   为了便于我们自动化部署Web应用,我们还需要对流水线上的某些环节配置额外的命令:

(1)Node.js构建

 由于我们需要通过npm的serve命令,将项目文件打包生成dist目录以便用于web页面启动,因此需要选中【Node.js构建】,在Node.js构建中添加如下命令:

npm install

npm run serve

image.png

 注意:有时我们的项目使用到的插件无法从淘宝npm的镜像上下载到,从而可能导致构建出错的问题;建议将默认命令中的cnpm替换为npm。若项目中有使用到我们自定义的npm插件,配置方法可参考这里


(2)主机构建

 由于构建完成后,流水线会将我们的代码制品打包放置在指定的位置,这里我们可以根据自身需要更改部署配置的下载路径:

image.png

 由于在本次项目中,我们需要使用制品文件中的dist目录进行Web页面部署,因此这里我们编写脚本,将生成的制品文件解压到需要的目录下:

tar -zxvf /home/admin/app/package.tgz /home/admin/app/

image.png

(3)额外命令

 在解压完毕后,我们还需要在主机上使用serve命令启动我们的Web页面,这里我们建议在ECS服务器上新建一个简单的脚本,专门用于调用serve服务。(运行流水线的服务器并不是我们的ECS主机,直接在流水线上调用,可能会引起无法找到命令导致运行失败。运行失败可以删除该流水线任务,直接在ECS主机上使用该脚本即可)

 以本项目为例,我们登录ECS服务器,在/opt目录下新建脚本文件flow.sh,编写如下内容:

#!bin/bash# 这里我们采用了绝对路径调用的方式,防止系统无法识别到serve命令# 如果不清楚serve所在的目录,可以通过which serve命令进行查看/etc/opt/node/bin/serve /home/admin/app/dist


之后使用chmod 777 /opt/flow.sh将脚本转化为可执行文件。

然后来到流水线,在界面右侧选择新的任务,这里我们选择【执行命令】:

image.png

 然后更改任务名称为【执行serve dist】(自定义名称即可),然后在执行命令中执行我们的脚本即可:

image.png



3、服务器安全组配置

 我们可以看到,通过serve命令部署的Web页面端口默认为3000,由于ECS服务器的安全组规则受限,我们无法通过外网直接访问,还需要开放该端口。image.png

 我们这里可以来到阿里云控制台,选择我们相应的ECS服务器,在侧边栏中选择【网络与安全】-【安全组】,在选择相关的实例后,在【入方向】中点击【手动添加】放行3000端口,这样即可在我们的主机上访问我们部署好的页面了。

image.png

效果如下:

image.png

image.png



4、使用收获

  • 了解了ECS服务器在镜像、网络安全、存储等方面的功能以及基本的配置方法;
  • 学会了通过远程连接ECS服务器,在ssh和sftp环境下执行基本的命令;
  • 熟悉了如何使用ECS服务器,结合云效以及流水线工具进行自动化部署。



相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
7天前
|
Kubernetes Devops 应用服务中间件
基于 Azure DevOps 与阿里云 ACK 构建企业级 CI/CD 流水线
本文介绍如何结合阿里云 ACK 与 Azure DevOps 搭建自动化部署流程,涵盖集群创建、流水线配置、应用部署与公网暴露,助力企业高效落地云原生 DevOps 实践。
97 0
|
7天前
|
监控 安全 Devops
DevOps 流水线的网络安全盲区与防御策略
在软件研发中,DevOps流水线加速了开发与交付,但也带来严重安全风险。自动化节点和第三方集成成为攻击入口,凭证泄露、供应链渗透、配置错误和依赖混乱等问题频发。企业需构建全流程安全体系,嵌入自动化安全策略,强化访问控制与监控,提升全员安全意识,实现效率与安全的协同发展。
282 0
|
5月前
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
248 28
|
10月前
|
运维 Devops 持续交付
自动化运维的魔法:打造高效DevOps流水线
【10月更文挑战第34天】在数字化时代的浪潮中,DevOps成为企业追求敏捷、高效和稳定的关键。本文将通过一个真实案例,展示如何构建一个高效的DevOps流水线,实现从代码提交到部署的全自动化流程。我们将探讨流水线设计的哲学、工具选择以及面临的挑战,并分享实际的代码示例和操作步骤,帮助读者理解自动化运维的精髓。
241 2
|
5月前
|
移动开发 前端开发 JavaScript
H5 页面与 Web 页面的制作方法
H5页面制作利用HTML5、CSS3和JavaScript技术,结合H5编辑器或框架(如Adobe Dreamweaver、Ionic),注重移动设备兼容性与响应式布局。Web页面制作则基于传统HTML、CSS和JavaScript,借助文本编辑器或IDE完成开发。两者区别在于技术版本、交互性和浏览器支持:H5更互动、现代,但可能不兼容旧浏览器;Web页面更静态、兼容性广。根据需求选择:高交互选H5,广泛兼容选Web。
762 6
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
191 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
9月前
|
运维 监控 Devops
自动化运维实践:打造高效的DevOps流水线
在软件开发的快节奏中,自动化运维成为提升效率、确保质量的关键。本文将引导你理解自动化运维的价值,通过实际案例分享如何构建一个高效、可靠的DevOps流水线。我们将从持续集成(CI)开始,逐步深入到持续部署(CD),并展示代码示例来具体说明。准备好让你的运维工作飞跃式进步了吗?让我们开始吧!
|
11月前
|
运维 监控 Devops
自动化运维的魔法:打造高效DevOps流水线
【10月更文挑战第6天】 在现代软件开发的快节奏中,自动化运维成为提高效率、保障质量的重要手段。本文将带你了解如何构建高效的DevOps流水线,从持续集成到部署,再到监控和反馈,我们将一步步揭开自动化运维的神秘面纱。你将学习到如何通过代码和工具的结合,实现软件交付过程的自动化,以及如何通过这一流程提升团队的协作和响应速度。让我们开始探索自动化运维的奇妙之旅吧!
|
7天前
|
运维 Linux 网络安全
自动化真能省钱?聊聊运维自动化如何帮企业优化IT成本
自动化真能省钱?聊聊运维自动化如何帮企业优化IT成本
32 4
|
2月前
|
运维 监控 安全
从实践到自动化:现代运维管理的转型与挑战
本文探讨了现代运维管理从传统人工模式向自动化转型的必要性与路径,分析了传统运维的痛点,如效率低、响应慢、依赖经验等问题,并介绍了自动化运维在提升效率、降低成本、增强系统稳定性与安全性方面的优势。结合技术工具与实践案例,文章展示了企业如何通过自动化实现运维升级,推动数字化转型,提升业务竞争力。

热门文章

最新文章