【转载】阿里云 CodePipeline 持续集成之发布静态网站到OSS

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
.cn 域名,1个 12个月
简介: 本文转载自 阿里云CodePipeline客户“小草”的个人博客,Step By Step的呈现了从0配置一个nodejs 静态网站发布到OSS,并通过CDN回源加速的过程。

本文转载自 阿里云CodePipeline客户“小草”的个人博客,原文地址: http://www.forkjoin.org/2017/08-21-CodePipeline-ossweb/


现在流行前后端彻底分离,前端生成webpack 打包的静态文件。可以通过 CodePipeline构建后发布到oss 进行发布前端。下面进行详细讲解

第一步 申请开通 CodePipeline

CodePipeline 地址

第二步 创建CodePipeline任务

1. 创建一个nodejs任务

image

2. 详细设置

如下图,配置好git仓库和账号,以及分支

image

配置项目构建命令,比如我的项目修改成

npm i
npm run deploy:test

image

3. 部署方式 选择不需要部署

image

第三步 准备oss

1. 新建 Bucket 选择标准存储,权限配置成公共读

下面测试都默认 bucket 名字为 test-weiapp-web

2. 配置访问控制 RAM

配置ram账号权限给构建使用,一定要配置好ram 权限。理由如下

  • 防止误删除了其他 bucket 的文件等
  • ossutil 工具太危险!!!
  • 安全

3. 创建策略

在访问控制界面选择 > 策略管理 > 新建授权策略 > 选择空白模板 > 输入策略 > 创建成果

策略配置参考如下:

{
  "Statement": [
    {
      "Action": [
        "oss:GetBucketAcl",
        "oss:GetObject",
        "oss:PutObject",
        "oss:DeleteObject",
        "oss:AbortMultipartUpload",
        "oss:ListObjects",
        "oss:ListParts"
      ],
      "Resource": [
        "acs:oss:oss-cn-beijing:*:test-weiapp-web",
        "acs:oss:oss-cn-beijing:*:test-weiapp-web/*"
      ],
      "Effect": "Allow"
    }
  ],
  "Version": "1"
}

Resource的详细格式是 acs:oss:{region}:{bucket_owner}:{bucket_name}/{object_name}

注意: bucket_name 是oss-cn-beijing,而且不是cn-beijing

访问控制参考
授权策略的图形界面生成器

4. 创建子账号并授权

在访问控制界面选择 > 用户管理 > 新建用户 > 输入用户名 > 勾选生成AccessKey > 确定 > 下载Ak 配置文件

在访问控制界面选择 > 用户管理 > 找到刚刚创建的用户 > 点击授权 > 找到上面创建的授权策略 > 添加 > 确定

第四步 修改项目

修改下面shell 内的 OSS_KEY_ID、OSS_KEY_SECRET、OSS_END_POINT和OSS_DISTPATH
并加入到自己项目的合适位置

#!/bin/sh

SYS_OS=`uname -s`
if [ $SYS_OS = "Darwin" ];then
  OSS_UTIL_URL='http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/attach/50452/cn_zh/1502070362563/ossutilmac64?spm=5176.doc50452.2.6.wSvGp7'
elif [ $SYS_OS = "Linux" ];then
    OSS_UTIL_URL='http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/attach/50452/cn_zh/1502070288777/ossutil64?spm=5176.doc50452.2.3.wSvGp7'
else
    exit 1
fi

OSS_KEY_ID='312312fdsfds' #--access-key-id
OSS_KEY_SECRET='sfsdfsdf3123dsfdf' #--access-key-secret
OSS_END_POINT='oss-cn-beijing.aliyuncs.com' #endpoint
OSS_BUCKETINT='test-weiapp-web' #Bucket
OSS_DISTPATH='publish/www' #相对于脚本位置的静态网页路径

echo '开始下载ossutil命令行工具'
curl -o ossutil ${OSS_UTIL_URL}
chmod +x ossutil

echo '配置AK'
./ossutil config -e ${OSS_END_POINT} -i ${OSS_KEY_ID} -k ${OSS_KEY_SECRET}

echo '删除之前的文件!避免文件版本冲突等问题'
./ossutil rm oss://${OSS_BUCKETINT} -r -f

echo '上传文件'
ls -al ../
./ossutil cp -r -f ${OSS_DISTPATH} oss://${OSS_BUCKETINT}

删除文件部分的shell 可以不要,具体请参考自己项目的结构。
因为我的项目生成大量hash文件名的文件,如果不删除,oss 内无用文件将会越来越多。
但是这样的删除过程会增加部署时间,且在一定时间内网站不可以访问;
所以我建议修改项目结构,加入版本,把这些变化文件加入到一个带版本号的子文件夹,这样每次只删除第n个版本前的文件。

第五步修改 CodePipeline配置

  1. 如果不需要测试可以删除测试部分
  2. 添加构建步骤"执行shell"
  3. 点击立即执行开始一次构建

添加执行第四部的sh,注意相对路径是项目根路径,在我的项目内是 publish/upload.sh

第六步 修改oss 配置

对象存储 > 域名管理 > 绑定用于域名 > 输入域名 > 开启cdn ->自动添加cname

如果域名不在当前阿里云账号下或者不在阿里云,那么亲手动添加 cname。

点击确定后多等几分钟。开启cdn 扥过程比较慢。
需要提前打开cdn功能

当域名添加完毕后

对象存储 > 域名管理 > 找到刚刚添加的域名 > 开启CDN 缓存自动刷新

第七步 router 导航的问题

如果项目使用react-router 利用history api 进行导航,那么怎么解决导航的问题?

1. 修改oss 利用404页面

对象存储 > 基础设置 > 静态页面 > 默认首页和默认 404 页都修改成 index.html

但是这种办法有一个问题,除了首页外的其他页面请求的状态码都是 404。
在某些网络情况下404 会被劫持!所以这个办法实际上不完美!

2. 利用 镜像回源

利用"镜像回源"把请求重新定向回首页

对象存储 > 基础设置 > 镜像回源 > 创建规则 > 重定向

image

第八部 cdn 配置

CDN > 域名管理 > 找到刚刚添加的域名 > 性能优化 > 开启智能压缩

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
7天前
|
人工智能 对象存储
【阿里云AI助理】自家产品提供错误答案。阿里云OSS 资源包类型: 下行流量 地域: 中国内地通用 下行流量包规格: 300 GB 套餐: 下行流量包(中国内地) ,包1年。那么这个是每月300GB,1年是3600GB的流量;还是1年只有300GB的流量?
自家产品提供错误答案。阿里云OSS 资源包类型: 下行流量 地域: 中国内地通用 下行流量包规格: 300 GB 套餐: 下行流量包(中国内地) ,包1年。那么这个是每月300GB,1年是3600GB的流量;还是1年只有300GB的流量?
37 1
|
10天前
|
存储 弹性计算 对象存储
预留空间是什么?阿里云OSS对象存储预留空间说明
阿里云OSS预留空间是预付费存储产品,提供折扣价以锁定特定容量,适用于抵扣有地域属性的Bucket标准存储费用及ECS快照费。通过购买预留空间,如500GB通用预留+100GB标准-本地冗余存储包,用户可优化成本。
|
18天前
|
监控 Serverless 持续交付
阿里云云效产品使用问题之如何让流水线支持构建 flutter web 应用到 OSS
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
16天前
|
存储 Java Maven
大事件后端项目31--------文件上传_阿里云OSS_入门程序
大事件后端项目31--------文件上传_阿里云OSS_入门程序
|
16天前
|
存储 运维 Java
大事件后端项目30------文件上传_阿里云OSS_准备工作
大事件后端项目30------文件上传_阿里云OSS_准备工作
|
11天前
|
缓存 对象存储 数据安全/隐私保护
阿里云OSS, 跨域请求, No ‘Access-Control-Allow-Origin‘
阿里云OSS, 跨域请求, No ‘Access-Control-Allow-Origin‘
22 0
|
16天前
|
对象存储
大事件后端项目32--------文件上传_阿里云OSS_程序集成
大事件后端项目32--------文件上传_阿里云OSS_程序集成
|
21天前
|
Java 对象存储
阿里云OSS上传下载文件java
阿里云OSS上传下载文件java
69 0
|
21天前
|
域名解析 对象存储
OSS绑定自定义域名(基于阿里云)
OSS绑定自定义域名(基于阿里云)
30 0
|
分布式计算 Hadoop Java
Hadoop/Spark 访问 OSS 加速 | 学习笔记
快速学习Hadoop/Spark 访问 OSS 加速。
442 0