Dcokerとdocker-composeでReact+Typescript環境を作るメモ

mkdir -p front

を作りfrontの下にDockerfile

FROM node:16-alpine
WORKDIR /usr/src

を作る

k8shiro

docker-compose.ymlを

version: '3'

services:
  front:
    build: ./front
    volumes:
      - ./front/src/app:/usr/src/app
    command: ash -c "cd app && yarn start"
    ports:
      - "3000:3000"

で作る。
この時appはcreate-react-app appのappなので別の名前にしたい時は全部置換する

k8shiro

docker compose run --rm front sh -c "yarn global add create-react-app && create-react-app app --template typescript"

で create-react-appを入れる(--template typescript でTypescriptも入れてる)

k8shiro

docker compose up -d
docker compose logs -f

でReact Appが起動する

k8shiro

このアプリをGit管理する場合、新しくcloneしてきた場合front/src/app/.gitignoreでfront/src/app/node_modulesが含まれていないのでcloneしてきた最初に、

docker-compose run --rm front sh -c "cd app && yarn install"

でpackage.jsonのパッケージをインストールする

k8shiro

パッケージを追加する場合
antdを追加するなら

docker-compose run --rm front sh -c "cd app && yarn add antd"

とする。