通过 Serverless Devs 部署静态网站

在日常生活中，我们经常需要记录一些自己的日常，包括一些想法、状态，或者是学习的某些技术，这个时候，就需要有一个博客系统来满足需求。但是无论是自己开发的博客系统，还是用已经开源的博客软件或者一些 CMS 系统，只要涉及到自己搭建博客功能，就离不开服务器等云资源，涉及到服务器、数据库等云资源，就势必离不开成本的支出，包括资金成本和运维成本等。此时，如果可以有一个可以保证博客安全、稳定、高性能的同时，又能低运维、低成本的运行博客的云端服务/云产品，显得尤为重要。而随着 Serverless 架构越来越火热，其按量付费，弹性伸缩... 等很多优质特性，都让人眼前一亮，不得惊叹云计算为我们带来的便利，也让很多人逐渐的开始思考，自己的项目应该如何和 Serverless 架构有交集，或者如何让 Serverless 为自己的项目赋能，体验 Serverless 架构带来的技术红利。

一个博客对于一个人而言可能会承载很多事情，尤其是一个技术博客对于一个程序员而言，不仅仅是自己学习、成长的见证，也是自己的工作、生活的一个见证，甚至在很多的技术面试过程中，拥有一个自己的技术博客都是一个非常不错的加分项。但是传统意义上的很多研发同学建设的技术博客都会面临服务器的问题，因为技术博客往往并没有太大的流量，也很难产生很大的收入，单纯为了自己的兴趣、爱好来购买服务器，并且进行一些后期运维工作，在成本支出、精力支出上确实不太合适。所以基于 Serverless 架构的博客系统就显得非常重要了，因为基于 Serverless 架构建设的博客系统，不仅仅可以体验学习进技术，也可以直接得到 Serverless 架构带来的技术红利

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.0access: 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，接入自动化的能力呢？

所以：

1. 我创建了一个仓库：https://github.com/Serverless-Devs/website

2. 我将代码推送到仓库之后，创建了一个 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 功能，这个功能还是比较基础的，所以不多赘述，主要就是将发布的所需要的密钥信息配置到 Secret

案例总结

其实，目前来说很多人的博客，部分的官网都是通过静态网站等进行部署，通过 Serverless Devs 走这一套还是比较方便的：

1. 得益于 Serverless Devs 的行为描述，我们可以更简单的将npm install，npm run build等指令集成到项目中；

2. 得益于 Serverless Devs 的引导能力，包括创建，入门，以及密钥配置时的获取链接，Serverless devs 确实在不断的从细节出发，为便利而努力；

3. 得益于 Serverless Devs 的灵活性，只需要两三行代码，就可以配置出 Github 的 CD 能力，将网站持续发出去，我觉得这个还是挺爽的；

当然，目前来看还是有一些问题等待去做的：

1. Serverless Devs 的场景还是有待丰富的；

2. 这个社区官网只有 CD，没有 CI 其实还是有一定风险的，要慢慢的完善起来；