#はじめに

プログラミング歴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のブログで読み込みます。

👆成果物

#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 かと思います。

##コンテンツタイプの作成

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

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

『title（string）』
『content(text)』
『image(media)』

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

##権限の設定

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

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

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

##投稿のテストとJSONの確認

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

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

でも、このままではローカルホストなので、本番環境では動きません。
ここから、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

##.gitignoreにpackage-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の接続

についてまとめました。