26
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

docker-composeでReact環境構築

Last updated at Posted at 2019-10-16

概要

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チュートリアルをやってみるといいかもしれません。

参考

26
26
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?