作者 | 江昱
來源 | 阿里巴巴云原生公眾號
?
只有自己吃自己的狗糧，自己做的東西才不“🐶”。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_accessservices:website:component: devsapp/websiteactions:pre-deploy:- run: npm installpath: ./- run: npm run buildpath: ./props:bucket: serverless-devs-websitesrc:codeUri: ./publishDir: ./buildindex: index.htmlsubDir:type: indexregion: cn-hongkong

CD 與 Serverless Devs

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

• 我們創建了一個倉庫：https://github.com/Serverless-Devs/website
• 我們將代碼推送到倉庫之后，創建了一個 Github Action 的配置：

name: Website Publishon:push:branches: [ master ]jobs:publish-website:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- uses: actions/setup-node@v2with:node-version: 12registry-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 代碼，就可以自動將網站發布出來了。

這里面的核心點如下所示：
?

安裝 Serverless Devs：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

整個效果：
?

部署后的頁面：
?

這里要說明，此處配置密鑰信息，使用了 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 部署的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。