雰囲気でやるモダンなReact with WordPress REST API（環境構築）

Angular、React、Vue.js（あとRiot.js）と揃い踏み、苛烈を極めるフロントエンド界隈、皆様いかがお過ごしでしょうか。

私はちょうど1年ほど前に新調した名刺に「フロントエンドエンジニア」と書いてはみたもののすっかり苦しくなってきた昨今です。

残り60枚程度頑張りますモロ（@moro_is）です。
厳冬の候、この記事はReact #1 Advent Calendar 2017、8日目の記事です。

この記事では、

イマドキだからReactやってみたい
でも全然下地的な知識はない
ToDoアプリはもうわかったからもうちょい実用的なことしたい

私がざっくばらんに進捗をご報告いたします。
ご指導ご鞭撻のほどよろしくお願いいたします。

https://github.com/moroi/react-wordpress

やりたいこと

React + Redux + WordPress REST API + etcを使って、WordPressでありがちなブログ（メディア）を作る
- 記事一覧
- カテゴリー一覧
- タグ一覧
- 検索結果一覧
- ランキング一覧
- メニュー
- 他
イマドキっぽいもの（CSS in JSとかSSRとか）には積極的に飛びつく
頑張って実用レベルまで持っていく

まずは環境構築

まずはスタンダードなNginx + Node.js構成のサーバーを用意します。

React側のあれこれ

$ cat /etc/redhat-release
CentOS Linux release 7.4.1708 (Core)

Node.jsをインストールするのに必要なパッケージをインストールする。

$ sudo yum install -y gcc-c++ make

Node.js 6.xのYum Repositoryを追加する。

$ curl -sL https://rpm.nodesource.com/setup_6.x | sudo bash -

Node.jsをインストール。

$ sudo yum install -y nodejs

バージョンを確認。

$ node -v
v6.12.1

$ npm -v
3.10.10

Create React Appをインストール。

$ npm install -g create-react-app

Create React Appでアプリを作る。

$ mkdir /home/react
$ cd /home/react
$ create-react-app example.com
$ cd example.com

Create React Appを動かす。

$ npm start

Compiled successfully!

You can now view example.com in the browser.

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

よさそう。一旦Ctrl+Cで停止。

Webサーバー側のあれこれ

ファイアウォールの状態を確認。

$ firewall-cmd --list-all

Reactが使う3000ポートを開放。

$ firewall-cmd --add-port=3000/tcp --zone=public
$ firewall-cmd --add-service=http --zone=public

と、永続化。

$ firewall-cmd --add-port=3000/tcp --permanent --zone=public
$ firewall-cmd --add-service=http --zone=public --permanent

ファイアウォールを再起動して設定を反映。

$ firewall-cmd --reload

Nginxを入れる。

$ vi /etc/yum.repos.d/nginx.repo

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1

$ sudo yum -y --enablerepo=nginx install nginx

Nginxのバージョンを確認。

$ nginx -v
nginx version: nginx/1.12.2

Nginxの設定。

$ mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/example.com.conf
$ vi /etc/nginx/conf.d/example.com.conf

upstream nodejs {
    ip_hash;
    server localhost:3000;
}

server {
    listen       80;
    server_name  xxx.xx.xxx.xx;

    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location / {
        proxy_pass http://nodejs;
    }
}

Nginxを自動で起動するようにしつつ、再起動で設定を反映。

$ systemctl enable nginx
$ systemctl restart nginx

再びCreate React Appを動かす。

$ npm start

Welcome to React

導入終わり！

再React側のあれこれ

「モダンな」って言ってしまったのでここからごにょごにょしていかなければなりません。ので、Reactにいろいろ入れます。

yarnのほうがきっとモダンですが、npmのほうが情報が多そうなのでとりあえずnpmでやる。

$ npm install --save redux react-redux
$ npm install --save react-router react-router-redux react-router-dom
$ npm install --save redux-thunk redux-promise
$ npm install --save styled-components polished
$ npm install --save axios
$ npm install --save react-helmet

$ npm install --save redux react-redux react-router react-router-redux react-router-dom redux-thunk redux-promise styled-components polished axios react-helmet

$ vi package.json 

{
  "name": "example.com",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "polished": "^1.9.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-helmet": "^5.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.0.17",
    "redux": "^3.7.2",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.2.0",
    "styled-components": "^2.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

はい、あれこれ入れました。

https://github.com/moroi/react-wordpress

長くなりそうなので続きは次の記事で……！