使用對象存儲服務 OSS 部署前端項目
OSS 即 object storage service，對象存儲服務，也是每個云廠商提供的最基本的云服務。我們可以通過阿里云的 OSS 來托管自己的前端應用，個人網站或者博客。
在 使用 netlify 托管你的前端應用 (opens new window)[1] 中我也介紹到另一種專業的網站托管服務平臺 netlify。那相比 netlify，阿里云的 OSS 有什么好處呢?只有一個，國內網絡問題，并且可以結合阿里云的 CDN 使用。
按量付費
如果你的域名已經備案，且執著于國內的網絡時延，推薦在阿里云的 OSS 部署你的應用。你可以直接在阿里云官網購買 OSS，「按量付費」，對于個人來說，每個月的花費不足一塊(如果流量不大，且不上 CDN 的話)。
那付費的項目有哪些呢，大約是以下所列：
- OSS Bucket Read/Write: 0.01 元/萬次
- OSS 外網流量: 0.5 元/G
- OSS CDN 回流: 0.15 元/G
- CDN 流量: 0.24 元/G
- CDN HTTPS: 0.05 元/萬次
- CDN Log: 0.01 元/萬次
CDN 計費請查看 CDN 計費規則 (opens new window)[2]
以下是我的 OSS(CDN/Log) 相關費用賬單，嗯，每個月還是一筆不菲的支持 (這超出我每月花費的價格使我需要考慮遷移到 Vercel 了)!
阿里云 OSS 相關費用
OSS 配置
新建 Bucket 及設置
Bucket 是 OSS 中的存儲空間。可以跳轉到阿里云的 OSS 控制臺，根據官方文檔 創建 Bucket (opens new window)[3] 創建 Bucket。
Bucket 新建成功后，點擊 基礎設置 標簽頁
配置讀寫權限為 「公共讀」
配置靜態頁面，默認首頁是 index.html，404 頁面是 404.html(根據你的錯誤頁面而定)
上傳文件
我們可以使用點擊上傳按鈕或者拖拽的方式來上傳文件。但是不方便自動化，我們可以選擇使用阿里云的工具 ossutil 來上傳文件，詳細文檔參考 ossutil (opens new window)[4]
- $ ossutil cp -rf .vuepress/dist oss://shanyue-blog/
使用 ossutil 時，需要創建 access key，參考文檔 創建 AccessKey (opens new window)[5]
綁定域名以及開通 CDN
在阿里云的 OSS 控制臺，選中 Bucket，點擊域名管理標簽頁，綁定用戶域名，并配置 CDN 加速，一路確認
綁定用戶域名
配置CDN加速
申請證書
申請證書
CNAME
配置CNAME
配置CDN加速
完成以上步驟，博客就可以成功托管在了阿里云的 OSS 上，并提供 CDN 服務。
Trailing slash 問題與 http rewrite
在阿里云的 CDN 中配置 http rewrite，相對 vercel/netlify 而言，阿里云的配置還是相當復雜的。
如關于以下路由的映射：
- /posts/ -> /posts/index.html
- /about -> /about.html
使用 github actions 自動化部署
最后只需要配置自動部署了，這里使用 github actions，具體細節參考我的上一篇文章: github actions 入門指南及實踐[6]
在 github 上可以參考我的配置 shfshanyue/blog (opens new window)[7]
- name: deploy to aliyun oss
- on: [push]
- jobs:
- build:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/checkout@v1
- with:
- submodules: true
- - uses: srt32/git-actions@v0.0.3
- with:
- args: git submodule update --init --recursive
- - name: use Node.js 10.x
- uses: actions/setup-node@v1
- with:
- node-version: 10.x
- - name: npm install and build
- run: |
- npm install
- npm run build
- env:
- CI: true
- - name: setup aliyun oss
- uses: manyuanrong/setup-ossutil@master
- with:
- endpoint: oss-cn-beijing.aliyuncs.com
- access-key-id: ${{ secrets.OSS_KEY_ID }}
- access-key-secret: ${{ secrets.OSS_KEY_SECRET }}
- - name: cp files to aliyun
- run: ossutil cp -rf .vuepress/dist oss://shanyue-blog/
部署成功
部署成功
本文轉載自微信公眾號「全棧成長之路」，可以通過以下二維碼關注。轉載本文請聯系全棧成長之路公眾號。
