0から Docker + React + TypeScriptの開発環境を構築する

3 min read読了の目安(約3500字

まえおき

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

環境

Docker: 3.1.0

事前準備

  • dockerのインストール
  • プロジェクト・ディレクトリの作成

手順

  1. Dockerfile作成
  2. docker-compose.yml 作成
  3. docker-compose build
  4. docker-compose run --rm app npx create-react-app プロジェクト名 --template typescript
  5. cp create-react-appで指定したプロジェクト名/. . && rm -r create-react-appで指定したプロジェクト名
  6. .gitignoreを編集
  7. portの変更 (任意)
  8. docker-compose up

1. Dockerfile 作成

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

Dockerfile
FROM node:15.10-alpine3.13

ENV APP=/app
RUN mkdir -p ${APP}

WORKDIR ${APP}

Tips

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 build

docker-compose buildするだけ

4. docker-compose run --rm app npx create-react-app プロジェクト名 --template typescript

docker-compose buildが無事終わったら。タイトル通りのコマンドを叩く

Tips

  • 公式ドキュメント通り、TypeScriptを使いたい場合は、create-react-appのオプションに --template typescript をつける
  • npm じゃないのって思うけど、npxであってる。同じように思う人も多いのか、公式にも補足として書いてある。
  • 本当はcreate-react-app . みたいに実行した場所に展開してほしんだけど、出来ないみたい。これが出来れば次のコマンドは打たなくていいんだけど、もしやり方知ってる人いたら教えてください。
  • 後から付け足したい場合は yarn add --dev typescriptnpm install --save-dev typescript で出来るらしい。

5. cp -r create-react-appで指定したプロジェクト名/. . && rm -r create-react-appで指定したプロジェクト名

create-react-app . が出来ればこんなコマンド打つ必要ないんだけど、出来なかったので苦肉の策。

Tipes

  • cpコマンドを使うときに*を使うと隠しフォルダがコピーされないため、代わりに.を使う。

6. .gitignoreを編集

これを

.gitignore
/node_modules
--- 以下省略

以下のように変更

.gitignore
node_modules
--- 以下省略

これをしないと動かないわけじゃないけど、しておいて方がいいと思う。

7. 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:ポート番号/ をブラウザで開いてもつながらない。

8. 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 npm install。その後もう一度docker-compose up

まとめ

create-react-app した後に作ったプロジェクトを移動させたり、.gitignoreを編集したりするなど、微妙だなという点はある。この辺りもっとスマートにやるやり方あればコメントください。
今回のような記事が全然なかったのだけど、需要がないのだろうか。。。?

参考資料

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