我使用strapi + MySQL + GraphQL来构建了一个Docker本地环境的[环境搭建]

1 年 ago
逸, 科
1 minute

由于这是我第一次投稿，所以请温柔地对待任何拼写和打字错误（？）

因为今次有机会接触HeadlessCMS，所以尝试了一下strapi。
除了strapi，我还试了几个其他的，希望之后能写成文章。
另外，这次没有提到与前端的协作，所以之后也想写一篇关于那方面的文章。

请提供网页链接

    • 公式サイト

 

    • 公式Github

 

    Qiita「Strapi (Headless CMS)を使ってみたので使い方まとめ + GraphQL」

首先

无头CMS (Headless CMS) 是什么。

因为在 microCMS 的工程师博客中有相关内容，所以引用了与本次使用的 HeadlessCMS 不同的信息。

「ヘッドレス」一詞中的「ヘッド」指的是視圖（即要顯示的螢幕）。
因為是「ヘッドレス」，所以可以稱它為沒有視圖的CMS。

看起来是这样。
传统的CMS，例如WordPress，是由系统界面用于投稿内容和展示内容的界面组成的。
而HeadlessCMS则是没有展示内容界面的。

你对此有一点想法了吗？

如何显示内容？

与传统的内容管理系统不同，Headless CMS没有显示界面，因此可以通过API获取提交的内容。

不仅可以使用API，还可以使用GraphQL，并且不仅仅以传统的博客使用为目的，如果只是一个简单的数据库操作API，可以在管理界面上创建。在进行此操作时，我有以下想法：如果有数据库但还没有完成后端系统，可以创建一个简单的API，从而可以进行前端开发…？这种使用方式似乎是可行的。

本次结构

Strapi 是一个与 MySQL 和 GraphQL 集成的框架。

在进行此次调查时，我们需要能够在MySQL + GraphQL中使用，所以我们寻找了适用的解决方案。作为strapi，它也可以在Postgres或SQLite等环境中使用，请根据您自己的环境选择使用。另外，虽然我们使用GraphQL，但通常会使用RestAPI，所以请根据您希望使用的环境来选择使用！

环境建设

本次使用的环境

MacBookPro: macOS 卡塔利娜10.15.5

准备 Docker

请准备好Docker for Mac（如果是Windows或Linux系统，请对应更换）。只需能执行docker命令即可！

因为在公式的Github上，已经设置好了配置，所以我会直接使用它。（由于我仍在学习Docker，所以无法详细解释。）

每个数据库的docker-compose.yml文件

由于我需要使用MySQL，所以我将使用MySQL文件夹中的yml文件。

version: '3'

services:
  strapi:
    container_name: strapi
    image: strapi/strapi
    environment:
      - DATABASE_CLIENT=mysql
      - DATABASE_HOST=db
      - DATABASE_PORT=3306
      - DATABASE_NAME=strapi
      - DATABASE_USERNAME=strapi
      - DATABASE_PASSWORD=strapi
    ports:
      - 1337:1337
    volumes:
      - ./app:/srv/app
    depends_on:
      - db

  db:
    container_name: mysql
    image: mysql:5.7
    restart: always
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_DATABASE: strapi
      MYSQL_USER: strapi
      MYSQL_PASSWORD: strapi
      MYSQL_ROOT_PASSWORD: strapi
    volumes:
      - ./db:/var/lib/mysql

创建Docker容器

如果文件准备好了，就创建容器。
如果没有特别的要求，请查看README中的说明并执行命令。

$ docker-compose up
スクリーンショット 2020-07-16 11.57.43.png

GraphQL的安装

如果能够做到这一点，接下来就准备使用GraphQL。

$ docker exec -it strapi /bin/bash

进入Docker容器并输入以下命令。

$ strapi install graphql

稍等片刻，GraphQL的安装即将完成。

http://localhost:1337/graphql 可以用本地地址访问GraphQL。

当您访问该网页时，会出现类似这样的界面。

スクリーンショット 2020-07-16 11.54.00.png

环境搭建已经完成。

试试看实际使用一下

创建表格

在初始的登录界面，随便选择就可以了（请考虑有验证功能）
然后启动仪表盘，选择插件的内容类型构建器
选择后，选择创建新的集合类型。

因为这将成为数据库表，所以请设置任意的表名。

スクリーンショット 2020-07-16 12.12.09.png

随后转移到列的设置。

スクリーンショット 2020-07-16 12.13.23.png

我认为有写过SQL的人应该可以大致想象出如何设置列，所以我忽略了列的设置。
暂时先只设置了文本。
你可以根据需要自由地设置表的关系等。

完成后，点击仪表盘右上角的保存按钮，完成表格的创建。

生成数据

当服务器重新启动后，您可以在仪表板菜单中找到刚刚创建的表格。
现在选择它，将显示当前注册的数据（初次登录可能不会显示任何内容）。

当您选择右上方的添加按钮时，您将跳转到数据添加页面。

スクリーンショット 2020-07-16 12.26.12.png

当您添加数据时，数据将会显示在数据显示界面上。
在本例中，由于只有一个自定义列，所以稍微有点不同，但如果有多个列，则会显示相应的注册界面。
此外，ID和注册日期等会自动设置，所以如果您想使用，请使用已有的内容。

スクリーンショット 2020-07-16 12.27.21.png

API的公开设置

我已经注册了数据，但是现在无法使用API。
下一步我将进行API的公开设置。
请在仪表盘菜单中选择“插件→角色和权限”。

从那里选择”Public”。
如果选择”Public”，则在下方可能有权限设置。
您可以在每个表上设置允许的权限。
请设置所需的权限，例如允许使用find进行全文搜索，允许使用findone进行单项搜索。

スクリーンショット 2020-07-16 12.33.37.png

如果选择右上方的“保存”按钮，API就可以使用了。使用方法可能显示在右侧的灰色区域中。在我的环境中，表的名称是“Content”，因此可以通过以下URL使用find方法。

http://localhost:1337/contents 的中文释义

当您通过浏览器访问时，看起来就是这样。

スクリーンショット 2020-07-16 12.37.40.png
[
  {
    "id": 1,
    "Title": "Sample",
    "created_at": "2020-07-16T03:26:19.000Z",
    "updated_at": "2020-07-16T03:26:19.000Z"
  }
]

现在可以提取数据了。
如果是从屏幕一侧使用的话，我想需要使用ajax等方式来获取。
此外，由于有更新和删除的权限，所以请仅允许使用所需的权限。

尝试使用GraphQL

现在，我们来尝试使用GraphQL进行搜索处理。

http://本地主机:1337/graphql

请访问这里。
关于GraphQL的使用方法，请务必自行调查一下。
（我也不是很清楚，所以……）

这次我设置了以下查询。

query findContents {
  contents {
    id
    Title
  }
}

按下类似于重新播放按钮的三角形按钮，就可以得到以下的结果。

スクリーンショット 2020-07-16 12.46.28.png

现在可以使用GraphQL了，只需注册要使用的实际数据并显示在屏幕上即可。

总结

这次我尝试创建了服务器端环境。
作为一个没有使用过服务器端语言的人来说，我觉得这样简单地创建数据非常方便。

如果有精力的话，我希望能够整理出下一步要在前台实际显示的内容。

✖
广告
将在 10 秒后关闭
bannerAds