Docker + React 開発環境構築してみた
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を作成
※このファイルは複数コンテナ使うときにイメージ管理するためのファイル
今回は1つしかイメージ利用しないが、後々増やすかもなーと思い作成
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かけるけどよくわからん状態を脱するために、勉強しつつ何か作っていく