20190830のReactに関する記事は7件です。

Expoのアカウントを作ってReact Nativeの開発環境を整える

この記事は、「【連載】初めてのReact Native + Expo開発環境構築入門」の子記事です。環境などの条件は、親記事をご覧ください。


 React Native を開発するにあたって、モジュールのバージョン管理やらデバッグ環境準備やら公開作業やらから解放されたい時には、Expoが便利です。今回は、Expoを使う前に必要な準備を整えていきます。Windows 10で実施しますが、MacやLinuxでも基本は同じです。

アカウント作成

 Expoを使うには、アカウントを作成する必要があります。

まず、Expo.ioを開いて、「Create an account」をクリックします。
image.png

次に、Email、希望するユーザーID、パスワード2回を入れて、「Create your account」をクリック。
image.png

こんな感じになったらOKです。
image.png

Projectsタブの中は空っぽですが、プロジェクトを追加するようなボタンはここにはありません。その代わりに「Learn how to get started」というリンクがありますね。このリンク先の説明に従って、これから開発するプロジェクトを作ることになりますが、ここではそのうちの不要ないくつかをスキップしながら進めます。

 少し待ったらExpoからEmailの確認が届くので、Email本文内のリンクをクリックして確認を済ませてください。

Node.js を準備する

 Expoを使った開発を行うには、まず自分のローカルPCにNode.jsをインストールする必要があります。Node.jsのバージョンは最新を使え、と書いてありますので、まだNode.jsをローカルPCにインストールしてない場合はNode.jsのサイトからLTS版をインストールしましょう。
image.png

Expo-CLI をインストールする

 では、Node.jsのインストールで一緒にインストールされたnpmを使って、Expo-CLI(Expoのプロジェクトを作ったりパブリッシュしたりするためのコマンドライン機能)をローカルPCにインストールしましょう。
 PowerShellを立ち上げて、
image.png

 以下のコマンドを実行します。

npm install expo-cli --global

 WARNはいくつかでますが、ERRORが出てなければ問題ないはずです。

Expoプロジェクトを格納するフォルダを作る

 今後たくさんのExpoプロジェクトを作ることになるので、プロジェクト用フォルダを作っておきましょう。例えば C:\ExpoProjects など。PowerShellで、以下のようにします。

> cd /
> mkdir ExpoProjects

Expoプロジェクトを作成する

 それではテストで1つ、HelloWorldプロジェクトを作りましょう。PowerShellで先ほど作ったプロジェクト用フォルダに入り、プロジェクトを作ります。

> cd /ExpoProjects
> expo init hello-world

 新規プロジェクト作成では、テンプレートが選択できます。ここでは blank を選びます(Enterキー)。
image.png

 また、プロジェクトの表示名を聞かれるので、キーボードで入力してEnterキーで確定します。ここでは「Hello World!」
image.png

 またもやWARNはいくつかでますが、ERRORが出てなければ問題ないはずです。
 では、Hello Worldプロジェクトを実行してみましょう。

> cd hello-world
> expo start

 ファイアーウォールの警告が出た場合は、通信を許可してください。
 うまくいったら以下のようにブラウザが開いて、QRコードが表示されます。

image.png

Expo Clientアプリで実行を確認

 実行結果の確認は、iPhoneまたはAndroidの実機にExpo Clientというアプリをインストールして、そのアプリでQRコードを読むことで実施します。(今回はiPhoneで試します)
 image.png

 手元のスマホにExpo Clientをインストールし、自分のExpoアカウントでログインしたのち、カメラアプリから先ほど表示したQRコードを読み込んでみてください。

Expo Clientがうまくいかない場合

 Expoは、ローカルPC上で expo start することで、Expoサーバーとして動作します。モバイル(iPhoneやAndroid)上のExpo Clientは、そのサーバーにプロジェクトのアプリを取得しに行って、取得が終わったら実行することになります。つまり、モバイルとローカルPCが直接通信できる状態になければExpo Clientが動作しないことになります。

 うまくいかない場合、以下を確認しましょう。

  • ローカルPCのファイアーウォールで19000や19001のポートが拒否されていないか。
  • ローカルPCの参加するサブネットと、モバイルの参加するサブネットが同じか。
  • ローカルネットワーク上で端末同士の通信が許可されているか。
  • 仮想PC上で expo start したなら、仮想PCとモバイルと同じサブネットのIPアドレスに見えているか。

 ほかに、初回ビルドが遅すぎてClient側が待てなくてタイムアウトすることもあります。。。
 いろいろ試してダメな場合は、ConnectionでTunnelを選んでやり直してみてください。

初回画面

 うまくいくと、Expo Clientの初期画面が表示されます。

image.png

 上に表示されているのが初回だけ表示される内容で、意訳すると「デバイスを振るとこのメニューに戻れるからねー」です。Got itでとじましょう。閉じた後に実際の実行結果が表示されます。
image.png

 真っ白な画面に、「App.jsを開けて開発を始めよう!」と出るだけですが、このメッセージはReactのコードから出力されています!簡単!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【連載】初めてのReact Native + Expo開発環境構築入門(Windowsベース)

 この記事では、Windows 10にExpoを使ったReact Nativeの開発環境を1から構築し、サンプルアプリを作成するところまでをゴールとします。
 1つの記事ですべてカバーできないので、いくつかの記事に分けて少しずつ投稿していく連載にしていきます。連載は2019年9月から10月の期間を予定しています。
 なお、筆者はアメリカで開発業務を行っているため、選択するトレンドなどはアメリカ主体となります。

環境

開発環境は、2019年8月時点最新の以下のソフトウェアで構築します。

  • Chrome 最新 (76.0.3809.100 (64-bit))
  • Visual Studio Code 最新 (1.37.1)
  • Node.js + npm 最新 (10.16.3)

なぜExpo?

 モバイルアプリ開発のクロスプラットフォームには、Cordova (ionicやMonaca含む)、Xamarin、最近ではFlutterなどいくつもの選択肢がありますが、その中で以下のメリットが強いときにReact Native + Expoを使うのがよいかと思います。

  • とにかく開発工数を小さくしたい。
  • 業務用アプリなどで、細部にはあまりこだわらない
  • Web開発の知識をなるべくそのまま応用したい。
  • JavaScriptの知識をメインにして作りたい
  • Reactの知識がすでにある
  • デバイスに依存した機能は使わないプロジェクト、またはモックアップ用
  • 実機でデバッグを簡単に実施したい
  • 簡単に配布したい

 同じような条件では、Monacaが競合に入ってきます。実際私も過去にMonacaを使って開発しましたが、Reactのメリットを感じない場合はMonacaでもいいかなと思います。ただ、最近よくReactを使うから今さらjQueryはあまり積極的に使いたくないとか、データ取り扱いでやっぱりReactにメリットを感じるといった場合は、Expoサイコーでよいと思います。

 なお、React Native (=react-native-cli)じゃなくてReact Native + Expoな理由は、この辺りの記事が参考になります。

記事一覧

 連載内容の予定です。途中で大幅に変更する可能性があります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

よく分からないReactエラーメッセージ [メモ]

React/JSX特有のエラーメッセージは、明確になぜいけないのか教えてくれていることが少ない気がします。

sono1
does not exist on type 'JSX.IntrinsicElements'.  TS2339

以下のコードで怒られました。

render(){
return ( <test /> )
}

let test = () => { 
    return (<Grid>aa</Grid>);
}

なにがいけないのかさっぱりわからなかったのですが、関数コンポーネント名の最初
の文字を大文字にしたら、普通にコインパイル通りました。

sono2
Expected an assignment or function call and instead saw an expression  no-unused-expressions

[JSXタグ]をReturnで返していない

let test = () => { 
    (<Grid>aa</Grid>);
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

styled-componentsをTypeScriptで使うTips

styled-componentsをTSで使うケースは多いですが、意外とまとまった記事がなく、聞かれることが多いのでかきました。

propsに型をつける

親が特定のreact component出ないときは、下記のようにシンプルに書くのがおすすめです。

const Button = styled.button<{primary: boolean}>`
  color: ${({primary}) => primary ? 'skyblue' };
`

一方、コンポーネントが複雑になったり親のpropsを参照する場合は、Pickを使っても良いです。

interface Props {
  primary
  secondary
  // 略
}

function MyComponent(props: Props) {
  return (
    <div>
      <Button secondary={props.secondary} primary={props.primary}>{props.children}</Button>
    </div>
  )
}

const Button = styled.button<Pick<Props, 'primary' | 'secondary'>>`
  ${({primary, secondary}) => primary ? css`` : secondary ? css`` : css``}
`

定数に型をつける

色やサイズなどの定数に型を付けると、利用するときにどのpxが適用されるのかがわかって便利です。

const FONT = {
  XXXLARGE: 32,
  XXLARGE: 24,
  XLARGE: 18,
  LARGE: 16,
  MEDIUM: 14,
  BASE: 12,
  SMALL: 11,
  XSMALL: 10,
  TINY: 8,
} as const

const FONT_WEIGHT = {
  NORMAL: 400,
  BOLD: 600,
} as const

const BORDER_RADIUS = 4 as 4

export default {
  FONT,
  FONT_WEIGHT,
  BORDER_RADIUS
}

このようにすることで、↓エディタのsuggestion機能でどの定数がどのpxを持っているかを確認することが出来ます。

image.png

css propを使うとき

babel-pluginや、babel macroで有効になるcss propは、jsxの拡張になるため何もしないとTSに怒られます。
type rootのindex.d.tsで下記を記述すれば解決します。(styled-components/csspropはreactの拡張をしています)

import {} from 'styled-components/cssprop'

attrsを使うとき

これはちょっと面倒な書き方をしなければいけないので、そもそもattrsを多用しないのもありかもしれません。

const StyledImg = styled.img.attrs<{ logoSrc: logoSrc }>(
  ({logoSrc}) => ({
    src: logoSrc,
  })
)<{ logoSrc: logoSrc }>``

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Docker + Rails + React

Docker + Rails + React

streampack の minsu です。

今年の夏は主に室内で過ごしていましたが、先日帰省した折に中古のカメラを手に入れたので今後はアウトドアな趣味としてお散歩カメラをきめこみたいと考えています。 涼しくなったら、たぶん

目的

フロント: React
バック: Rails
を Docker を利用して構築します。

React + Rails ですが webpacker を利用する方法で行います。

ファイルの用意

まず、GemfileGemfile.lockDockerfiledcocker-compose.ymlを用意します。

Gemfile
source 'https://rubygems.org'
gem 'rails', '5.1.4'
Dockerfile
FROM ruby:2.4.1

RUN apt-get update -qq && apt-get install -y mysql-client build-essential nodejs apt-transport-https

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update && apt-get install -y yarn

RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app
docker-compose.yml
version: '3'
services:
  app:
    build: . 
    command: /bin/sh -c "rm -f /app/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/app
    ports:
      - "3000:3000"
    depends_on:
      - db

  db:
    image: mysql:5.7
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    environment:
      - MYSQL_ROOT_PASSWORD=root
    volumes:
      - mysql_vol:/var/lib/mysql

volumes:
  mysql_vol:

pid は、開発用WEBサーバを起動するときに tmp/pids/server.pidに書き込まれて終了するときに削除されるのですが、なんらかの要因で削除されずに終了した場合は起動中と判断されて新たにサーバを起動できないのでrm -f /app/tmp/pids/server.pidで起動時に削除します。

rails new

コンテナから rails プロジェクトを作成します。
Gemfileは上書き、DBはMySQLを指定します。

$ docker-compose run app rails new . --force --database=mysql

docker-compose.yml の mysql の rootパスワードを MYSQL_ROOT_PASSWORD=root に設定したので config/database.yml の development に設定を追加しました。
host も同じく指定した db に変更します。

config/database.yml
username: root
password: root
host: db

Gemfile に

gem 'webpacker'
gem 'react-rails'

を追加し、 bundle install しなおした後に

$ docker-compose build

次のコマンドを実行します。

$ docker-compose run app rails webpacker:install
$ docker-compose run app rails webpacker:install:react
$ docker-compose run app rails generate react:install

上の2行は rails new のタイミングで --webpack=reactのオプションを追加でも良かったみたいです。

package.json の更新や
app/javascript/packs/配下に application.jshello_react.jsx が作成されます。

db、 model 作成

適当な model と seeds データを用意して DB を作成後にデータを入れます。

$ docker-compose run app rails g model List title:string desc:string
db/seeds.rb
5.times do
  List.create(
    title: 'title_' + SecureRandom.hex(4),
    desc: 'desc_' + SecureRandom.hex(4)
  )
end
$ docker-compose run app rails db:create
$ docker-compose run app rails db:migrate

作成したモデルを一覧表示させてみます。

controller、view を作成

$ docker-compose run app rails g controller Lists index
lists_controller.rb
  def index
    @lists = List.all
  end

view では javascript_pack_tagreact_component のタグを用いて js を呼び出します。

lists/index.html.erb
<%= javascript_pack_tag 'application' %>

<h1>Lists#index</h1>
<%= react_component 'Lists', lists: @lists %>

react component 作成

順番が前後しましたが、 view で呼び出している components を実装します。

$ rails g react:component Lists

のコマンドで app/javascript/components/Lists.js が作成されるので編集します。

Lists.js
import React from "react"
import PropTypes from "prop-types"
export default class Lists extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      lists: []
    };
  }
  componentDidMount(){
    this.setState({
      lists: this.props.lists
    })
  }
  render () {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Description</th>
              <th>created_at</th>
              <th>updated_at</th>
            </tr>
          </thead>
          <tbody>
            {this.state.lists.map((list) => {
              return (
                <tr key={list.id}>
                  <td>{list.id}</td>
                  <td>{list.title}</td>
                  <td>{list.desc}</td>
                  <td>{list.created_at}</td>
                  <td>{list.updated_at}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

動作確認

rails, webpack を立ち上げます。

$ docker-compose up -d
$ docker-compose run app bin/webpack-dev-server

http://localhost:3000/lists/index にアクセスします。
スクリーンショット 2019-08-30 15.19.12.png
無事に一覧が表示されました。

まとめ

起動と表示確認までを行いました。

この状態では何の機能もないので React での CRUD 操作を実装するまでを追記、または新しく記事にしたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【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

?成果物

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データベースのセットアップ

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

についてまとめました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【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

?成果物

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

についてまとめました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む