【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でした。

ファイルの準備

まずはいつもの通りDockerfileとdocker-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にアクセスして下のような画面が表示出来れば成功です。

Reactのマークが回っている状態になってればOKです

おわりに

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