开发者社区 > 云效DevOps > 正文

有云效流水线将前端部署至oss的示例吗?

有云效流水线将前端部署至oss的示例吗?

展开
收起
真的很搞笑 2023-05-09 19:40:16 360 0
3 条回答
写回答
取消 提交回答
  • 公众号:网络技术联盟站,InfoQ签约作者,阿里云社区签约作者,华为云 云享专家,BOSS直聘 创作王者,腾讯课堂创作领航员,博客+论坛:https://www.wljslmz.cn,工程师导航:https://www.wljslmz.com

    是的,以下是将前端部署至阿里云 OSS 的示例云效流水线:

    1. 创建一个前端项目的云效流水线。

    2. 在流水线中添加一个构建任务,使用相应的构建工具(如 webpack)来打包前端代码。

    3. 添加一个上传到 OSS 的任务,配置 OSS 的相关参数,如 Endpoint、AccessKeyId、AccessKeySecret、Bucket 等。同时在任务的“Artifact”选项中设置好要上传的文件路径,一般为打包后的 dist 目录或对应的静态资源目录。

    4. 在流水线的“触发器”选项中设置好触发流水线的条件,如代码提交到指定分支时触发。

    5. 保存并运行流水线,等待流水线执行完毕后,前端代码就会被打包并上传至 OSS 中。

    以下是一个简单的云效流水线的 YAML 配置示例:

    version: '1.0'
    stages:
      - name: build
        tasks: 
          - name: npm install
            type: script
            script: npm install
          - name: build
            type: script
            script: npm run build
        options:
          docker:
            image: node:latest
            workdir: /app
          timeout: 300
      - name: upload-to-oss
        tasks:
          - name: upload
            type: upload_to_oss
            region: oss-cn-beijing
            accessKeyId: $SECRET_ACCESS_KEY_ID
            accessKeySecret: $SECRET_ACCESS_KEY_SECRET
            bucket: my-bucket
            localFolder: dist
            ossFolder: my-app
        options:
          docker:
            image: registry.cn-hangzhou.aliyuncs.com/aliyun-node/ossutil:latest
            workdir: /app
          timeout: 300
    

    在这个示例中,build 阶段包含了安装依赖和打包两个任务,使用的是 Docker 镜像环境,构建工具为 npm 和 webpack。upload-to-oss 阶段只包含了一个上传任务,OSS 的配置参数使用的是环境变量方式传递,上传的是打包后的 dist 文件夹中的所有文件和目录,上传到 oss://my-bucket/my-app 目录下。

    2023-05-24 10:16:50
    赞同 展开评论 打赏
  • 云效是阿里云提供的一款云端持续集成/交付服务,可以实现自动化构建、测试和部署,包括前端部署至oss。以下是前端部署至oss的示例:

    1. 在云效平台新建一个空流水线,选择使用Node.js模板。

    2. 在“构建配置”中,添加构建脚本如下:

    安装依赖

    npm install

    打包构建生成静态资源

    npm run build

    将产生的静态文件拷贝至部署目录

    cp -r ./dist/* $WORKSPACE/

    1. 在“部署配置”中,选择阿里云OSS,并添加相应的AccessKey、SecretKey、Bucket等信息。

    2. 在“部署脚本”中,添加部署脚本如下:

    安装阿里云CLI

    npm install aliyun-cli -g

    上传静态文件到OSS

    aliyun oss sync $WORKSPACE oss://{Bucket名称} --delete --exclude="node_modules/**"

    其中,{Bucket名称}需要替换为实际的Bucket名称。

    1. 点击保存并构建即可。

    以上步骤是一个基本的示例,在具体的使用过程中可能会有所变化。需要根据实际情况进行修改和调整。

    2023-05-23 23:07:38
    赞同 展开评论 打赏
  • 您可以参考这个:https://help.aliyun.com/document_detail/315401.html?spm=a2c4g.224602.0.0.724c42a9ZyvUl0,此回答整理自钉群“云效客户服务权益8群”

    2023-05-09 20:33:33
    赞同 展开评论 打赏

云效,企业级一站式研发协同平台,数十万企业都在用。支持公共云、专有云和混合云多种部署形态,通过云原生新技术和研发新模式,助力创新创业和数字化转型企业快速实现研发敏捷和组织敏捷,打造“双敏”组织,实现多倍效能提升。

热门讨论

热门文章

相关电子书

更多
云效助力企业软件供应链生产效能提升 立即下载
云效 DevOps 客户案例集(公共云) 立即下载
云效 立即下载