在阿里雲OSS託管你的我的網站

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

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

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

<!--more-->

• 原文連接: 在阿里雲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，我的服務器運維以及微服務感興趣的話，能夠關注我