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にアクセスするところをやっていこう｡
これらの設定やアプリケーションをコンテナ化するのはまたその後で｡