簡単にDockerでreact環境を速攻で作る

こんにちは、IT技術者の田中です。
簡単にDockerでreact環境を速攻で作る

背景

Dockerでreact環境を速攻で作る最新(2020年12月12日)情報がなく困ったので、記事を書きました！
(色々惜しい記事はありましたが、ちょこちょこミスがあり困りました)

前提としてはmacbook proで構築しました！

フォルダ構成

下記のフォルダ構成で作ります。

react
├ Dockerfile
├ docker-compose.yml
└ react-sample/

Dockerfile

Dockerfileの内容

FROM node:15.3.0-alpine
WORKDIR /usr/src/app

docker-compose.yml

docker-compose.ymlの内容

version: '3'
services:
  node:
    build: 
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "3000:3000"

dockerビルドを実行する

docker-compose.ymlのフォルダに移動します。

docker-compose build

上記が完了するまで待ちます。

docker-composeでreactをプロジェクト作成

下記のコマンドで、reactのプロジェクトを作成する。

docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample"

dockerのコンテナを起動する

下記のコマンドでdockerコンテナを起動する。

docker-compose up

reactの起動を確認する

ブラウザーで下記のURLにアクセスする
http://localhost:3000

下記の画面が表示されたら無事成功

終わり！