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

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

補足:Dockerの導入方法

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

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

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

それではまずはDockerfiledocker-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
意味
FROMコンテナのベースとなるDockerイメージ
WORKDIRコンテナ内の作業ディレクトリ
RUNビルド時に行われるコマンド

今回は軽量な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"
意味
versioncomposeのバージョン
services構築するサービス情報
builddocker-compose.ymlがあるディレクトリに対するDockerfileのディレクトリを指定
ttyコンテナを起動させ続けるかどうかの選択
environmentファイルから環境変数を追加
volumnローカルのディレクトリが接続(マウント)する作業ディレクトリを指定
commandコンテナ内で実行されるコマンド
ports外部に対して公開するポート番号

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に接続して画面が表示されていれば成功です。

react-server

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

$ docker-compose down

まとめ

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

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

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

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

Reactでのアプリ開発を学ぶなら

CodeShipでは、現状プログラミングスクールでも取り扱いの少ない「React.js」でのアプリ開発を修得する学習カリキュラムを設置。

どこよりも早く目をつけ長らく指導実績を積んできたCodeShipだからこそ可能な、ニーズにあったモダンなアプリ開発の指導とサポートがあります。

CodeShip卒業生のReact作品を見る

勉強目的ごとに用意された6つの学習コース&オリジナルのポートフォリオ開発実戦経験豊富な現役エンジニアキャリアコンサルタントがあなたの「開発スキル修得」と「キャリアプランニング」をサポート。

独学での挫折や未経験からでも、スタートアップベンチャーや日系・外資の大手WEB系企業まで幅広くエンジニアを輩出する教育実績を残しています。

さらに、期間内であれば選択した以外のコースのカリキュラムも無料で受講可能。
頑張った分だけ勉強できる「勉強し放題」はCodeShipだけ。

まずはご自身のプログラミング学習やキャリアプランについて、無料個別相談会にてお気軽にご相談ください。

参考文献・URL

創好リナのDocker入門講座

https://youtu.be/5d8O7jm7Q5c

What is a Container? A standardized unit of software

https://www.docker.com/resources/what-container

Wikipeida: Docker

https://ja.wikipedia.org/wiki/Docker

Reactの開発環境をDockerで構築してみた

https://blog.web.nifty.com/engineer/2714


おすすめ記事