作者 | 江昱
來源 | 阿里巴巴云原生公眾號
?
只有自己吃自己的狗糧，自己做的東西才不“🐶”。Serverless Devs 自發(fā)展之處到現(xiàn)在，已經(jīng)經(jīng)歷了幾個月的時間，在這幾個月，Serverless Devs 的成長是迅速的，這很大一部分的原因是“我們在吃自己的狗糧”，我們相信，如果自己都用不爽的東西，大家一定很難用的起來。
?
今天這篇文章，是一個關(guān)于 Serverless Devs 官網(wǎng)建設(shè)的文章，文章很簡單，也很有趣。

什么是 Serverless Devs?

?
「Serverless Devs」是由阿里云開源的 Serverless 開發(fā)者平臺，致力于為開發(fā)者提供強(qiáng)大的工具鏈體系。通過該平臺，開發(fā)者可以一鍵體驗多云 Serverless 產(chǎn)品，極速部署 Serverless 項目。Serverless Devs 讓開發(fā)者以更短的路徑體驗到多個主流云廠商 Serverless 產(chǎn)品，以更快的速度創(chuàng)建和部署 Serverless 應(yīng)用，以更簡單、更自動化的方法進(jìn)行項目管理和運維，Serverless 項目通過該平臺完成全自動化后，可節(jié)省 99.9% 的管理成本。
?

• Github 地址：https://github.com/serverless-devs
• Gitee 地址：https://gitee.com/organizations/serverless-devs/projects
• Serverless Devs 官網(wǎng)：https://www.serverless-devs.com

Serverless Devs 與 Docusaurus

?
眾所周知，開源項目的官網(wǎng)不宜太復(fù)雜，其實簡簡單單的就好，所以我們經(jīng)過了很長時間的對比，最終選擇了 Docusaurus 作為官網(wǎng)的框架選型。那么問題來了，我們選型結(jié)束之后，我們要如何來建設(shè)官網(wǎng)？
?
經(jīng)過一些簡單的調(diào)研，我們決定用 Serverless Devs 建設(shè) Serverless Devs 官網(wǎng)，并將其部署到 Serverless 架構(gòu)上，很繞嘴是吧？但是，這個過程卻真的很“經(jīng)典”：
?
我們通過 Serverless devs 初始化了 Docusaurus：s init devsapp/website-docusaurus，這一部分可以參考文檔：https://github.com/devsapp/website-example。
?
講真，雖然也就是一行代碼的事情，但是整個初始化還是比較“賞心悅目”的，作為一個 Serverless 應(yīng)用全生命周期的工具，Serverless Devs 在腳手架和引導(dǎo)層面還是下了很多功夫的：
?

可以看到，初始化的時候，系統(tǒng)引導(dǎo)式的讓我們填寫了項目名，存儲桶名，以及需要的密鑰信息，同時完成之后，還告訴我們：
?

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

?
感覺還是很貼心的。
?
接下來，按照指引：

可以看到幫助文檔：
?

當(dāng)執(zhí)行 s website-starter -h 之后，首次運行幫助信息，可能涉及到組件加載過程，稍等片刻，可以看到幫助信息：
?

此時，我們要將項目部署到線上，只需要執(zhí)行 s deploy 即可。
?
當(dāng)然，我們還需要對項目進(jìn)行一定的配置，以及對我們的官網(wǎng)進(jìn)行一定的建設(shè)。
?
關(guān)于網(wǎng)站建設(shè)，可以參考 Docusaurus 的官網(wǎng)文檔，關(guān)于 Serverless Devs 的 website 組件配置，可以參考上圖給我們 🧭 More information: https://github.com/devsapp/website：
?

在文檔中可以了解更多的配置內(nèi)容，最終生成我們的 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

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

• 我們創(chuàng)建了一個倉庫：https://github.com/Serverless-Devs/website
• 我們將代碼推送到倉庫之后，創(chuàng)建了一個 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 代碼，就可以自動將網(wǎng)站發(fā)布出來了。

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

安裝 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 功能，這個功能還是比較基礎(chǔ)的，所以不多贅述，主要就是將發(fā)布的所需要的密鑰信息配置到 Secrets 里面。

總結(jié)

?
其實，目前來說很多人的博客，部分的官網(wǎng)都是通過靜態(tài)網(wǎng)站等進(jìn)行部署，通過 Serverless Devs 走這一套還是比較方便的：
?

• 得益于 Serverless Devs 的行為描述，我們可以更簡單地將 npm install，npm run build 等指令集成到項目中。
• 得益于 Serverless Devs 的引導(dǎo)能力，包括創(chuàng)建、入門，以及密鑰配置時的獲取鏈接，Serverless Devs 確實在不斷的從細(xì)節(jié)出發(fā)，為便利而努力。
• 得益于 Serverless Devs 的靈活性，只需要兩三行代碼，就可以配置出 Github 的 CD 能力，將網(wǎng)站持續(xù)發(fā)出去，個人覺得這個還是挺爽的。

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

• Serverless Devs 的場景還是有待豐富的。
• 這個社區(qū)官網(wǎng)只有 CD，沒有 CI 其實還是有一定風(fēng)險的，要慢慢的完善起來。

總結(jié)

以上是生活随笔為你收集整理的Serverless Devs 的官网是如何通过 Serverless Devs 部署的的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。