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

#はじめに


プログラミング歴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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/adfacb93-45eb-82f8-8a98-01c15ea74f41.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/567e171f-1fbd-9285-d46e-73dbc09bafcf.png)


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

* 『title（string）』

* 『content(text)』

* 『image(media)』

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


##権限の設定

![Screen Shot 2019-08-29 at 22.45.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/ab4a8a82-624a-79d9-806e-7a27516aa295.png)

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

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


![Screen Shot 2019-08-29 at 22.48.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/5955a698-c839-ef86-503f-130a18443193.png)

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



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

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

![Screen Shot 2019-08-29 at 22.50.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/7d27df01-c658-f52e-28f8-2cfd18ffe7fd.png)


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


![Screen Shot 2019-08-29 at 22.52.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/3dd81cd0-97e8-a595-2b2a-86ddfc9d78a1.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
```

##`.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`の内容を以下に書き換えます。

```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を取得できます。


```react: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の接続 

についてまとめました。