OSS 即 object storage service，對象存儲服務。我們可以通過阿里云的 OSS 來托管自己的前端應用，個人網(wǎng)站或者博客
在 使用 netlify 托管你的前端應用 中我也介紹到另一種專業(yè)的網(wǎng)站托管服務平臺 netlify。那相比 netlify，阿里云的 oss 有什么好處呢？只有一個，網(wǎng)絡問題，并且可以結合阿里云的CDN使用。
如果你的域名已經(jīng)備案，且執(zhí)著于網(wǎng)絡時延，推薦在阿里云的 oss 部署你的應用。你可以直接在阿里云官網(wǎng)購買 oss，按量付費，對于個人來說，每個月的花費不足一塊。
- 原文鏈接: 在阿里云OSS托管你的前端應用
- 系列文章: 個人服務器運維指南
新建 Bucket 及設置
Bucket 是 OSS 中的存儲空間?？梢蕴D到阿里云的 OSS 控制臺，根據(jù)官放文檔 創(chuàng)建 Bucket 創(chuàng)建 Bucket。
Bucket 新建成功后，點擊 基礎設置 標簽頁
配置讀寫權限為 公共讀
配置靜態(tài)頁面，默認首頁是
index.html，404 頁面是404.html(根據(jù)你的錯誤頁面而定)
上傳文件
我們可以使用點擊上傳按鈕或者拖拽的方式來上傳文件。但是不方便自動化，我們可以選擇使用阿里云的工具 ossutil 來上傳文件，詳細文檔參考 ossutil
$ ossutil cp -rf .vuepress/dist oss://shanyue-blog/
使用 ossutil 時，需要創(chuàng)建 access key，參考文檔 創(chuàng)建AccessKey
綁定域名以及開通 CDN
在阿里云的 OSS 控制臺，選中 Bucket，點擊域名管理標簽頁，綁定用戶域名，并配置CDN加速，一路確認
申請證書
CNAME
Trailing slash 問題與 http rewrite
-
/posts/->/posts/index.html -
/about->/about.html
使用 github actions 自動部署
最后只需要配置自動部署了，這里使用 github actions，具體細節(jié)參考我的上一篇文章: github actions 入門指南及實踐
在 github 上可以參考我的配置 shfshanyue/blog
name: deploy to aliyun oss
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
# 切代碼到 runner
- uses: actions/checkout@v1
with:
submodules: true
# 下載 git submodule
- uses: srt32/git-actions@v0.0.3
with:
args: git submodule update --init --recursive
# 使用 node:10
- name: use Node.js 10.x
uses: actions/setup-node@v1
with:
node-version: 10.x
# npm install
- name: npm install and build
run: |
npm install
npm run build
env:
CI: true
# 設置阿里云OSS的 id/secret，存儲到 github 的 secrets 中
- 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/
部署成功
我是山月，一個喜歡跑步與爬山的程序員，我會定期分享全棧文章在個人公眾號中。如果你對全棧面試，前端工程化，graphql，devops，個人服務器運維以及微服務感興趣的話，可以關注我
