どうも，エンジニアのナカノです．
今回は，Reactアプリのローカル環境の構築を自動化するという内容をご紹介致します．
環境構築を自動で行うために、Reactアプリをコンテナ化したいと思います．
- 背景
- 作り方
- 所感
背景
外部案件に携わることが多いのですが、毎回辛いのが環境構築の作業と手順をまとめることです．
環境構築を行い，手順通りにやっているのに構築が何故か上手く出来ない．あると思います．
また，手順を作るのも面倒ですよね．そこで，環境を一式用意出来たらいいのになあという願望が．
それでどうせならと，勉強がてらにReactアプリをコンテナ化して作る人の負担を減らそうかなと．
作り方
雛型を作るところまでは簡単だったのですが，動作確認と修正で割とハマってしまいました．
色々と試行錯誤して，以下の設定で落ち着きました．一旦，これでローカル環境が用意出来ます．
Dockerfile
FROM node:xx.xx.xx
WORKDIR /srv/
COPY ./*.json /srv/
RUN npm install && \
chown -R node:staff ./*
RUN apt-get -q -y update && \
apt-get install -q -y locales locales-all && \
locale-gen ja_JP.UTF-8
ENV LANG=ja_JP.UTF-8 \
LANGUAGE=ja_JP:ja \
LC_ALL=ja_JP.UTF-8
EXPOSE 3000
docker-compose.yaml
version: '3'
services:
react_app:
build: .
container_name: react-app
volumes:
- "./src:/srv/src"
- "./bin:/srv/bin"
- "./public:/srv/public"
- "./.env.development:/srv/.env.development"
ports:
- "3000:3000"
working_dir: /srv
tty: true
上記の様な内容でDockerfile，docker-compose.yamlを用意した後で，以下を実行します．
$ docker-compose up -d $ docker-compose exec react_app bash
そしてコンテナに入り，Reactアプリの起動コマンドや起動シェル等を実行します．
動作確認でハマってしまって，一旦この様にしてます．もっと上手く出来るかも...
あとは，http://localhost:3000をブラウザで叩けば，Reactアプリの画面が表示されます．
ポートフォワーディングが必要な場合は，その対応も行って頂くと良いかもです．
所感
アプリのコンテナ化は細かい部分でハマりましたが，良いトレーニングになりました．
ちなみに，同様な方法により，Angularアプリのコンテナ化も行うことが出来ます．
その場合は，Angular CLIのインストール処理をDockerfileへ追記すれば良いです．
今後も，自動化出来る部分はその様にして，開発すべき部分へ注力出来ればと思います．
