概要
Dockerを使用した開発や学習することが多くなってきたため、React(create react app使用)学習用の環境をdocker-composeで構築しようと思い、その時の備忘になります。
Dockerはインストールしてある状態から進めます。
※↓はnodeバージョン更新版になってます(追記:20200614)
docker-composeでreact環境構築(更新版)
環境
Docker version 18.09.2
docker-compose version 1.23.2
構築作業
Dockerfile作成
Dockerfile
FROM node:8.16.0-alpine
WORKDIR /usr/src/app
docker-compose.yml作成
docker-compose.yml
version: '3'
services:
web:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./:/usr/src/app
command: sh -c "cd react-sample && yarn start"
ports:
- "3000:3000"
イメージをビルド
$ docker-compose build
React と create-react-app をインストール + アプリ作成
$ docker-compose run --rm web sh -c "npm install -g create-react-app && create-react-app react-sample"
↓作成ディレクトリ
- Dockerfile
- docker-compose.yml
- react-sample
|- node_module
|- public
|- src
起動
$ docker-compose up -d
Dockerfileに記載したport番号(今回は"localhost:3000")にアクセスすると、「Reactファイルを編集してみよう!」的な画面になります。
止める場合は
$ docker-compose stop
でコンテナが停止します。
最後に
これで簡単な構築は完了です。Reactの学習をしたい方はReactチュートリアルをやってみるといいかもしれません。