使用阿里雲OSS與github actions 自動託管你的我的網站

OSS 即 object storage service，對象存儲服務。咱們能夠經過阿里雲的 OSS 來託管本身的前端應用，我的網站或者博客

在 使用 netlify 託管你的前端應用 中我也介紹到另外一種專業的網站託管服務平臺 netlify。那相比 netlify，阿里雲的 oss 有什麼好處呢？只有一個，網絡問題，而且能夠結合阿里雲的CDN使用。

若是你的域名已經備案，且執着於網絡時延，推薦在阿里雲的 oss 部署你的應用。你能夠直接在阿里雲官網購買 oss，按量付費，對於我的來講，每月的花費不足一塊。

• 原文連接: 在阿里雲OSS託管你的前端應用
• 系列文章: 我的服務器運維指南

新建 Bucket 及設置

Bucket 是 OSS 中的存儲空間。能夠跳轉到阿里雲的 OSS 控制檯，根據官方文檔 建立 Bucket 建立 Bucket。

Bucket 新建成功後，點擊 基礎設置 標籤頁

1. 配置讀寫權限爲 公共讀

2. 配置靜態頁面，默認首頁是 index.html，404 頁面是 404.html(根據你的錯誤頁面而定)

上傳文件

咱們可使用點擊上傳按鈕或者拖拽的方式來上傳文件。可是不方便自動化，咱們能夠選擇使用阿里雲的工具 ossutil 來上傳文件，詳細文檔參考 ossutil

$ ossutil cp -rf .vuepress/dist oss://shanyue-blog/
複製代碼

使用 ossutil 時，須要建立 access key，參考文檔 建立AccessKey

綁定域名以及開通 CDN

在阿里雲的 OSS 控制檯，選中 Bucket，點擊域名管理標籤頁，綁定用戶域名，並配置CDN加速，一路確認

申請證書

CNAME

Trailing slash 問題與 http rewrite

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

使用 github actions 自動部署

最後只須要配置自動部署了，這裏使用 github actions，具體細節參考個人上一篇文章: 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，我的服務器運維以及微服務感興趣的話，能夠關注我