フロントエンジニアにおくるstrapiことはじめ[2019/12版]

15710 ワード

strapi PostgreSQL チュートリアル Node.js Docker Node.js テキストリンク

Strapi

strapiはNode.js製のオープンソースHeadlessCMSです。3.0.0-alphaからbetaになったことで、導入手順などが変わったようなので、現時点での最新版の導入方法のメモになります。

公式のクイックスタートガイド

下準備

Node.js
データベース（文中ではPostgresQL）

ちなみに下記環境で書いています。
- macOS Catalina 10.15.1
- Chrome バージョン: 79.0.3945.79

strapi公式の求める3.0.0-beta時点での各種バージョン

# Node.js
Node.js >= 10.x
NPM >= 6.x

# Database
MongoDB >= 3.6
MySQL >= 5.6
MariaDB >= 10.1
PostgreSQL >= 10
SQLite >= 3

（おまけ）docker-composeで環境を用意する記事を書きました

Docker composeでstrapi+PostgreSQL開発環境を作る

このチュートリアルと合わせて読んで頂く場合、ホストやURL辺りは少し読み替えていただく必要があります。が、手っ取り早いのでおすすめ。このチュートリアルやった直後に捨てられます！（要らなくなったコンテナやイメージの捨て方はおググりくださいませ…）

Node.js

ローカルマシンのグローバルにNode.jsをインストールされる場合は、nodenv, nodebrewなどでバージョン管理推奨です。
僕は最近管理が億劫になってきたので、Dockerでローカル開発環境作ってます。インストール済みNode.jsを使ってローカルで初める方が多いですかね。

今回は13.2.0の環境を用意してみました。

# node -v
v13.2.0

DB

DBこそMacにインストールして、というのはなにかと面倒になりがちなので、Dockerで開発環境を作ることをおすすめします。

こちらでとてもシンプルなPostgreSQLをDockerで立ち上げる方法を紹介してくださってます。
公式Dockerイメージ PostgreSQL メモ - Qiita

僕もだいたいこの流れでPostgresのDockerを立ち上げています。

後述しますがこのようなDBは必須ではなく、お試しするだけの場合はquickstartで用意されるSQLiteでもよいです。僕は以前にすごく後悔したので、このチュートリアルではPostgresを使う流れで進めます。

# psql --version
psql (PostgreSQL) 10.11

strapiのapp作成

strapiのドキュメントではyarn推しですが、npm(npx)でも問題ないようです。

Dockerの場合はコンテナの中の任意のディレクトリで、ローカルではプロジェクトを管理しやすい場所で、下記を実行。app名のディレクトリが作成され、自動的にセットアップされます。

npx create-strapi-app <app名>

今回は自作Google拡張「still-useful」のためのバックエンドを構築する想定なので以下のようにしました。

npx create-strapi-app still-useful

実行すると対話型で必要事項を入力していくようになります。前述のようにDockerなどでローカルにDBを立ち上げた場合はこのような感じになるかと。（両方をDockerにした場合は、Host設定に注意）

$ npx create-strapi-app still-useful
npx: 85個のパッケージを11.033秒でインストールしました。
Creating a new Strapi application at /Users/teixan/htdocs/still-useful/still-useful.

? Choose your installation type Custom (manual settings)
? Choose your default database client postgres
? Database name: postgres
? Host: 127.0.0.1
? Port: 5432
? Username: postgres
? Password: ******
? Enable SSL connection: No

数分で準備が完了します。以下ログ。

Creating a project with custom database options.
Creating files.
Dependencies installed successfully.Your application was created at /Users/teixan/htdocs/still-useful/still-useful.
Available commands in your project:

  yarn develop
  Start Strapi in watch mode.

  yarn start
  Start Strapi without watch mode.

  yarn build
  Build Strapi admin panel.

  yarn strapi
  Display all available commands.

You can start by doing:

  cd /Users/teixan/htdocs/still-useful/still-useful
  yarn develop

（余談）なぜ`--quickstart`を使わないのか

strapiには--quickstartというファーストステップ用の素晴らしいオプションが用意されています。

npx create-strapi-app <app名> --quickstart

何も設定の必要がなく、コマンドを実行するだけで管理画面を開くところまでやってくれます。初めて触る際にはとてもおすすめです。
quickstartはデータベースにSQLiteを用いており、お手軽で別途DBを用意する必要がないのがお手軽でよいです。しかし、このappはHerokuにて運用する予定で、HerokuではSQLiteのデータ永続化が出来ないようです。なので、Postgresを使うためにquickstartは使いません。

SQLite on Heroku | Heroku Dev Center

create-strapi-appのこのステップでpostgresを選ぶ（quickstartでは省略される）

? Choose your default database client

起動

前述のcreate-strapi-appの最後にこうあるので、

〜略〜
You can start by doing:

  cd /Users/teixan/htdocs/still-useful/still-useful
  yarn develop

導入したフォルダに移動して、yarn develop（もしくはnpx strapi develop（もしくはnpm run strapi develop））してみましょう。

$ npx strapi develop

> [email protected] strapi /Users/teixan/htdocs/test-postgres/test-app
> strapi "develop"


 Project information                                                          

┌────────────────────┬──────────────────────────────────────────────────┐
│ Time               │ Fri Dec 13 2019 18:32:41 GMT+0900 (GMT+09:00)    │
│ Launched in        │ 5909 ms                                          │
│ Environment        │ development                                      │
│ Process PID        │ 7799                                             │
│ Version            │ 3.0.0-beta.17.8 (node v10.16.3)                  │
└────────────────────┴──────────────────────────────────────────────────┘

 Actions available                                                            

Welcome back!
To manage your project 🚀, go to the administration panel at:
http://localhost:1337/admin

To access the server ⚡️, go to:
http://localhost:1337

（もしかしたら初回はちょっと表示内容が違ったかもしれません。）
導入手順としては終わりです。もうコマンド実行などの手順は、コミットやデプロイまでありません。

管理画面（http://localhost:1337/admin）のURLが案内されています。アクセスしてみると、管理者登録フォームが表示されます。管理者を作成してログインしましょう。

以降は同じURLでログインフォームが表示されるようになります。

「コンテンツタイプ」を作成する

コンテンツタイプとは、どのような入出力項目を持った入れ物を作っておくかという感じで、WPで言うところのカスタム投稿タイプ、PHPのフレームワークで言うところのModel(+Controller)的なものです。一般的なブログに、[タイトル][本文][カテゴリ]と入力するようになっているのは、そういう入れ物があるからです。

Strapiでは管理画面上で新規作成や管理が可能ですが、本番環境（Production）では、コンテンツタイプを作成することができません。
なので、ローカル（Development）で予め作成->デプロイが必要です。

サイドナビ[コンテンツタイプ作成] - [コンテンツタイプを追加]

この後はフィールドを追加していきますが、設計などに不慣れな方はとりあえず[String] - 名前に[Title]など入力し、[Done]でいいです。

忘れがちな[保存]

忘れないで！

アクセス権限の設定

サイドナビ[ロールと権限] - [Public]

今作ったコンテンツタイプに対して、どのようなアクセスを許可するかを設定します。
少しわかりにくいですが、今回は外からの（Publicな）アクセスを許可しておく（誰でもAPIにアクセスできるようにしておく）必要があるので、[ロールと権限] - [Public]をクリック。

そうすると、下部の権限の枠に先程作ったコンテントタイプが表示されているかと思います。僕は今回はfind, create, updateなどをオンにしました。

保存を忘れずに。

サンプルデータを入力してみる

サイドナビ上の、作ったコンテントタイプをクリック

一覧部分に「〜〜はありません」と表示されていると思います。
[〜〜を追加]をクリック

先程作ったコンテントタイプのフィールドが表示されています。
適当にサンプルデータを入力しておきます。
[保存]をクリック

前画面に戻り、今入力したものが表示されています。

コンテンツの準備が完了。

アクセスを試してみる

権限の設定時にお気づきかもしれませんが、find, createなどの各アクションの項目をクリックした際に右下にメソッド（GET, POSTなど）とルート（URL）が表示されています。歯車アイコンをクリックすることでも確認できます。

GET

例えば、この例ではコンテンツタイプpostsに対してfindを実行するルートが、GETで/postsだと表示されています。（このサンプルのコンテントタイプがpostsでPOSTと混同しやすく恐縮です…）

パブリック設定でGETなのでそのままブラウザで実行して確認できます。
今回はベースのURLがhttp://localhost:1337/なので、http://localhost:1337/postsになります。

http://localhost:1337/postsにブラウザでアクセス

先程入力したデータ（+日付）のデータが表示されました。
Chrome拡張であるJSONViewなどをインストールしておくとこのように整えて表示してくれるのでおすすめです。

コンテンツをこの管理画面上でしか入力せず、APIとしてはGETリクエストしか扱わない場合はこれでバッチリです。個別のエントリーを取得する場合は末尾にidをつけたりすることになりますが、デフォルトで用意されているものに関しては下記リファレンスを読めばだいたい分かるようになっています。

API Endpoints | Strapi Documentation

PUTやPOST

フロントエンドに依存しますので、具体的な手法は省きますが、確認だけはしておきましょう。
バックエンド構築時の確認などにはPostmanというAppが便利です。

Postman | The Collaboration Platform for API Development

少しUIの情報量が多くややこしいかもしれませんが、左上[New]から[Request]作成。

[メソッド]（GET or POST or etc）、[URL]を入力。
GETならそのまま[Send]で結果が表示されます。（先程のブラウザでの確認と同様です。）

今回はPOSTを試してみますので、リクエストの内容が必要になります。

[メソッド]部分をPOSTに、URLはhttp://localhost:1337/postsでした。
あとは[Header]と[Body]があればリクエストできます。

[Headerタブ]にてこちらをセット。

Key	Value
Content-Type	application/json

[Bodyタブ]では、[raw]を選択。作成したコンテントタイプのフィールドに合わせて。

{
    "title": "Yahoo",
    "url": "www.yahoo.com",
    "score": 888
}

[Send]をクリックで結果が表示されます。

うまく行かない場合は、権限の設定が間違っているか、[Header]の記述のミスなどが考えられますが、レスポンスの内容を確認すれば手がかりはあると思います。

権限の設定が間違っていて、403エラーとなっている例

{
    "statusCode": 403,
    "error": "Forbidden",
    "message": "Forbidden"
}

うまく行っていれば、先程の管理画面上の一覧にも新しいエントリーが表示されます。

Postmanで開発を進めていくなら、Collectionなども活用し効率的に検証できるようにしておくととてもはかどります。ちなみに大きな開発で使う場合は有料となりますので、ご注意ください。
Postman | Plans & Pricing

完成

自前のAPIにデータを登録したり、そのデータを動的に読み出すことが出来るようになりました。

まとめ

さて、これで自分の定義した、コンテンツを格納でき / 読み出せるAPIが用意できました。これをインターネット上でアクセス出来るようにすれば、はれてオリジナルのAPIの公開が出来るわけです。

なぜフロントエンドエンジニアを対象にしたかというと、Node.js製のフロントエンドフレームワークを使えるのに（もしくは勉強中なのに）、バックエンドを作ることが出来ないがゆえに、「サービス」のイメージを出来ないままチュートリアルノマドしているフロントエンドエンジニアが多いのでは？と思った次第です。

もちろん、数多くのチュートリアルを完結したくさんの専門書を読了し、優れたコードで優れたUXを提供できるようになることはめちゃくちゃ重要で、それがフロントエンドエンジニアの本分であるということには、大賛成です。道をはずれてもらいたいわけではなく、少し幅を広げてもらいたいなぁと。

現場にいればフロントエンドエンジニアにはAPIの仕様書や既存のガッチガチに固まったJSONデータのリストなどがどこからともなく降ってくることもしばしばだと思いますが、それだけだとまぁ面白くないじゃないですか。とりあえずこんな感じで最低限のバックエンドは簡単につくれますし、Node.js製なのでカスタマイズも出来ます。「エンドポイントってこんな感じで作られてたんか〜」って思っていただくくらいでもいいかとは思うんですが、これをカスタマイズできればサービス・アプリを構築できることを覚えておいてもらえたらなぁという想いです。

以前作ったChrome拡張もstrapiで簡単なバックエンドを構築していますが、これにユーザー登録機能を実装して、マイページ作ったりしたらサービスになりそうじゃないですか？「デザインと仕様書から画面作る係」でいるのがそろそろ退屈だなぁって感じている方はこういう辺りを深めてもらって新しい世界に進んでもらえたらなぁと思います。

ところでフロントエンドエンジニア略してフロントエンジニアってことでいいんですかね？

Author And Source

この問題について(フロントエンジニアにおくるstrapiことはじめ[2019/12版]), 我々は、より多くの情報をここで見つけました https://qiita.com/teixan/items/0868bb55ee1d899b5327

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .