Reactの開発環境をDockerで構築（その1）

react docker 入門 環境構築 node.js

はじめに

業務でReactを使うことになったのでReactを学習しました。いろいろと忘れないうちにメモとして残しておきます。

今回は環境構築。 作った環境を他のPCでも簡単に動かせるようにDockerで環境構築を行います。

React概要

ReactはFacebook製のJavaScriptライブラリです。アーキテクチャとしてはMVCのVのみを担当します。

特徴として

  • コンポーネント指向
    • HTML,Javascript,CSSを機能単位にまとめて再利用可能にした部品を組み合わせてアプリを構築する。
  • 仮想DOM
    • Javascriptで直接DOM操作を行うとブラウザ側のオーバヘッドがあり遅い。これに対し仮想DOMはJavaScript オブジェクトでDOMと同じ構造のノードツリーを再現して、処理結果の最終的な差分だけを元のDOMに書き戻すようにする。これによりオーバヘッドが最小限に抑えられ速度が早くなる。
  • 単一方向データフロー
    • コンポーネント間のデータのやりとりを親 → 子への一方向のみとする考え方。これにより大規模なアプリでも構造をシンプルに保つことができる。

DockerによるReact開発環境構築

dockerのコマンドを使って試しに構築

Reactの開発環境を簡単に手に入れるため、Facebookが提供しているCLIツールの「create-react-app」を使います。 これはnode.js必要となるため、まずはDockerでnode.jsのコンテナを立ち上げます。

Docker Hub で node の公式イメージを探すと、タグが複数ありどれを使うか迷いましたが、今回はstretchベースのnode.js LTEバージョン(10.15.0)のslimを使用します。

https://hub.docker.com/_/node/

以下のコマンドでコンテナを起動しホストからbashを操作できるようにします。

$ docker run -it node:10.15.0-slim bash

次にコンテナ内で「create-react-app」を使ってReactの開発環境を作成します。 (create-react-appは1回しか使用しないのでグローバルインストールせずにnpxを使用して実行)

# コンテナ内
$ cd ~ 
$ npx create-react-app react-app
# いろいろ動いて...
Success! Created react-app at /app/react-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-app
  yarn start

Happy hacking!

となり、reactの環境が出来上がりました。

書いてある通り以下のコマンドを実行してみます。

$ cd react-app
$ yarn start

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.17.0.2:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

無事起動しました。

しかしこのままではホスト側のブラウザからはアクセスできません。さらにこのままではホスト側で好きなエディタを使い開発を行うこともできません。 そこで -p と -v 2つのオプションを追加してコンテナを立ち上げることにします。

起動しているコンテナに対し上記のオプションを指定はできないためもう一度作り直します。

# ホスト側
# 任意のディレクトリ移動後下記を実行
$ docker run -p 3000:3000 -v $PWD:/root -it node:10.15.0-slim bash
# コンテナ内
$ cd ~ 
$ npx create-react-app react-app
# 無事成功したら
$ cd react-app
$ yarn start
# ctrl+P,Qでコンテナを抜ける

-pオプションを付けたので、ホスト側のブラウザからlocalhost:3000にアクセスするとデフォルトで用意されたreactの画面が表示できます。 また、ホストとコンテナのディレクトリを-vオプションでマウントしたので、ホスト側でソースを変更することもできるようになりました。

今回はここまで。次回はこの内容の元に Docker Compose で開発環境を立ち上げられるようにしてみます。

続きの記事を書きました。 ko-sho.hatenablog.com