Bookmarks

You haven't yet saved any bookmarks. To bookmark a post, just click .

  • 拥抱 Gatsby,用 React 搭建完整博客系统(四)—— 搭建 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:

    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

    yarn global add pm2
    

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

    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 数据库,直接运行以下命令即可:

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

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

    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 或者其他值

    之后运行即可:

    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 数据渲染页面。