DockerでReactの開発環境を作成してみる
前回、Reactの開発で「CodeSandBox」というオンラインエディタを使用していました。今回はDockerでReactの開発環境を作成してみます。
- 1. 作業ディレクトリ
- 2. Dockerfileの準備
- 3. docker-compose.ymlの作成
- 4. Dockerイメージのビルド
- 5. Create React App
- 6. コンテナの起動&Reactの実行
- 7. まとめ
- 参考
1. 作業ディレクトリ
今回は下記のようなディレクトリ構成を準備します。
react-app
├─ docker-compose.yml
└─ docker
└─ Dockerfile_node
2. Dockerfileの準備
Reactの開発環境にはNode.jsというサーバーサイドのJavaScript環境が必要らしいので、DockerイメージにはNode.jsの公式イメージを使用します。
今回は、「Dockerfile_node」というファイル名でDockerfileを作成します。
FROM node:13.2.0-stretch WORKDIR /usr/src/app
作業ディレクトリとして「/usr/src/app」を指定しておきます。
3. docker-compose.ymlの作成
Docker Composeは複数のコンテナをまとめて管理するためのツールです。コンテナの構成情報は「docker-compose.yml」というファイルに定義します。
今回は、コンテナはNode.jsの１つしか管理しませんが、ホストとコンテナのディレクトリ共有や、Reactの実行コマンドをまとめて管理するために「docker-compose.yml」ファイルを使用します。
version: "3.3"
services:
node:
build:
context: ./docker
dockerfile: Dockerfile_node
environment:
- NODE_ENV=development
volumes:
- ./:/usr/src/app
command: sh -c "cd react-sample && yarn start"
ports:
- "3000:3000"
version
ファイル先頭はDocker Composeのバージョンになります。
services
今回は「node」という1つのサービスのみを定義しています。
build
Dockerfileにイメージの構成を記述して、それをベースイメージに指定するときはbuildにDockerfileの情報を記述します。
contextは、Dockerfileがあるディレクトリのパスを指定しています。
dockerfileで、DockerFileのファイル名を指定します。
environment
コンテナ内の環境変数を指定します。
NODE_ENVは、実行する環境の指定ができます。「development」は開発環境であることを明記しています。
volumes
コンテナにボリュームをマウントするときに指定します。
今回は「docker-compose.yml」ファイルが存在するディレクトリに、コンテナ内の「/usr/src/app」ディレクトリをマウントします。
command
コンテナ内で実行するコマンドを指定します。
ports
コンテナが外部に対して公開するポートを指定します。
4. Dockerイメージのビルド
「docker-compose.yml」ファイルが配置されているディレクトリで、Dokcerイメージをビルドします。
docker-compose build
ビルドコマンドの実行結果は下記です。
Building node Step 1/2 : FROM node:13.2.0-stretch 13.2.0-stretch: Pulling from library/node 844c33c7e6ea: Pull complete ada5d61ae65d: Pull complete f8427fdf4292: Pull complete f025bafc4ab8: Pull complete 7a9577c07934: Pull complete 9b4289f800f5: Pull complete e5b5cb6034b3: Pull complete 77980c72a787: Pull complete 7c5d27382edd: Pull complete Digest: sha256:ead25ba89fdbace5701281b1f8c35c317ed09d10ba30fcd01ded881406b84e7f Status: Downloaded newer image for node:13.2.0-stretch ---> 760e12e87878 Step 2/2 : WORKDIR /usr/src/app ---> Running in 38caf6505065 Removing intermediate container 38caf6505065 ---> 51727fdae0a7 Successfully built 51727fdae0a7 Successfully tagged react-app_node:latest
Dockerイメージのダウンロードと作業ディレクトリの指定が実行されます。
5. Create React App
Reactの開発環境のセットアップには「Create React App 」というものを使用するのが良いらしいです。
なので、以下のコマンドでCreate React Appのインストールと、開発用プロジェクトの作成を行います。
docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample"
コマンドを実行すると、インストールとプロジェクトの作成に数分かかります。
完了すると、「react-sample」というプロジェクトが作成されていることが確認できました。
6. コンテナの起動&Reactの実行
以下のコマンドで、「docker-compose.yml」をもとに、コンテナの起動が行われます。さらに、「docker-compose.yml」ファイルのcommandに記述されているコマンドにより、Reactが実行されます。
docker-compose up
コマンドの実行結果は下記です。
Recreating react-app_node_1 ... done Attaching to react-app_node_1 node_1 | yarn run v1.19.1 node_1 | $ react-scripts start node_1 | Starting the development server... node_1 | node_1 | Compiled successfully! node_1 | node_1 | You can now view react-sample in the browser. node_1 | node_1 | Local: http://localhost:3000/ node_1 | On Your Network: http://172.18.0.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 |
Reactが起動したので、ブラウザで「http://localhost:3000/」にアクセスしてみます。
すると下記のようなサンプルのビューが表示されれば成功です。
7. まとめ
Reactの開発環境をDockerで構築してみました。今回は構築だけなので、次回、勉強会で作成したプログラムを今回構築した開発環境で動かしてみようと思います。
