「react」タグアーカイブ

Nginx/React/MongoDB on Docker の構築 その5 Reactからバックエンドへの接続

先日作ったバックエンドに対して、Reactから情報を取るところまで。
追加とか削除は同じようにロジック追加するだけなので割愛。

準備

nginxのDockerを立ち上げて、Reactをインストールしその上で作業。
以前Reactのインストールをnginx上で行ったので、そのDockerを使った。
もちろん、Docker上で試す必要はない。

React-Bootstrapのインストール

見た目とか色々いじるのはめんどくさいので、簡単なBootstrapを使用。
React-Bootstrapなるものがあるらしく、Reactのアプリを作成後にインストール。
いつも通り公式のGetting Startedを参考に

create-react-app frontend
cd frontend
npm install --save react react-dom
npm install --save react-bootstrap

この状態でnpm startすると前回のデモアプリと同じ以下の画面が出るはず。

PORT=80 npm start

React App

続いて、Bootstrapを使うためにCSSを追加する。

vi public/index.html

# <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
# を<head>内に追加

TODOを表示するテーブルを作成

src/App.jsにTODOリストのテーブルを追加。
todosに後々取得したデータが入る予定で、各行の表示はsrc/EntryRow.jsに記載。

import React, { Component } from 'react';
import { Table } from 'react-bootstrap';
import EntryRow from './EntryRow';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {todos: ''};
  }
  entryRow(){
    if(this.state.todos instanceof Array){
      return this.state.todos.map(function(object, i){
          return <EntryRow obj={object} key={i} />;
      })
    }
  }
  render() {
    return (
      <div className="App">
        <Table striped bordered condensed hover>
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            {this.entryRow()}
          </tbody>
        </Table>
      </div>
    );
  }
}
export default App;

続いて、src/EntryRow.jsにTODOリストの各行を追加するロジックを追加。

import React, { Component } from 'react';

class EntryRow extends Component {
  render() {
    return (
        <tr>
          <td>
            {this.props.obj._id}
          </td>
          <td>
            {this.props.obj.name}
          </td>
        </tr>
    );
  }
}

export default EntryRow;

この状態で画面にテーブルができる。もちろん、todosの中は空なので何も表示されない。

todo-table1

TODOのリストを取得して表示

HTTPのリクエストにはaxiosを使用。
追加でaxiosもインストール。

npm install --save axios

src/App.jsに前回作成したフロントエンドに対してリクエストを投げるロジックを追加する。
頭にモジュールのインポートを追加。

import axios from 'axios';

リクエストのロジックをconstructorとrenderの間くらいに挿入する。 IPアドレスやポートなどは環境に合わせて。

  componentDidMount(){
    axios.get('http://<ip>:3000/api/tasks')
    .then(response => {
      this.setState({ todos: response.data });
    })
    .catch(function (error) {
      console.log(error);
    })
  }

動作確認

PORT=80 npm start

以前追加したタスクがあれば、画面に表示されるはず。

todo-table2

ちなみに、オリジン間リソース共有ができない設定では正しく表示されない。
テストなので、ChromeにAllow-Control-Allow-Origin: *などの拡張を入れて対応も可能。

おわり

やっと通して動くようになった。
次は、Dockerのイメージとして動かせるようにする。

Nginx/React/Express/MongoDB on Docker の構築 その3 React on Nginx on Docker

React

Reactはwebアプリのフロントエンド開発用ライブラリ。
公式によると宣言型で効率的かつ柔軟なJavascriptライブラリらしい。
インフラエンジニアのイメージとしては、クライントサイドでの実装を簡単に作れるライブラリという勝手なイメージ。
Webページにあるフォームのチェックやサジェスト機能を実装できる。

React 開発用Dockerを作成

前回作成したnginxのイメージからDockerを建てる

docker run --name nginx -d -p 10080:80 ytsuboi/nginx:1.0

node.jsのインストール

yumを使って、node.jsのインストールを行う。これでnpmコマンドが使用可能になる。
npmはjavascript用のパッケージ管理ツールで、RubyのRubyGems。PythonのPipにあたる。

yum install -y epel-release
yum install -y nodejs npm

create-react-appでReactのアプリケーションを作成

これでnodejsを使う準備ができたので、React用のライブラリをインストールして、初期アプリケーションを作成する。
初期アプリケーションの作成にはcreate-react-appを利用する。
この手順の通り、Reactの新規アプリケーションを作成する際に使えるツール。

npm install -g create-react-app
create-react-app <application name>

<application name>でフォルダが作成されると思うが、その中のファイルを編集してReactのアプリを作成していく。
今回はこのままでアプリを動かしてみる。
ちなみに、buildせずにnpm startで動かすには、まずnginxを止めてから80ポートで起動してあげれば外部から10080ポートでアクセスできる。

sysatemctl stop nginx
PORT=80 npm start

アプリケーションのビルド

実環境で動作させる場合には、開発したReactのアプリケーションをビルドする必要がある。
npm run buildを行うと、/build/フォルダが作成される。
このフォルダをnginx上で公開することでReactのwebアプリケーションにアクセスができるようになる。

npm run build

ビルドしたアプリケーションを/var/www/<application name>にコピーする。

mkdir /var/www
cp -r build /var/www/<application name>

nginx上で動かす

nginx上でVirtualHostを作成する。
編集するファイルは/etc/nginx/conf.d/default.confを用いる。
公開するフォルダを/var/www/<application name>とするとnginxの設定は以下のようになる。

server {
    listen       80 default_server;
    root /var/www/<application name>;
    server_name  localhost;

    access_log  /var/log/nginx/host.access.log  main;
    index index.html index.htm;

}

今回は簡単な設定だけを記載。
80ポートに来たHTTPのリクエストは/var/www/<application name>配下のファイルを返す。
ファイル名を指定しない場合には、デフォルトでindex.htmlまたはindex.htmを返す。

設定が完了したらnginxを再起動する。

systemctl restart nginx

外部からホストのIPとポートでアクセスして次の画面が出れば成功。

React App

おわり

nginx上で公開する方法がわかったので、次はNode.jsを使ってmongoDBにアクセスするところをやっていこう。
これらの設定やアプリケーションをコンテナ化するのはまたその後で。