正文 

当前位置： 首页 > 程序 > java教程

一分钟开始持续集成之旅系列之：vue+腾讯云cos上传部署(代码片段)

cicd cicd     2022-12-04     653

关键词：

前言

随着Web应用的发展，运行在浏览器端的Web应用能够承担更多且更复杂的业务交互需求，前后端分离模式得以流行，并催生了如 Vue 、 React 等单页应用框架。这些框架简化了开发流程，但对于Web应用的部署并没有统一的解决方案。许多项目团队中，前端开发者在提交代码后仍然需要人工通知项目经理、运维等相关同事进行手动或者繁琐的更新操作。而将持续集成的概念引入前端开发将是未来解决前端代码部署的可行性非常高的方案。
本文将介绍将介绍如何使用 CODING 实现 Vue Web 应用结合 腾讯云对象存储服务 (COS) 的持续集成与部署。

构建概览

本文配置的持续集成项目结构如下：

技术图片
由于 Web 应用通常由 html 、 css 、 js 和各种图片、视频等静态资源组成，我们选择了腾讯云对象存储服务 (COS) 来托管我们的静态资源文件。通过创建代码仓库并配置持续集成配置和触发规则。开发者只需要提交代码就可以完成构建、部署的自动化实现。

准备条件

  • 开通了腾讯云COS服务的账号，配置方式见下文

本地开发需要：

  • git
  • node 8.9 或更高版本

构建过程

步骤一：在 Coding 中创建 DevOps 项目

新建一个 DevOps 项目，名称随意：

技术图片

创建成功后，访问【代码仓库】菜单项，获取仓库地址，注意这里不建议立即初始化仓库，初始化操作可以在下文步骤二中处理：

技术图片

项目示例地址：https://coding-public.coding.net/p/vue-cos-ci/d/vue-cos-ci/git (图中所涉及到的变量/名称等信息配图仅供参考，实际以该示例项目为准)

步骤二：创建你的 Vue 项目并推送到仓库

推荐使用 vue-cli 脚手架搭建，它集成了本地开发、单元测试（可选） 、 代码格式检查 lint 和 Webpack 构建功能，并且初始化了 git 基本配置。

安装 vue-cli：

npm i -g @vue/cli

创建 Vue 项目：

vue create vue-app-ci

注：上面的命令会进入项目配置交互式命令行，可以按照实际需求选择配置项。
安装成功后，我们需要推送代码到 CODING DevOps 项目的代码仓库中完成代码仓库初始化，进入 vue-app-ci 目录，执行 git 命令：

git remote add origin https://e.coding.net/<your-repository>/vue-cos-ci.git

git push -u origin master

步骤三：配置构建计划

点击左侧【持续集成->构建】菜单项进入构建计划页面，新建构建计划
我们选择【简易模板】，并且勾选【前往配置详情】，点击【确定】完成创建。

技术图片

创建成功后，页面自动跳转到【构建设置->配置详情】页面。
我们需要编写 Jenkins 脚本执行 代码检出 -> 安装构建 -> 上传操作。使用下面的脚本覆盖原有的 Jenkinsfile 并点击【保存】：

Jenkinsfile

pipeline 
  agent any
  stages 
    stage(‘检出‘) 
      steps 
        checkout([$class: ‘GitSCM‘,
        branches: [[name: env.GIT_BUILD_REF]],
        userRemoteConfigs: [[
          url: env.GIT_REPO_URL,
          credentialsId: env.CREDENTIALS_ID
        ]]])
      
    
    stage(‘安装 lint 与构建‘) 
      steps 
        sh ‘yarn‘
        sh ‘yarn lint‘
        sh ‘yarn build‘
      
    
    stage(‘上传到 COS Bucket‘) 
      steps 
        sh "coscmd config -a $env.COS_SECRET_ID -s $env.COS_SECRET_KEY -b $env.COS_BUCKET_NAME -r $env.COS_BUCKET_REGION"
        sh ‘coscmd upload -r ./dist/ /‘
        echo "上传成功，访问 https://$env.COS_BUCKET_NAME.cos.$env.COS_BUCKET_REGION.myqcloud.com/index.html 预览效果"

技术图片

步骤四：配置腾讯云 COS 服务

我们需要COS来托管我们的 Vue 项目构建后生成的静态文件，上面的 Jenkinsfile 中我们引用了4个 COS 相关的变量，分别为：

  • COS_SECRET_ID - 腾讯云访问密钥 SecretId
  • COS_SECRET_KEY - 腾讯云访问密钥 SecretKey
  • COS_BUCKET_NAME - 腾讯云 COS 存储桶空间名称
  • COS_BUCKET_REGION - 腾讯云 COS 存储桶所属地域

这些变量需要访问 COS 服务页面进行配置。首先开通腾讯云对象存储服务。
开通后，进入对象存储->存储桶列表 创建新的存储桶，并将访问权限设置为“公有读私有写”。

技术图片

点击创建，进入存储桶详情页，可以获取空间名称、所属地域。

技术图片

步骤五：配置腾讯云访问密钥

进入API密钥管理 点击【新建密钥】，生成 SecretId 、 SecretKey。

技术图片

步骤六：配置环境变量

回到 Coding 构建计划，在配置详情中切换到【变量与缓存】视图，点击【+添加环境变量】进行配置。出于安全需要， COS_SECRET_ID 、 COS_SECRET_KEY 设置为【保密】。
此外，还可以选择将 /node_modules 设置为缓存目录，避免每次安装依赖都需要从 npm 拉取，节约您宝贵的时间。
配置完成后，别忘了点击【保存】。

技术图片

步骤七：触发构建

根据默认的构建计划触发规则： 当代码推送到 master 分支后，自动触发持续集成。我们对代码仓库稍作修改并更新 master 分支，进入【持续集成->构建】页面，可以看到构建计划被触发：

技术图片点击构建计划，进入构建详情页，可以看到当前构建的过程、快照等信息。

技术图片

构建完成后，点击构建可视化视图中【上传到COS BUCKET -> Print Message】步骤，查看构建完成后打印的消息。

技术图片

步骤八：配置域名

一个完整的前后端分离应用，前端配置独立域名有利于与后端服务解耦，下面我们介绍如何配置 CDN 加速域名（如果拥有自己的域名，可以在本页面进行配置）。
访问腾讯云 COS ，进入存储桶配置，点击默认 CDN 加速域名的【编辑】，开启加速域名配置 ：

技术图片

保持默认选项即可。由于我们配置了公有读的存储桶，无需回源鉴权。

技术图片

点击保存，等待腾讯云部署完毕，即可从域名 http://one-minute-vue-1252867045.file.myqcloud.com/ 访问我们的 Vue 项目。










云原生之docker实战使用docker部署jenkins持续集成工具

【云原生之Docker实战】使用Docker部署jenkins持续集成工具一、jenkins介绍1.jenkins简介2.jenkins功能3.jenkins基本工作图二、检查本地系统版本三、检查本地docker状态1.检查docker版本2.检查docker状态四、安装docker-compose1.下载docker-compose二进... 查看详情

如何在typecho中使用腾讯云对象存储cos?

如何在typecho中使用腾讯云对象存储cos?要详细点，和插件链接，谢谢插件没有，最简单的应用就是将静态的资源上传到cos，比如将博客代码整个放到cos，开启静态网站，这是一种。还有一种就是将某些图片等上传到cos，在html代码... 查看详情

soapui入门之jenkins持续集成

...行测试、输出和查看TestCase结果报表10、SoapUI入门之Jenkins持续集成Jenkins是一个可扩展的持续集成引擎。我们用Jenkins持续集成SoapUI的前提是我们要安装好Jenkins。网上安装Jenkins的教程很多，这里的话就不多讲了，大家自行百度安装... 查看详情

数据对接-etl之streamset学习之旅一(代码片段)

...装存储应用引用链接学习系列数据对接-ETL之StreamSet学习之旅一数据对接-ETL之StreamSet学习之旅二数据对接-ETL之StreamSet学习之旅三数据对接-ETL之StreamSet学习之旅四数据对接-ETL之StreamSet学习之旅五数据对接-ETL之StreamSet学习之旅六Str 查看详情

3jenkins持续集成之持续集成

3、Jenkins持续集成之持续集成.md配置ansible实现无密钥交互安装阿里云YUM源码[[email protected] ~]# cat <<EOF>>/etc/yum.repos.d/epel.repo[epel]name=epel for aliyunbaseurl=https://mirrors.a 查看详情

利用腾讯云cos云对象存储定时远程备份网站

...om/community 一、优点分析内网传输：和阿里云OSS一样，腾讯云COS同样支持内网和外网文件传输，对于 查看详情

使用腾讯云gpu学习深度学习系列之二：tensorflow简明原理

...=gwzcw.117333.117333.117333这是《使用腾讯云GPU学习深度学习》系列文章的第二篇，主要介绍了Tensorflow的原理，以及如何用最简单的Python代码进行功能实现。本系列文章主要介绍如何使用 腾讯云GPU服务器 进行深度学习运算 查看详情

浅谈自动化测试之持续集成

from:https://www.cnblogs.com/wysk/p/7517277.html一、持续集成是什么？持续集成是一种软件开发的实践，即团队开发成员经常集成他们的工作，通常每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化... 查看详情

剑指架构师系列-持续集成之maven+nexus+jenkins+git+springboot

 1、Nexus与Maven 先说一下这个Maven是什么呢？大家都知道，Java社区发展的非常强大，封装各种功能的Jar包满天飞，那么如何才能方便的引入我们项目，为我所用呢？答案就是Maven，只需要粘贴个Jar包的地址，Maven就会自动到... 查看详情

terraform系列一腾讯云cvm相关简单创建(代码片段)

...练营https://www.yuque.com/devopsvip穿插上了Terraform！个人又开始下体 查看详情

jenkins持续集成之小试牛刀

关于Jenkins的安装，大家可以参考我的这两篇文章:Ubuntu16.04环境安装jenkinsdocker安装jenkins及其相关问题解决之前没有好好研究过Jenkins，只是简单学会怎么安装之类的。下面我们进入今天的主要话题，Jenkins小试牛刀。 一、要有... 查看详情

2jenkins持续集成之前期准备

2、Jenkins持续集成之前期准备.md持续集成互联网软件的开发和发布，已经形成了一套标准流程，最重要的组成部分就是持续集成（Continuous integration，简称CI）。持续集成指的是，频繁地（一天多次）将代码集成到主干,它的好... 查看详情

使用腾讯云cos对象存储（详细流程）(代码片段)

一、开通COS对象存储 二、创建存储桶 基本信息所属地域：请选择与您业务（或用户数量）相对集中的物理区域所对应的COS地域，设置后不可修改。地域的更多信息请参见 地域和访问域名。名称：请输入自... 查看详情

[ansible-playbook]4持续集成环境之分布式部署利器ansibleplay学习

...y讲的中太少了，今天稍微深入学习一点预计阅读时间：15分钟一：安装部署参考 http://getansible.com/begin/an_zhuang_ansile 二：常用模块a.service用于启动检查服务b.file用于文件删除链接创建c.shell用于执行脚本（不推荐，因为shell... 查看详情

极客日报：腾讯宣布捐赠1亿元驰援河南；苹果回应iphone安全隐患；贝索斯完成10分钟太空之旅

一分钟速览新闻点！“搜狗输入法“重新上架各大安卓应用商店腾讯宣布向河南捐款1亿元用于采购救灾物质华为注册自动驾驶Autoware商标微信内测客服功能腾讯起诉山寨微信系统获赔1310万贝索斯首飞成功，完成10分钟太... 查看详情

腾讯暑期夏令营之旅

2013.8.22—8.24三天时间，我参加了腾讯暑期夏令营。这几天里腾讯为同学们准备了一系列的讲座和实践活动，收获很大。不仅腾讯的几个主营业务都有所涉及，而且讲座的水平也很高，所传达的信息很丰富，为我们从内部视角了... 查看详情

腾讯云cos封装(代码片段)

publicclassCosUtilint_appId=xxxxx;string_secretId="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";string_secretKey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";string_bucketName="test";publicCosUtil()stringcosAppId=System. 查看详情

使用beanstalkd实现定制化持续集成过程中pipeline-持续集成系列

持续集成是一种项目管理和流程模型，依赖于团队中各个角色的配合。各个角色的意识和配合不是一朝一夕能练就的，我们的工作只是提供一种方案和能力，这就是持续集成能力的服务化。而在做持续集成能力服务化的过程中，... 查看详情