453
【轉載】阿裏雲 CodePipeline 持續集成之發布靜態網站到OSS
本文轉載自 阿裏雲CodePipeline客戶“小草”的個人博客，原文地址: https://www.forkjoin.org/2017/08-21-CodePipeline-ossweb/
現在流行前後端徹底分離，前端生成webpack 打包的靜態文件。可以通過 CodePipeline構建後發布到oss 進行發布前端。下麵進行詳細講解
第一步 申請開通 CodePipeline
第二步 創建CodePipeline任務
1. 創建一個nodejs任務
2. 詳細設置
如下圖，配置好git倉庫和賬號，以及分支
配置項目構建命令，比如我的項目修改成
npm i
npm run deploy:test
3. 部署方式 選擇不需要部署
第三步 準備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='https://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='https://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配置
- 如果不需要測試可以刪除測試部分
- 添加構建步驟"執行shell"
- 點擊立即執行開始一次構建
添加執行第四部的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. 利用 鏡像回源
利用"鏡像回源"把請求重新定向回首頁
對象存儲 > 基礎設置 > 鏡像回源 > 創建規則 > 重定向
第八部 cdn 配置
CDN > 域名管理 > 找到剛剛添加的域名 > 性能優化 > 開啟智能壓縮
最後更新：2017-08-21 22:32:22