Docker + React 開発環境構築してみた

mugitya

Dockerの勉強をしてみたので、
これから勉強していきたいReactの開発環境を構築してみる

Dockerを使うことのメリットを考えてみた

・VMより軽い
・開発環境構築をコード化できるので誰かに教えやすそう
・上と同じだが、Docker関連のファイルを渡すだけで構築終わるので楽そう
・本番、検証と同等の環境も作成できそうなので環境依存問題に悩まされない

というわけでdockerで環境構築してみた

Dockerを入れてみる

まずは、dockerのWEBサイトにアクセスし、docker for Mac をゲット

以下の操作でインストーラーをDL
Products　＞　Docker Desktop 　＞　Download for Mac

docker.dmgを実行しインストール
インストールが成功しているかは以下のコマンドで確認

docker run hello-world

上記コマンドで「Hello from Docker!」などの文字列がターミナルに表示されれば正常に終了

React開発環境をDockerで作る

サンプルアプリが動くところまで

サンプルアプリのディレクトリ作成

mkdir react-docker-test
cd react-docker-test

Dockerfileを作成
中身は以下

FROM node:12.14.1
WORKDIR /usr/src/app

docker-compose.ymlを作成
※このファイルは複数コンテナ使うときにイメージ管理するためのファイル
  今回は１つしかイメージ利用しないが、後々増やすかもなーと思い作成

version: '3'
services:
   node:
       build:
        context: .
       environment: 
        - NODE_ENV=production
       volumes:
           - ./:/usr/src/app
       working_dir: /usr/src/app
       command: sh -c "cd react-docker-test && yarn start"
       ports:
           - "3000:3000"
       tty: true

docker-compose.ymlの仕様はここから

ここまでで、設定ファイル作成完了！

後は、コマンド実行すればいい感じに出来上がる

docker-compose run —rm node sh -c “npm install -g create-react-app && create-react-app react-docker-test”

このコマンドでサンプルアプリの作成ができたら、次は以下

docker-compose up

※ターミナルが占領されるので、気になる人は -d オプションつけてください

実行した結果以下の文字列がターミナルに表示されていれば成功

Compiled successfully!
node_1  | 
node_1  | You can now view react-docker-test in the browser.
node_1  | 
node_1  |   Local:            http://localhost:3000
node_1  |   On Your Network:  http://172.27.0.2:3000
node_1  | 
node_1  | Note that the development build is not optimized.
node_1  | To create a production build, use yarn build.
node_1  |

最後に、localhost:3000にアクセスしてReactのページが表示されていれば完璧


とりあえず、dockerでこんな感じに環境は構築できそう
後は、reactかけるけどよくわからん状態を脱するために、勉強しつつ何か作っていく