LoginSignup
1
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ShinKano(Shin Kano)

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

Last updated at Posted at 2019-08-29

#はじめに

プログラミング歴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)』

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

##権限の設定

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

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

についてまとめました。

1
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?