Docker TypeScript で React 環境を構築

自分用のmemoのつもりで
Dockerで環境構築
Dockerはinstall済み

■Dockerfile作成
空のPJディレクトリ内にDokerfile作成し以下を記載

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

FROMは新しいイメージの元となるイメージの読み込み
alpineというのでめちゃくちゃファイルサイズを小さくできるらしい

■docker-compose.yml作成
※ymlは「yaml ain't markup language」の略で構造化データの表現方法
※簡単に言えば設定ファイル

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

■イメージをビルド

docker-compose build

■React と create-react-app をインストール + アプリ作成

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

出来上がるディレクトリ 構成

- Dockerfile
- docker-compose.yml
- アプリ名
    |- node_module
    |- public
    |- src

■起動

docker-compose up -d

※ローカルでyarn startする時よりも時間がかかる感覚はある

Localhost:3000でApp.jsの中身が表示される

■停止

docker-compose stop