DockerでラクラクReact環境構築！ #Docker

はじめに

これは『React環境構築の際にイチイチ調べ直すのがめんどくさい』と、自分向けにメモった記事です。
オレオレ記事ですが、ラクラクなので、是非参考にして頂ければと思います。

1. GitHubリポジトリを用意

リポジトリを作成してクローンしてきましょう。

$ git clone git@github.com:ユーザ名/リポジトリ.git

2. .gitignoreを先に作成

gitignoreファイルは一つにまとめたいので、先に作成して、自動で作られるものは削除しています。
アプリのルートディレクトリに以下の.gitignoreファイルを作成。

.gitignore

# dependencies
node_modules/
.pnp/
.pnp.js

# testing
coverage/

# production
build/

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

3. dockerfileの作成

アプリのルートディレクトリに以下のdockerfileファイルを作成。

dockerfile

FROM node:12.17.0

RUN mkdir build
WORKDIR /build

4. dockerfileのbuildとrun!

dockerのイメージ作成とcreate-react-appを行っていきます。

$ docker build -t node:build .
$ docker run --rm -it -v "$PWD":/build node:build npx create-react-app my-app(←アプリ名はご自由に。)

まず1行目ではdockerのイメージ作成とタグ付け、カレントディレクトリを指定しています。
2行目ではVolumeの設定でホスト側のディレクトリからコンテナ側にマウントを取ります。(これによって変更が有効になる)
次にイメージとタグを指定して、最後にnpx create-react-appのコマンドを実行しています。

これでmy-app下に色々生成されていたら成功です！

5. `docker-compose.yml`と`Makefile`を作成

またアプリのルートディレクトリ下でdocker-compose.ymlとMakefileを以下のように作成します

docker-compose.yml

version: "3.3"
services:
  react:
    image: node:12.17.0
    working_dir: /code
    volumes:
      - ./my-app:/code
    ports:
      - 3000:3000
    environment: 
      - NODE_ENV=production
    container_name: container_name # ←コンテナ名はご自由に。

Makefile

library := ""

start:
    docker-compose run --rm react yarn start

add:
    docker-compose run --rm react yarn add $(library)

6. ローカルでサーバを立ち上げる！

以下のようにmake startを実行してください

$ make start

make startはdocker-compose run --rm react yarn startを実行していて、記述をMakefileにて短縮しています。
ローカルでサーバーが立ち上がって、Reactマークがくるくる回っていたら成功です！！

+α 新しくパッケージをインストールしたい時

本当はdocker-compose run --rm react yarn startを実行しています。

# 使用例
$ make add library=redux

さいごに

まだまだ初心者なので、『もっとこうやって作成したら良いよ！』などなどアドバイスをご教授頂けたら、超喜びますm(_ _)m

※ご教授して頂けた方、とても良い感じになりました！ありがとうございます！

DockerでラクラクReact環境構築！