Zenn
🌊

Docker を使って 0 からReact(TypeScript)の開発環境を構築する

2021/03/02に公開
Docker
React
TypeScript
tech

まえおき

やりたいことはタイトル通り。まっさらな状態からやっていく。調べてみると意外とまとめてある記事がなかったので、書き留めておく。
正直微妙だなと思う点もあるけど、誰かの参考になれば幸いです。

環境

Docker: 3.3.3

前提条件

  • Docker のインストール & セットアップ済み
  • プロジェクト・ディレクトリの作成

手順

  1. Dockerfile作成
  2. docker-compose.yml 作成
  3. docker-compose run --rm app sh -c 'npx create-react-app 任意のプロジェクト名 --template typescript && cp -RT 任意のプロジェクト名/. ./ && rm -rf 任意のプロジェクト名'
  4. Dockerfile, docker-compose.yml 修正
  5. port の変更 (任意)
  6. docker-compose build
  7. docker-compose up

1. Dockerfile 作成

事前に用意したディレクトリに Dockerfileを作成。内容は以下の通り。

Dockerfile
FROM node:16.3

ENV LANG=C.UTF-8
ENV APP=/app
RUN mkdir -p ${APP}
WORKDIR ${APP}

COPY . ${APP}

Tips

  • node の docker イメージはここから必要なバージョンを指定

2. docker-compose.yml 作成

続いてdocker-compose.ymlを作成する。内容は以下の通り

docker-compose.yml
version: '3'

services:
  app:
    build: .
    command: [yarn, start]
    ports:
      - '8080:8080'
    volumes:
      - .:/app:cached

Tips

  • servicesはとりあえずappにしたけど、これは一般的なのか自信ない。Railsだとwebにすることが多い気がするけど、React だとどうなんだろう。えらい人教えてください。

3. docker-compose run --rm app sh -c 'npx create-react-app 任意のプロジェクト名 --template typescript && cp -RT 任意のプロジェクト名/. ./ && rm -rf 任意のプロジェクト名'

コマンド例: docker-compose run --rm app sh -c 'npx create-react-app my-app --template typescript && cp -RT my-app/. ./ && rm -rf my-app'

Tips

  • 公式ドキュメント通り、TypeScriptを使いたい場合は、create-react-appのオプションに --template typescript をつける
  • npm じゃないのって思うけど、npxであってる。同じように思う人も多いのか、公式にも補足として書いてある。
  • 後から付け足したい場合は yarn add --dev typescript か npm install --save-dev typescript で出来るらしい。
  • create-react-app . が出来ればこんなコマンド打つ必要ないんだけど、出来なかったので苦肉の策。
  • cpコマンドを使うときに*を使うと隠しフォルダがコピーされないため、代わりに.を使う。

4. Dockerfile, docker-compose.yml 修正

node_modules は volume で管理したいので、以下のように Dockerfile, docker-compose.yml を以下のように更新する

Dockerfile
--- 省略 ---
WORKDIR ${APP}
# 以下 2行を追加
COPY package.json yarn.lock ${APP}/
RUN set -x && \
    apt-get update && \
    apt-get install -y nodejs yarn && \
    yarn install && \
    yarn cache clean && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

COPY . ${APP}
docker-compose.yml
--- 省略 ---
    volumes:
      - .:/app:cached
      - /app/node_modules # この一行を追加

Tips

  • /app/node_modules を追加しないと、コンテナ内の node_modules が空になるため起動しない。（参考記事）
  • 初期段階では package.json, yarn.lock がないためここで追加する
  • docker-compose.yml の追加部分は初期段階であってもいい。わかりやすくするために、あえてここで追加しているだけ。

5. portの変更（任意）

create-react-appでプロジェクトを作成した場合、デフォルトで3000番ポートが使用される。しかし自分の場合、バックエンドにRailsを使用しており、そちらですでに3000番ポート使用していため、ポート番号を変更する必要があった。この記事で書かれてるdocker-compose.yml を使うなら必要。

変更はpackage.json内のscriptを以下のようにすればいい。

package.json
--- 省略 ---
"scripts": {
    "start": "PORT=8080 react-scripts start", # PORT＝任意のポート番号 を追記
--- 省略 ---

Tips

  • docker-compose.yml 設定している ports: 配下の番号と、ここで設定するポート番号が一致しないと、http://localhost:ポート番号/ をブラウザで開いてもつながらない。

6. docker-compose build

7. docker-compose up

docker-compose up で起動。今回の場合だと http://localhost:8080/ （ポートの設定をしてなければ、http://localhost:3000）につなげばおなじみ(?) の React のデフォルト画面(?) が開かれる。

Tips

  • もし Error: Cannot find module '../scripts/start' のようなエラーが出たら、node_module フォルダを一回消して、その後 docker-compose run --rm yarn install。その後もう一度docker-compose up

まとめ

微妙だなと思うところはいくつかあるけど、とりあえず上記の方法で必要な環境は出来上がるはず。
今回のような記事が全然ないのだけど、需要がないのだろうか。。。？

参考資料

https://github.com/facebook/create-react-app
https://docs.docker.jp/compose/compose-file.html#service-configuration-reference
https://snowsystem.net/container/docker/docker-wsl-dev-env-react/
https://qiita.com/hasehiro0828/items/f4275c9a2175864c82e4
https://qiita.com/daikideal/items/ac36987dca0fa742e193

Discussion