Docker, React, TypeScriptを使用したプロジェクト作成

はじめに

Dockerを使用して、React, TypeScriptを使用するプロジェクトを作成したのでメモとして残しておきます。

使用しているのはMacbookです。

参考

こちらのサイトを参考にさせていただきました。
ほとんどこちらで書かれていることと同じことをしています。
Reactの開発環境をDockerで整えよう

相違点としては以下が挙げられます。

• TypeScriptを使用
• Dockerfile
  • node:8.16.0-alpine→node:13.5.0-alpine3.11
  • RUN npm install --save prop-typesを削除
  • RUN npm install -g create-react-appを削除
    • 詳細は後述しますが、npxで実行するようにしたので、Dockerfileからは削除しました
• docker-compose.yml
  • そのまま

やったこと

Dockerfile, docker-compose.ymlの作成

この作業を終えた後のディレクトリ構成は以下のようになります。

.
├── Dockerfile
└── docker-compose.yml

Dockerfileの作成

以下のようにします。

FROM node:13.5.0-alpine3.11
WORKDIR /usr/src/app

docker-compose.ymlの作成

以下のようにします。

version: '3'
services:
  node:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=production
    volumes:
    - ./:/usr/src/app
    command: sh -c "cd sample_app && yarn start"
    ports:
    - "3000:3000"
    

build, create-react-appの実行

この作業を終えた後のディレクトリ構成は以下のようになります

.
├── Dockerfile
├── docker-compose.yml
└── sample_app
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── public
    ├── src
    ├── tsconfig.json
    └── yarn.lock

buildの実行

docker-compose build

create-react-appの実行

ドキュメントを見たところ、npxを使用するのが推奨されているみたいなので、npxで実行するようにしました。

今回はTypeScriptを使用するので、templateとして指定しています。

docker-compose run --rm node sh -c 'npx create-react-app sample_app --template typescript'

アプリケーションの起動・停止

以下を実行するだけです

# 起動
docker-compose up
# 停止
docker-compose down

起動後
http://localhost:3000/
にアクセスすると、Edit src/App.tsx and save to reload.の画面が表示されているはずです。

ローカルのsrc/App.tsxを編集すると、即時反映されることも確認できます。

ESLint

以下のコマンドでedlintの設定を作成できます。

node_modules/.bin/eslint --init

まとめ

Dockerを使って、create-react-appでtypescriptのプロジェクトを簡単に作成することができました。