Reactの開発環境をDockerで整えよう

はじめに

この記事ではReact.js(以下React)でDockerの開発環境を整える方法を紹介します。

現在Dockerはバズワードではなく、開発環境を整えるツールとしてデファクトスタンダードになりつつあります。
モダンなWeb系企業であれば、Dockerを使っているところも多いはずです。

Dockerを使えばアプリケーションごとにnode.jsやReact.js、その他のライブラリやパッケージのバージョン管理が容易になり、非常に効率よく開発に着手することができます。

Dockerは聞いたことあるけど使ったことのない、使ってみたい方はこの機会にぜひ学びましょう。
この際にDockerの使い方にも慣れておくと今後きっと役に立つ場面も多いと思います。

目次

なぜDockerを使うのか

Dockerとはコンテナと呼ばれるOSレベルの仮想化環境を提供するOSS(Open Source Software)です。

ここで言うコンテナとは「コードとその全ての依存関係をパッケージ化するソフトウェアの標準ユニット」のことです。
Dockerではこのコンテナを動かす環境を提供しています。

コンテナとよく比較されるのがVirtualBoxやVMwareなどの仮想マシンです。
これらとの大きな違いはDockerはコンテナを仮想化し、仮想マシンではOSを仮想化することです。

Dockerの場合はホストのOSを利用するため、仮想マシンで新たにOSを建てるよりも軽量でパソコンのリソースを削減できます。

コンテナ化されたアプリケーションと仮想マシンによるアプリケーションの比較

What is a Container? | Docker

今回Reactの環境構築をDockerで行う理由は、バージョン管理が容易に配布可能であることが大きな要因の1つです。

Dockerではコンテナをイメージと呼ばれるテキストベースのファイルで配布できるため、次に紹介するDockerfileやdocker-compose.ymlを書き、実行するだけで全く同じ開発環境が整ってしまいます。

次で早速環境構築を行います。

補足：Dockerの導入方法

macOSにおけるDockerはDocker for macOSという優れたアプリケーションがあります。
導入方法には以下の記事を参考にしてみて下さい。

DockerをHomebrewでMac OSに導入する方法

Dockerfileとdocker-compose.ymlを作成する

それではまずはDockerfileやdocker-compose.ymlを書きましょう。
ディレクトリ構造は以下のようになります。

sample-react-app
├── Dockerfile
└── docker-compose.ym

Dockerfile

Dockerfileは、Docker上で動作するコンテナの構成情報を記述したファイルです。
Dockerfileに拡張子は必要ありません。

今回のDockerfileとその意味は以下です。

FROM node:8.16.0-alpine  
WORKDIR /usr/src/app
RUN npm install --save prop-types
RUN npm install -g create-react-app

今回は軽量なnode:8.16.0-alpine を使用します。
Reactアプリを簡単に作ることができるcreate-react-appとreactの型指定を行うprop-typesは使うのでここでダウンロードしています。

docker-compose.yml

docker-composeは複数のコンテナをまとめて管理するためのツールです。
各コンテナの構成情報をdocker-compose.ymlというyaml形式で記述します。

今回のdocker-compose.ymlとその意味は以下です。

version: '3'
services:
  node:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=production
    volumes:
    - ./:/usr/src/app
    command: sh -c "cd sample-project && yarn start"
    ports:
    - "3000:3000"

environmentはファイルから環境変数を追加できるので、口外したくないSecret Keyなどを読み込ませます。
現状は無くても問題ありません。

commandは後に説明するdocker-compose upをしたときに素早く開発用サーバーが起動するようにしてあります。

イメージのbuildとreact-create-appの実行

先程作成したファイルのあるディレクトリでdocker-compose buildを実行します。

$ docker-compose build
Building node
Step 1/4 : FROM node:8.16.0-alpine
 ---> e08ba08cf75a
Step 2/4 : WORKDIR /usr/src/app
 ---> Using cache
 ---> d1f2d9212396
Step 3/4 : RUN npm install --save prop-types
 ---> Using cache
 ---> ccffda0a7a60
Step 4/4 : RUN npm install -g create-react-app
 ---> Running in 806fb2e48f44
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.2.0
added 91 packages from 45 contributors in 9.884s
Removing intermediate container 806fb2e48f44
 ---> 46e35a85eeed
Successfully built 46e35a85eeed
Successfully tagged sample-react-app_node:latest

先程書いたDockerfileを元にビルドされていることが分かると思います。

それでは実際にreactのアプリケーションを作ります。

$ docker-compose run --rm node sh -c 'create-react-app sample-project'

docker-compose runは先程ビルドしたものからコンテナを作り起動させるものです。

--rmのオプションで使用したコンテナは終わるとすぐに削除されるようになっています。
先程react-create-appをインストールしたのでcreate-react-appコマンドが使えます。
今回はsample-projectでアプリケーションを作っています。

以下のファイルが作成できたと思います。

docker-react-app
├── Dockerfile
├── docker-compose.yml
└── sample-project  
      ├── README.md  
      ├── package.json  
      ├── src  
      ├── node_modules
      ├── public
      └── yarn.lock

コンテナの起動と削除

ここまで来れば後は簡単です。
次のコマンドでコンテナを起動できます。

$ docker-compose up
...
Compiled successfully!
node_1  | 
node_1  | You can now view sample-project in the browser.
node_1  | 
node_1  |   Local:            http://localhost:3000/
node_1  |   On Your Network:  http://192.168.160.2:3000/
node_1  | 
node_1  | Note that the development build is not optimized.
node_1  | To create a production build, use yarn build.
node_1  | 

localhost:3000に接続して画面が表示されていれば成功です。

サーバーを停止した後に以下のコマンドでコンテナを停止できます。

$ docker-compose down

まとめ

今回はDockerでReactの開発環境を整える方法を紹介しました。

聞いたことあるけどどのように使えばよいかわからない方は、今回で使い方のイメージは掴んで頂けたのではないでしょうか。

この知識はReactの環境構築ではだけでなく、他のフレームワークを使いたいときにも必ず役立つはずです。
ぜひ皆さんがDockerを好きになってくれることを願っています。

React.jsに関する他の記事を見る↓↓

すすめ記事