【React.js】Docker ComposeでReact.jsの環境を構築する

はじめに

こんにちは、がんがんです。


インターンの方で最近React.jsを触っております。
自分自身でもReact.jsの練習をやりたいと思い、まずはDockerにて環境を構築しcreate-react-appをやってみたいと思います。

目的

  • React.jsの環境をDockerにて構築する
  • creat-react-appを行う

環境

  • ローカルPC:Windows10 Pro
  • Docker:Docker for WIndows
  • React.jsの環境
    • node.js:10.19.0
    • react:16.13.0
    • react-dom:16.13.0

参考

公式ドキュメント
今回は公式ドキュメントと同じ方法で構築してます。
ja.reactjs.org

参考資料は他にもいろいろ出てきましたが基本的にnpm installでした。

ファイルの準備

まずはいつもの通りDockerfiledocker-compose.ymlの準備を行います。
npm start時に3000ポートが要求されるので、portsは3000に設定しています。全体のコードはこちらにおいてます。
github.com

Dockerfile
FROM node:10.19.0-alpine

WORKDIR /usr/src

#  環境の準備
RUN npm install -g npm \
    && rm -rf /var/lib/apt/lists/*
docker-compose.yml
version: '3'
services:
  app:
    build: .
    container_name: test-material-ui
    ports:
      - 3000:3000
    volumes:
      - .:/usr/src
    tty: true
    stdin_open: true
    command: /bin/sh

buildしてcreatereactプロジェクトの作成

Dockerfile内でnpxの設定が上手くいかなかったので、docker-compose runさせています。

$  docker-compose build
$  docker-compose run --rm app sh -c "npx create-react-app test-materialui"

実行結果

コンテナ内に入り実行させてみます。

$  docker-compose exec app sh
$  cd test-materialui
$  npm start

http://localhost:3000にアクセスして下のような画面が表示出来れば成功です。

f:id:gangannikki:20200314181139j:plain
Reactのマークが回っている状態になってればOKです

おわりに

今回はReact.jsの学習を行うために、Dockerを用いて環境の構築を行いました。React.jsの勉強を始めてみて、とても楽しいなと感じています。
次回はMaterial-UIを導入して実験を行っていきます。