Help us understand the problem. What is going on with this article?

【React-Static】Strapiでブログを更新してReact-Staticで表示する

More than 1 year has passed since last update.

はじめに

プログラミング歴2ヶ月の素人が書いています。(間違っていたらご指摘ください)

「React-StaticのブログデータをStrapiで作って更新する」ための学習メモです。

  • Stripiのインストール

  • Stripiのデプロイ

*デプロイしたStripiとReact-Staticの接続

上記3点についてまとめます。

👇React-Static公式👇
https://github.com/react-static/react-static

今回の目的

  • 静的サイトジェネレータReact-Staticを初めて使います。

  • NetlifyにデプロイしたReact-Staticのブログを更新するために、Strapiでコンテンツを作り、React-Staticのブログで読み込みます。

Screen Shot 2019-08-29 at 23.49.31.png

👆成果物

React-Staticのブログを作ってNetlifyにデプロイする

前回記事を参照
『静的サイトジェネレータReact-Staticを使ってみる』
https://qiita.com/shin-ph/items/a6b03412b0822d8be24b

Strapiとは

👇公式ドキュメント(英語)
https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start.html#_1-install-strapi-globally

そもそもStrapiとは、「HeadlessCMS」 と呼ばれるサービスの一つです。
「CMS」とは、「コンテンツ管理システム(Content Management System)」の略称です。

WordPressもCMSです。

HeadlessCMSは、頭がない、つまりフロントエンドは無く、コンテンツを管理するバックエンド側だけを提供するCMSです。

フロントは自分で用意する必要があります。(今回はReact-Staticで生成した静的サイト)

Strapiのインストール

cmdline
npm install strapi@beta -g

strapiをグローバルにインストールします。

プロジェクトの作成

cmdline
strapi new my-project --quickstart

Current Directory内に、my-projectという名前のディレクトリでプロジェクトが生成されます。

strapiのadmin画面へのログイン

プロジェクトを作成すると、自動的にローカルホストでサーバーが立ち上がり、ブラウザにログイン画面が表示されます。
表示されない場合は、http://localhost:1337/admin かと思います。

コンテンツタイプの作成

ログインを終えると、管理画面が表示されます。
まずは、コンテンツタイプの作成を行います。

Screen Shot 2019-08-29 at 22.42.11.png

今回は、ブログの記事を作りたいので、

  • 『title(string)』

  • 『content(text)』

  • 『image(media)』

の3つをフィールドに持つコンテンツタイプを作成し、保存します。

権限の設定

Screen Shot 2019-08-29 at 22.45.24.png

外からもデータの読み込みができるよう、ロールと権限の設定を行います。

『Public』をクリックします。

Screen Shot 2019-08-29 at 22.48.43.png

今回は読み込みのみ行いますので、『Find』と『FindAll』にチェックを入れて、保存します。

投稿のテストとJSONの確認

作成したコンテンツのタブから、エントリーの追加をします。

Screen Shot 2019-08-29 at 22.50.28.png

ルート以下を/コンテンツ名にして、URLに打ち込むと、先ほど追加したエントリがJSONになっているのが確認できます。
http://localhost:1337/posts

Screen Shot 2019-08-29 at 22.52.13.png

でも、このままではローカルホストなので、本番環境では動きません。
ここから、Herokuにデプロイしていきます。

Herokuにデプロイする

👇公式
https://strapi.io/documentation/3.0.0-alpha.x/guides/deployment.html#heroku

Heroku CLIのインストール

cmdline
brew tap heroku/brew && brew install heroku

Herokuにログインする

cmdline
heroku login

.gitignorepackage-lock.jsonを加える

./my-project/.gitignore ファイルに、package-lock.jsonを加えます。
.gitignore ファイルの最後の行に、コピーする)

ファイル名の先頭に.(ドット)がついている場合、隠しファイルです。
通常見えなくなっています。
隠しファイルの表示については、以下の記事がわかりやすいかと思います。
『【Mac】隠しファイル・隠しフォルダを表示する方法』
https://qiita.com/TsukasaHasegawa/items/fa8e783a556dc1a08f51

gitリポジトリを初期化してコミットする

cmdline
cd my-project
git init
git add .
git commit -am "Initial Commit"

Herokuプロジェクトの作成

cmdline
heroku create

Herokuデータベースのセットアップ

https://jp.heroku.com/postgres
HerokuのPostgreSQLアドオンを利用します。ここでは無料プラン(Hobby Devプラン)を使用します。

アドオンの追加

cmdline
eroku addons:create heroku-postgresql:hobby-dev

データベース情報(クレデンシャル(資格情報))の取得

cmdline
heroku config

コマンドを実行すると、以下のような文字列が出力されます。

DATABASE_URL: postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b

内容は、以下のようになっています。
postgres:// USERNAME : PASSWORD @ HOST : PORT : DATABASE_NAME

Heroku Configの設定

cmdline
heroku config:set DATABASE_USERNAME=ebitxebvixeeqd
heroku config:set DATABASE_PASSWORD=dc59b16dedb3a1eef84d4999a0be041bd419c474cd4a0973efc7c9339afb4baf
heroku config:set DATABASE_HOST=ec2-50-37-231-192.compute-2.amazonaws.com
heroku config:set DATABASE_PORT=5432
heroku config:set DATABASE_NAME=d516fp1u21ph7b

『=(イコール)』以下を、先ほど取得したデータベース情報に書き換えて実行します。

データベースの設定ファイルの書き換え

./config/environments/production/database.jsonの内容を以下に書き換えます。

database.json
{
  "defaultConnection": "default",
  "connections": {
    "default": {
      "connector": "strapi-hook-bookshelf",
      "settings": {
        "client": "postgres",
        "host": "${process.env.DATABASE_HOST}",
        "port": "${process.env.DATABASE_PORT}",
        "database": "${process.env.DATABASE_NAME}",
        "username": "${process.env.DATABASE_USERNAME}",
        "password": "${process.env.DATABASE_PASSWORD}",
        "ssl": true
      },
      "options": {}
    }
  }
}

pg node moduleのインストール

cmdline
npm install pg --save

ここまでの変更をコミット

cmdline
git commit -am "Update database config"

デプロイする

cmdline
git push heroku master

プッシュできたら、

cmdline
heroku open

で、こんどはヘロクサーバーからログイン画面へ推移します。
ローカルでログインした時と同じnameとpasswordでログインします。

axios.get()の取得元をHerokuにする

React-Staticプロジェクト内の、static-config.js内で、ブログの内容を取得しています。

axios.get()の引数を、https://yourreponame.herokuapp.com/コンテンツ名とすることで、先ほどデプロイしたStripiからJSONを取得できます。

static-config.js
import path from 'path'
import axios from 'axios'

export default {
  getRoutes: async () => {
    const { data: posts } = await axios.get(
      'https://damp-thicket-88898.herokuapp.com/posts'
    )

    return [...

React-StaticプロジェクトのPush

『静的サイトジェネレータReact-Staticを使ってみる』
https://qiita.com/shin-ph/items/a6b03412b0822d8be24b

上記の手順を踏んでNetlifyにデプロイしている場合は、
React-Staticプロジェクトをプッシュするだけで、自動的に本番環境がNetlifyでビルドされてデプロイされます。

react:static-config.jsの変更をコミットして、githubリポジトリにプッシュします。

本番サイトの確認

きちんとブログの内容が書き換わっていれば、成功です。

まとめ

  • Stripiのインストール

  • Stripiのデプロイ

  • デプロイしたStripiとReact-Staticの接続

についてまとめました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした