Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Yuki-TU

docker-composeを用いてCreate React Appの環境を構築する

Last updated at Posted at 2021-03-06

概要

　Reactで新しいシングルページアプリケーションを作成したい場合、Facebook社が公式で公開しているCreate React Appを利用すると簡単にReactアプリケーションを作成することができます。シングルページアプリケーションとは、単一のWebページでコンテンツ切り替えを行うことで、ページ遷移の必要がなく、ブラウザの挙動に縛られないWeb表現を可能となります。
　今回は、crete-react-appの環境をDockerを使用した仮想環境上で構築します。Dockerを使用するメリットとして、以下2点があります。

  • 誰でも簡単に環境構築を行うことができる。（共同で開発をする場合非常に便利）
  • 仮想環境上にツール等（yarn etc）をインストールするため、自身パソコン環境を汚さずに環境を構築できる
    非常に便利なツールですので是非Dockerを使って環境構築をしましょう。

環境

WSL: version2
OS: ubuntu 18.04LTS
Docker: 20.10.3
Docker-compose: 1.28.5

目次

  1. [作業ディレクトリの作成](#1. 作業ディレクトリの作成)
  2. Dockerfile及びdocker-compose.ymlの作成
  3. Dockerimageを作成
  4. コンテナの起動
  5. コンテナ内に入り、create react appをインストール
  6. reactアプリケーションの起動
  7. docker-compose up -dでreactアプリが起動するように設定
  8. 最後に共同で開発するさいに

1. 作業ディレクトリの作成

　好きな名前のディレクトリを作成します。今回は例として、BulletinBoardというディレクトリを作成しました。

ターミナル
$ mkdir BulletinBoard
$ cd BulletinBoard

2. Dockerfile及びdocker-compose.ymlの作成

Dockerfileの作成

　Node.js公式イメージがあるdockerhubより必要なバージョンを指定し、ベースイメージをpullします。

Dockerfile
# docker-hubからベースのdocker imageをpull
FROM node:14.5.0-alpine

# コンテナ内で作業するディレクトリを指定
WORKDIR /usr/src/app/

docker-compose.ymlの作成

docker-compose.yml
# docker-composeのバージョン設定
version: "3"

services:
  # サービス名(任意)
  react:
    # ホスト側のディレクトリをコンテナ側のディレクトリにマウントする
    volumes:
      - ./app/:/usr/src/app/
    # Dockerfileの実行
    build:
      context: .
    # コンテナを起動させ続ける
    tty: true
    # コンテナ側とホスト側のポートの設定を行う
    ports:
      - 3000:3000

　reactはサービス名です。任意の文字列を指定できます。
　buildでは、Dockerfileを実行させます。context: .よりdocker-compose.ymlと同じディレクトリからDockerfileを自動で認識し、実行します。
　tty: trueは、コンテナを起動させ続ける設定です。Dockerfileを見ると、ベースイメージを持ってきて、作業ディレクトリを指定しているだけなので、通常はコンテナを立ち上げても、すぐに終了します。tty: trueを指定することでコンテナを起動させ続けることができます。コンテナ内に入ってコマンドを打つために、コンテナを起動させ続ける必要があります。

3. Docker imageを作成

　$ docker-compose buildを実行し、docker-compose.yml,Dockerfileに従いDockerイメージを作成します。ERRORが無ければ成功。

ターミナル
$ docker-compose build
Building react
[+] Building 2.6s (6/6) FINISHED
 => [internal] load build definition from Dockerfile                                                                                                                                                                                    0.0s
 => => transferring dockerfile: 38B                                                                                                                                                                                                     0.0s
 => [internal] load .dockerignore                                                                                                                                                                                                       0.0s
 => => transferring context: 2B                                                                                                                                                                                                         0.0s
 => [internal] load metadata for docker.io/library/node:14.5.0-alpine                                                                                                                                                                   2.5s
 => [1/2] FROM docker.io/library/node:14.5.0-alpine@sha256:62c88cec4f64ee289824b257eb775fc24ed490eb6ce1be71884c1cceb6c51c5a                                                                                                             0.0s
 => CACHED [2/2] WORKDIR /usr/src/app/                                                                                                                                                                                                  0.0s
 => exporting to image                                                                                                                                                                                                                  0.0s
 => => exporting layers                                                                                                                                                                                                                 0.0s
 => => writing image sha256:fea6ac55de3b77d31e6f5d17896bb494c756b4f20b351b4199d424740b2ff582                                                                                                                                            0.0s
 => => naming to docker.io/library/bulletinboard_react                                                                                                                                                                                  0.0s
Successfully built fea6ac55de3b77d31e6f5d17896bb494c756b4f20b351b4199d424740b2ff582

4. コンテナの起動

　$ docker-compose up -dを実行し、コンテナを立ち上げる。$ docker-compose psを実行し、StatusがUpになっていれば成功。

ターミナル
$ docker-compose up -d
Starting bulletinboard_react_1 ... done 
$ docker-compose ps
        Name                     Command            State           Ports
----------------------------------------------------------------------------------
bulletinboard_react_1   docker-entrypoint.sh node   Up      0.0.0.0:3000->3000/tcp

5. コンテナ内に入り、create react appをインストール

　$ docker-compose exec [サービス名] shでコンテナ内に入り、コマンドラインを実行できるようになります。環境によっては、shのところをbashに変更する必要があります。コンテナ内では、コマンドラインの受付は$ではなく#になります。

ターミナル
$ docker-compose exec react sh
/usr/src/app #

　npx create-react-app --template typescript bulletinboardのコマンドをコンテナ内で実行することで、create react appをインストールすることができます。
--template typescriptのオプションを指定することでtypescriptが使えるプロジェクトを生成します。
最後のbulletinboardはプロジェクト名を表しており、大文字は使えないと怒られたので小文字を使用します。この名前のディレクトリが生成され、その中にreact appがインストールされます。

コンテナ内ターミナル
# npx create-react-app --template typescript bulletinboard
npx: installed 67 in 5.416s

Creating a new React app in /usr/src/app/bulletinboard.

~~~省略~~~

  cd bulletinboard
  yarn start

Happy hacking!

※コンテナ内のコマンドラインはホストと区別するため#とする。

　インストールが成功すると、ホスト側のDockerfileやdocker-compose.ymlを配置しているディレクトリを見てみてください。
app/bulletinboardのプロジェクトディレクトリができていることが確認できます。react appのファイルを編集する際はこのディレクトリより編集が可能となります。このディレクトリはコンテナ側にマウントされているため、編集内容はコンテナ側にも反映されるます。

　次に、プロジェクトディレクトリ内に.envファイルを作成し、以下を記述してください。これはcreate react appのhotreload機能をオンにするための記述です。hotreloadとは、ファイルの記述を変更すると即座にブラウザー側に反映される機能です。

.env
# hotreloadをonにする
CHOKIDAR_USEPOLLING=true

　この時点で、プロジェクトファイル内は以下のようになっていると思います。
image.png

6. reactアプリケーションの起動

　コンテナ内ターミナルで、プロジェクトディレクトリに移動し、# yarn startを実行することでreactアプリケーションを起動することができます。

コンテナ内ターミナル
# cd bulletinboard
# yarn start
Compiled successfully!

You can now view bulletinboard in the browser.

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

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

　http://localhost:3000にアクセスすると以下の画面の表示されたら成功です。
hotreload機能をonにしているため、ファイルを変更し、ブラウザーをリロードするとすぐに反映されることがわかります。
image.png

　これで、reactアプリ開発を行うことができるのですが、毎回$ docker-compose up -d、$ docker-compose exec react sh、# cd bulletinboard、# yarn startをするのは大変です。次に、$ docker-compose up -dだけで、コンテナが立ち上がるように設定をしていきます。

7. docker-compose up -dでreactアプリが起動するように設定

　Dockerfile、docker-compose.ymlを以下のように書き変えます。

Dockerfile
# docker-hubからベースのdocker imageをpull
FROM node:14.5.0-alpine

# コンテナ内で作業するディレクトリを指定
WORKDIR /usr/src/app/bulletinboard

# ファイルを全部作業用ディレクトリにコピー
COPY ./app/bulletinboard .

# パッケージをインストール
RUN yarn install

# コンテナを起動する際に実行されるコマンド
CMD[ "yarn", "start" ]
docker-compose.yml
version: "3"
services:
  react:
    build:
      context: .
    tty: true
    volumes:
      - ./app/:/usr/src/app/
      # ↓ここを追加
      - /usr/src/app/bulletinboard/node_modules
    ports:
      - 3000:3000

　Dockerfileに記述されているWORKDIRのパスが変更されています。
　Dockerfileに記述されている以下の記述は、ホスト側のディレクトリをコンテナ側にコピーし、パッケージをインストールするコマンドです。各種モジュールはプロジェクト内のnode_modules下にインストールされていますが、通常はgitで管理しません。これは、容量が大きいことが理由である。yarn installで、なんのモジュールがインストールされているのかが記述されているpackage.jsonを参照して、必要なモジュールをインストールします。今は、作成者は、5. コンテナ内に入り、create react appをインストールでモジュールはインストールされているので、作成者自身、この記述は意味がないですが、これから共同で開発する際に、この記述によりモジュールをインストールすることができます。
　最後の記述のENTRYPOINT [ "yarn", "start" ]は、コンテナを立ち上げた際に、実行するコマンドとなっております。つまり、コンテナを起動した後に、コンテナ内で$ yarn startが実行されるという事です。

# ファイルを全部作業用ディレクトリにコピー
COPY ./app/bulletinboard .

# パッケージをインストール
RUN yarn install

　docker-compose.ymlの以下の記述は、node_modulesをvolume管理下にする記述です。$ docker-compose buildでnode_modulesがインストールされ、そのあとにホスト側のディレクトリがコンテナ側にマウントされます。その際、ホスト側ではnode_modeulesがインストールされていないため上書きされてコンテナ内のnode_modulesが消得ます。それを防ぐために記述します。

docker-compose.yml
    volumes:
      - /usr/src/app/bulletinboard/node_modules

　これでホスト側のターミナルで以下のコマンドを実行してください。
これは、イメージを作成し、コンテナを起動を一つのコマンドにまとめたものです。

ターミナル
$ docker-compose up -d --build

これで、http://localhost:3000へアクセスすることができると思います。
2回目以降は、以下のコマンドでreactアプリケーションが起動します！

ターミナル
$ docker-compose up -d

8. 最後に共同で開発する際に

　共同でアプリ開発をしてもらう際は、github等に管理しておき、各ローカル環境に落としてきて、$ docker-compose up -d --buildとコマンド叩くだけなので、環境構築が非常に簡単になると思います。
　間違っている個所があれば、コメント等よろしくお願いします。

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?