[[356447]]

OSS 即 object storage service，對(duì)象存儲(chǔ)服務(wù)，也是每個(gè)云廠商提供的最基本的云服務(wù)。我們可以通過阿里云的 OSS 來托管自己的前端應(yīng)用，個(gè)人網(wǎng)站或者博客。

在 使用 netlify 托管你的前端應(yīng)用 (opens new window)[1] 中我也介紹到另一種專業(yè)的網(wǎng)站托管服務(wù)平臺(tái) netlify。那相比 netlify，阿里云的 OSS 有什么好處呢?只有一個(gè)，國(guó)內(nèi)網(wǎng)絡(luò)問題，并且可以結(jié)合阿里云的 CDN 使用。

按量付費(fèi)

如果你的域名已經(jīng)備案，且執(zhí)著于國(guó)內(nèi)的網(wǎng)絡(luò)時(shí)延，推薦在阿里云的 OSS 部署你的應(yīng)用。你可以直接在阿里云官網(wǎng)購(gòu)買 OSS，「按量付費(fèi)」，對(duì)于個(gè)人來說，每個(gè)月的花費(fèi)不足一塊(如果流量不大，且不上 CDN 的話)。

那付費(fèi)的項(xiàng)目有哪些呢，大約是以下所列：

1. OSS Bucket Read/Write: 0.01 元/萬次
2. OSS 外網(wǎng)流量: 0.5 元/G
3. OSS CDN 回流: 0.15 元/G
4. CDN 流量: 0.24 元/G
5. CDN HTTPS: 0.05 元/萬次
6. CDN Log: 0.01 元/萬次

CDN 計(jì)費(fèi)請(qǐng)查看 CDN 計(jì)費(fèi)規(guī)則 (opens new window)[2]

以下是我的 OSS(CDN/Log) 相關(guān)費(fèi)用賬單，嗯，每個(gè)月還是一筆不菲的支持 (這超出我每月花費(fèi)的價(jià)格使我需要考慮遷移到 Vercel 了)!

阿里云 OSS 相關(guān)費(fèi)用

OSS 配置

新建 Bucket 及設(shè)置

Bucket 是 OSS 中的存儲(chǔ)空間?？梢蕴D(zhuǎn)到阿里云的 OSS 控制臺(tái)，根據(jù)官方文檔 創(chuàng)建 Bucket (opens new window)[3] 創(chuàng)建 Bucket。

Bucket 新建成功后，點(diǎn)擊 基礎(chǔ)設(shè)置 標(biāo)簽頁(yè)

配置讀寫權(quán)限為 「公共讀」

配置靜態(tài)頁(yè)面，默認(rèn)首頁(yè)是 index.html，404 頁(yè)面是 404.html(根據(jù)你的錯(cuò)誤頁(yè)面而定)

上傳文件

我們可以使用點(diǎn)擊上傳按鈕或者拖拽的方式來上傳文件。但是不方便自動(dòng)化，我們可以選擇使用阿里云的工具 ossutil 來上傳文件，詳細(xì)文檔參考 ossutil (opens new window)[4]

$ ossutil cp -rf .vuepress/dist oss://shanyue-blog/ 

使用 ossutil 時(shí)，需要?jiǎng)?chuàng)建 access key，參考文檔 創(chuàng)建 AccessKey (opens new window)[5]

綁定域名以及開通 CDN

在阿里云的 OSS 控制臺(tái)，選中 Bucket，點(diǎn)擊域名管理標(biāo)簽頁(yè)，綁定用戶域名，并配置 CDN 加速，一路確認(rèn)

綁定用戶域名

配置CDN加速

申請(qǐng)證書

申請(qǐng)證書

CNAME

配置CNAME

配置CDN加速

完成以上步驟，博客就可以成功托管在了阿里云的 OSS 上，并提供 CDN 服務(wù)。

Trailing slash 問題與 http rewrite

在阿里云的 CDN 中配置 http rewrite，相對(duì) vercel/netlify 而言，阿里云的配置還是相當(dāng)復(fù)雜的。

如關(guān)于以下路由的映射：

• /posts/ -> /posts/index.html
• /about -> /about.html

使用 github actions 自動(dòng)化部署

最后只需要配置自動(dòng)部署了，這里使用 github actions，具體細(xì)節(jié)參考我的上一篇文章: github actions 入門指南及實(shí)踐[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/ 

部署成功

部署成功

本文轉(zhuǎn)載自微信公眾號(hào)「全棧成長(zhǎng)之路」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系全棧成長(zhǎng)之路公眾號(hào)。