ryz

使用 Strapi 和 GraphQL 快速搭建公司发布变更系统 —— Part.1 Strapi

May 23, 2020

软件开发的工作中不可避免的会遇到突发的生产环境事故,尤其是微服务架构下的今天,当一场事故发生后,如何快速定位到问题根源就极为重要。

于是一个想法顺势而生:在 Jenkins(或其他 CI/CD 系统)中自动记录所有项目的发布变更和变更详细内容,并能按时间、按项目、按团队进行筛选。

做个网站对于程序员来说并没有什么难度,但是平时工作那么多,如何 快速 实现这个想法就变得尤其重要。

于是就有了今天要分享的内容

使用 Strapi 构建 GraphQL API,配合上 React.js,Typescript 和 GraphQL codegen 来快速构建一个发布变更系统。

Strapi

这里着重介绍一下 Strapi,(官网地址: https://strapi.io )是一个开源的 Node.js Headless CMS,可以通过 UI 界面去定义模型关系来自动生成数据库、RESTful API、GraphQL API 和 swagger API 文档。

近几年 headless CMS 的概念很火,其实 headless 字面意思是“无头的”,这里理解为不提供前端界面的 CMS 系统,只提供 API 接口。多样化的客户端撼动了传统 CMS(如 WordPress)的地位,APP、小程序、H5 的爆发,加速了前后端技术的相互独立。

提到 Headless CMS,还有一个不错的选项是 contentful,可以理解为上了云的 Strapi。而另一个有着相似概念的(通过 schema 生成 API)由 IBM 开源的 node.js API 框架 loopback,都是不错的可选性。

为什么偏偏选了 Strapi?以下是 Strapi 与 contentful,loopback 的对比。

在前后端分离的大环境下,Strapi 可以让(前端)工程师快速完成一套「功能完整」且「性能强大」的 API,并可以部署在自己的服务器上,使得这个方案脱颖而出。也是半个小时完成 API 接口的必要条件。

安装 Strapi cli

yarn create strapi-app my-project --quickstart

画模型关系图

在等待安装的过程中,我们可以先构思一下将要构建的系统模型关系。

以我做的版本发布记录系统为例,这个系统主要用来记录版本发布,版本发布中我需要知道它属于那个项目以及发布的版本号、发布时间、发布内容(release note)等信息。

简单画个图,将就看一下。

虽然最终的系统比这个模型图要复杂很多,但是用于教程已经足够了。

(画图工具是一个开源的免费的网站: https://excalidraw.com/ 用的是端到端加密,非常安全,同时也支持多人协同编辑哦~)

创建 Content type

有了这个模型关系,你就可以开始用 Strapi 搭建 schema 了。Strapi 目前支持 mongodb,sqlite,mysql 和 postgresql。本地开发默认使用 sqlite,所以也不用安装其他的数据库依赖。

安装好 Strapi 项目后,进入项目根目录,执行 yarn start,服务器默认端口是 1337,打开浏览器访问 http://localhost:1337/admin 并创建一个管理员用户。进入后台后直接开始创建 content type。

这里也默认包含了 project 的「引用类型」releaselog 在 json 中,相同地,查询 releaselog 时,project 也会被查询出来,而且自带的 ORM 对查询做了优化,不会导致 N+1 的性能问题。

Swagger Doc

除了 API 接口是自动生成的,就连 swagger 文档都生成好了。在后台找到 marketplace(市场) 页面,安装 documentation 插件(顺便也可以把 GraphQL 的插件也安装了,后面会讲到)。