![頭圖.png](https://ucc.alicdn.com/pic/developer-ecology/b85d9a8a5d774afc82042994df03992f.png)

作者 | 江昱
來源 | [阿里巴巴雲原生公眾號](https://mp.weixin.qq.com/s/Nkc25MBwFG6KKakW3FeFVQ)

只有自己吃自己的狗 糧，自己做的東西才不“?”。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_](https://github.com/serverless-devs)
- **Gitee 地址**：[_https://gitee.com/organizations/serverless-devs/projects_](https://gitee.com/organizations/serverless-devs/projects)
- **Serverless Devs 官網**：[_https://www.serverless-devs.com_](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_](https://github.com/devsapp/website-example)。

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

![1.png](https://ucc.alicdn.com/pic/developer-ecology/02437c980e074aa983c6e3596e19c618.png)

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

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

感覺還是很貼心的。

接下來，按照指引：

![2.png](https://ucc.alicdn.com/pic/developer-ecology/bfec0d185f574eb2bc861ae1d24d026e.png)

可以看到幫助文件：

![3.png](https://ucc.alicdn.com/pic/developer-ecology/fa28065ff0824cceb6a743900476ef5a.png)

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

![4.png](https://ucc.alicdn.com/pic/developer-ecology/25f4a9a79488442181d15df6d2a69eff.png)

此時，我們要將專案部署到線上，只需要執行 s deploy 即可。

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

關於網站建設，可以參考 Docusaurus 的官網文件，關於 Serverless Devs 的 website 元件配置，可以參考上圖給我們  ? More information: https://github.com/devsapp/website：

![5.png](https://ucc.alicdn.com/pic/developer-ecology/1ad4702f20b54d16ba1bd21048306db7.png)

在文件中可以瞭解更多的配置內容，最終生成我們的 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
1. 配置金鑰資訊：run: s config add --AccountID ${{secrets.ALIYUN_ACCOUNT_ID}} --AccessKeyID ${{secrets.ALIYUN_ACCESS_KEY_ID}} --AccessKeySecret ${{secrets.ALIYUN_ACCESS_KEY_SECRET}} -a website_access
1. 部署：run: s deploy

整個效果：

![6.png](https://ucc.alicdn.com/pic/developer-ecology/330a0e4d6df54d24811c64bd113e7115.png)

部署後的頁面：

![7.png](https://ucc.alicdn.com/pic/developer-ecology/4e4941b6337c456e911e5b0449122bdb.png)

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

# 總結

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

- 得益於 Serverless Devs 的行為描述，我們可以更簡單地將 npm install，npm run build 等指令整合到專案中。
- 得益於 Serverless Devs 的引導能力，包括建立、入門，以及金鑰配置時的獲取連結，Serverless Devs 確實在不斷的從細節出發，為便利而努力。
- 得益於 Serverless Devs 的靈活性，只需要兩三行程式碼，就可以配置出 Github 的 CD 能力，將網站持續發出去，個人覺得這個還是挺爽的。

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

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

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

相關文章