Serverless Devs 的官網是如何通過 Serverless Devs 部署的

作者 | 江昱

來源 |

阿裡巴巴雲原生公衆号

​

隻有自己吃自己的狗糧，自己做的東西才不“🐶”。Serverless Devs 自發展之處到現在，已經經曆了幾個月的時間，在這幾個月，Serverless Devs 的成長是迅速的，這很大一部分的原因是“我們在吃自己的狗糧”，我們相信，如果自己都用不爽的東西，大家一定很難用的起來。

今天這篇文章，是一個關于 Serverless Devs 官網建設的文章，文章很簡單，也很有趣。

什麼是 Serverless Devs?

「Serverless Devs」是由阿裡雲開源的 Serverless 開發者平台，緻力于為開發者提供強大的工具鍊體系。通過該平台，開發者可以一鍵體驗多雲 Serverless 産品，極速部署 Serverless 項目。Serverless Devs 讓開發者以更短的路徑體驗到多個主流雲廠商 Serverless 産品，以更快的速度建立和部署 Serverless 應用，以更簡單、更自動化的方法進行項目管理和運維，Serverless 項目通過該平台完成全自動化後，可節省 99.9% 的管理成本。

• Github 位址： https://github.com/serverless-devs
• Gitee 位址： https://gitee.com/organizations/serverless-devs/projects
• Serverless Devs 官網： https://www.serverless-devs.com

Serverless Devs 與 Docusaurus

衆所周知，開源項目的官網不宜太複雜，其實簡簡單單的就好，是以我們經過了很長時間的對比，最終選擇了 Docusaurus 作為官網的架構選型。那麼問題來了，我們選型結束之後，我們要如何來建設官網？

經過一些簡單的調研，我們決定用 Serverless Devs 建設 Serverless Devs 官網，并将其部署到 Serverless 架構上，很繞嘴是吧？但是，這個過程卻真的很“經典”：

我們通過 Serverless devs 初始化了 Docusaurus：s init devsapp/website-docusaurus，這一部分可以參考文檔：

https://github.com/devsapp/website-example

。

講真，雖然也就是一行代碼的事情，但是整個初始化還是比較“賞心悅目”的，作為一個 Serverless 應用全生命周期的工具，Serverless Devs 在腳手架和引導層面還是下了很多功夫的：

可以看到，初始化的時候，系統引導式的讓我們填寫了項目名，存儲桶名，以及需要的密鑰資訊，同時完成之後，還告訴我們：

You could [cd /Users/jiangyu/Desktop/start-fc/website/serverless-website] and enjoy your serverless journey!           

感覺還是很貼心的。

接下來，按照指引：

可以看到幫助文檔：

當執行 s website-starter -h 之後，首次運作幫助資訊，可能涉及到元件加載過程，稍等片刻，可以看到幫助資訊：

此時，我們要将項目部署到線上，隻需要執行 s deploy 即可。

當然，我們還需要對項目進行一定的配置，以及對我們的官網進行一定的建設。

關于網站建設，可以參考 Docusaurus 的官網文檔，關于 Serverless Devs 的 website 元件配置，可以參考上圖給我們 🧭 More information:

https://github.com/devsapp/website

：

在文檔中可以了解更多的配置内容，最終生成我們的 s.yaml：

edition: 1.0.0
access: website_access

services:
  website:
    component: devsapp/website
    actions:
      pre-deploy:
        - run: npm install
          path: ./
        - run: npm run build
          path: ./
    props:
      bucket: serverless-devs-website
      src:
        codeUri: ./
        publishDir: ./build
        index: index.html
        subDir:
          type: index
      region: cn-hongkong           

CD 與 Serverless Devs

當我們建立好了網站頁面，在本地也可以正常運作，通過本地的 s deploy 也可以順利部署了，這個時候面臨了新的問題：我如何更新我的網站？每次都要手動的在本地釋出麼？是否可以利用 Github Action，接入自動化的能力呢？

是以：

• 我們建立了一個倉庫：_ https://github.com/Serverless-Devs/website_
• 我們将代碼推送到倉庫之後，建立了一個 Github Action 的配置：

name: Website Publish

on:
  push:
    branches: [ master ]

jobs:
  publish-website:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/
      - run: npm install
      - run: npm install -g @serverless-devs/s
      - run: s config add --AccountID ${{secrets.ALIYUN_ACCOUNT_ID}} --AccessKeyID ${{secrets.ALIYUN_ACCESS_KEY_ID}} --AccessKeySecret ${{secrets.ALIYUN_ACCESS_KEY_SECRET}} -a website_access
      - run: s deploy           

此時我再 push 代碼，就可以自動将網站釋出出來了。

這裡面的核心點如下所示：

1. 安裝 Serverless Devs：run: npm install -g @serverless-devs/s
2. 配置密鑰資訊：run: s config add --AccountID ${{secrets.ALIYUN_ACCOUNT_ID}} --AccessKeyID ${{secrets.ALIYUN_ACCESS_KEY_ID}} --AccessKeySecret ${{secrets.ALIYUN_ACCESS_KEY_SECRET}} -a website_access
3. 部署：run: s deploy

整個效果：

部署後的頁面：

這裡要說明，此處配置密鑰資訊，使用了 Github 的 Secrets 功能，這個功能還是比較基礎的，是以不多贅述，主要就是将釋出的所需要的密鑰資訊配置到 Secrets 裡面。

總結

其實，目前來說很多人的部落格，部分的官網都是通過靜态網站等進行部署，通過 Serverless Devs 走這一套還是比較友善的：

• 得益于 Serverless Devs 的行為描述，我們可以更簡單地将 npm install，npm run build 等指令內建到項目中。
• 得益于 Serverless Devs 的引導能力，包括建立、入門，以及密鑰配置時的擷取連結，Serverless Devs 确實在不斷的從細節出發，為便利而努力。
• 得益于 Serverless Devs 的靈活性，隻需要兩三行代碼，就可以配置出 Github 的 CD 能力，将網站持續發出去，個人覺得這個還是挺爽的。

當然，目前來看還是有一些問題等待去做的：

• Serverless Devs 的場景還是有待豐富的。
• 這個社群官網隻有 CD，沒有 CI 其實還是有一定風險的，要慢慢的完善起來。