Featured image of post 拥抱 Gatsby,用 React 搭建完整博客系统(四)—— 搭建 Strapi 环境

拥抱 Gatsby,用 React 搭建完整博客系统(四)—— 搭建 Strapi 环境

Gatsby 学习记录。

在本系列文章的前三篇中,我们已经搭建了 Gatsby 环境,并通过渲染本地 Markdown 文件来生成页面,我们的网站也已经成功进行了部署。如果你的要求只是想要搭建一个渲染本地 Markdown 生成的静态网站,依靠目前的内容已经完全足够,剩下的就是编写样式,以及通过 Gatsby 的插件实现一些其他功能。 但本系列文章的目标远不止此,我们想要的是让 Gatsby 与 Strapi 强强联合,给我们的网站添加内容后台管理系统,甚至借助于某些特性实现准动态网站的效果。从本篇开始,我们就将一起体验 Strapi 的强大功能。

前言

在本系列文章的前三篇中,我们已经搭建了 Gatsby 环境,并通过渲染本地 Markdown 文件来生成页面,我们的网站也已经成功进行了部署。如果你的要求只是想要搭建一个渲染本地 Markdown 生成的静态网站,依靠目前的内容已经完全足够,剩下的就是编写样式,以及通过 Gatsby 的插件实现一些其他功能。

但本系列文章的目标远不止此,我们想要的是让 Gatsby 与 Strapi 强强联合,给我们的网站添加内容后台管理系统,甚至借助于某些特性实现准动态网站的效果。从本篇开始,我们就将一起体验 Strapi 的强大功能。

为了让网站看起来不至于过于简陋,在正式开始进行样式撰写的学习之前,先行给网站添加了部分样式,网站样式主要参考了本人的 Ghost 博客和 Gatsby 的 Hello Friend Starter

Strapi 介绍

Strapi 是一款广受欢迎的 Headless CMS,主要有以下特点:

  • 开源、免费
  • 基于 Node.js
  • 支持 SQLite、MongoDB、Postgres 等多种数据库
  • 支持生成 GraphQL API

目前看来,如果不使用价格昂贵的商业软件(如 Contentful 等),Strapi 是目前的最佳选择。

Strapi 部署

本系列侧重于对 Strapi 的使用而非部署,因此在部署中采用 SQLite 作为数据库,读者可自行替换为 MongoDB 等。

非 Docker 部署

Strapi 是基于 Node.js 开发的,因此只需要在服务器上安装 Node 即可运行,借助于 pm2,就可以实现后台运行。

安装 Node 环境等

Node 环境的安装这里不再重复,可自行搜索

使用官方脚手架创建项目

根据 Strapi 官方网站提示,运行以下命令即可安装启动 Strapi:

1
yarn create strapi-app my-project --quickstart

之后脚手架就会下载代码,安装依赖并启动。

gatsby-from-zero-4-1.png

gatsby-from-zero-4-2.png

确保服务器 1337 端口开放,访问 http://服务器IP:1337 即可启动 Strapi。

使用 pm2 后台运行

我们需要使用 pm2 来在后台运行 Strapi,所以我们停止正在运行的 Strapi,先全局安装 pm2

1
yarn global add pm2

安装之后,就可以使用 pm2 来启动 Strapi 了,进入 Strapi 目录,运行以下命令:

1
NODE_ENV=production pm2 start --name APP_NAME npm -- start

其中 APP_NAME 自行取名,不出意外的话,Strapi 就能成功运行在后台了:

gatsby-from-zero-4-strapi-pm2.png

如果需要进一步了解 pm2 的使用,请自行搜索资料

Docker 部署

请参考官方 Docker Hub 页面

Docker 部署非常方便,如果使用 SQLite 数据库,直接运行以下命令即可:

1
docker run -it -p 1337:1337 -v `pwd`/project-name:/srv/app strapi/strapi

如果需要使用诸如 MongoDB 等数据库,推荐使用 docker-compose 来安装,我们创建 strapi 目录和 docker-compose.yml 文件,以下是 docker-compose.yml 的内容示范,请自行修改。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
version : "2"

services:
  strapi-mongo:
    image: mongo
    environment:
      - MONGO_INITDB_DATABASE=strapi
    volumes:
      - db:/data/db
  strapi-app:
    image: strapi/strapi
    environment:
      - DATABASE_CLIENT=mongo
      - DATABASE_HOST=strapi-mongo
      - DATABASE_PORT=27017
      - DATABASE_NAME=strapi
    volumes:
      - ./strapiapp:/srv/app
    ports:
      - 1337:1337
volumes:
  db:

注意上方的 version 请根据 docker-compose 版本调整为 3 或者其他值

之后运行即可:

1
docker-compose up -d

创建管理员账户

我们访问我们刚刚部署的 Strapi 应用:

gatsby-from-zero-4-start.png

初次访问,我们需要创建一个管理员账户,请访问 http://服务器IP:1337/admin 自行添加管理员账户。

创建内容类型(Content Type)

在接口开发中,需要进行数据模型的定义,这实际上也是数据库结构的外在表现形式。在 Strapi 中,我们一般会通过图形界面进行 Model 的定义,Strapi 对大部分处理逻辑进行了封装,使得传统的后端接口开发通过简单的配置即可完成,对前端开发人员非常友好。同时,对于高端用户,也可以通过查看 Strapi 所生成的代码进一步了解细节。

Strapi 已经为我们预先生成了 user 等内容类型,我们要做的是一个博客网站,未来可能需要的数据类型可能包括:

  • post 博客文章
  • tag 文章标签
  • page 博客独立页面

我们暂时只创建 posttag 两种内容类型,page 待后期需要时再创建。

创建 Post 和 Tag 内容类型

在创建之前,我们需要思考,一篇博客文章需要哪些信息?在思考的同时,我们可以打开一些博客文章,看一看都包括哪些信息,可能会得到以下不完整清单:

  • 标题
  • 作者
  • 摘要
  • 内容
  • 标签

再进一步可能还会包括:

  • 封面图
  • 访问地址
  • 是否公开
  • 是否推荐
  • 访问数
  • 创建时间
  • 更新时间

针对特定需求,我们还可以继续添加其他字段。

不同的字段会有不同的数据类型,比如标题应当是一个字符串,而是否推荐则是一个布尔值,标签则应当是一个数组(一篇文章可以有多个标签)。除了一般数据类型之外,Strapi 中支持创建内容类型之间的关联,比如文章的作者应当是 user 类型,而标签数组中的值,应当来自于 tag 类型,这些都可以通过简单的配置进行指定。另外需要注意的一点是,创建时间和更新时间都会自动更新,无须我们关注。Strapi 支持的数据类型包括:

gatsby-from-zero-4-strapi-model-datatype.png

下面我们就根据上文所列清单,分别创建一个tag 内容类型和 post 内容类型:

gatsby-from-zero-4-strapi-model-tag.png

 gatsby-from-zero-4-strapi-model-post.png

字段名使用小写即可,生成内容类型中会显示为大写开头

内容类型的关联非常直观,下面是 post 类型中 author 的关联:

gatsby-from-zero-4-strapi-model-relation.png

添加测试数据

在创建完内容类型后,我们需要添加部分测试数据以用于后续数据获取渲染等测试,请自行添加。

设置访问权限

我们通过访问 http://服务器IP:1337/posts 访问时,会发现报错:

gatsby-from-zero-4-strapi-permission.png

这是因为默认所有数据的获取都必须通过认证,我们可以在管理后台进行调整开放部分数据的公开访问。

点击左侧的 Roles&Permissions 打开角色与权限功能,在角色列表中找到 Public ,点击进入后选中所需要的权限,我们将查询数据权限开放给 Public 角色:

gatsby-from-zero-4-strapi-permission2.png

Strapi 自身也支持 GraphQL 查询,可以访问 http://服务器IP:1337/graphql 查看,将来我们要实现准动态网站,就将直接查询 Strapi 自身的 GraphQL 接口:

gatsby-from-zero-4-strapi-graphql.png

总结

本部分我们主要搭建了 Strapi 环境,并一起创建了我们的博客网站所需的内容类型(Content Type),在 Strapi 的支持下,我们所添加的内容可以直接通过 GraphQL 查询获取到,下一篇我们就将使用 Gatsby 从 Strapi 中获取内容,并通过修改 gatsby-node.js 中的方法来使用 Strapi 数据渲染页面。

comments powered by Disqus
Built with Hugo
主题 StackJimmy 设计