どうも,エンジニアのナカノです.
今回は,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
へ追記すれば良いです.
今後も,自動化出来る部分はその様にして,開発すべき部分へ注力出来ればと思います.