DockerでReact+Typescript環境を作る

前置き

学校の自由課題的な物でDockerを学ぶことにしたのでアウトプット

現状知識不足で細かいところを詳しく説明できないのでご了承ください(_ _ )

対象者

Dockerに対して多少知識のある方
こちらの方の動画を見て内容を実装できれば大丈夫だと思います

環境

• MacOS 11.2.3
• VisualStudioCode
• Docker for mac
  • ダウンロードリンク(確かここ)

ディレクトリ構造

Docker-ts
　├ dockerfile
　└ docker-compose.yml

Dockerfile

FROM node:14-alpine3.13
WORKDIR /usr/src/app

LABEL description = "Dockerfile test for Typescript and React"

RUN npm install --save prop-types
RUN npm install -g create-react-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-project && yarn start"
        ports:
        - "3000:3000"

コンテナ立ち上げの流れ

ビルド

docker-compose build

ビルドでimageが作られたか確認

docker images

create-react-app Typescript

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

コンテナの立ち上げ

docker-compose up

ここでlocalhost:3000にアクセスすればReactのサンプルサイトが表示されていると思います

コンテナの停止

docker-compose down

最後に

チーム開発などでなければ実際にDockerを使って開発する機会は少ないのかなーと思いますが、実際に使う！ってなった時にすぐに馴染めるようにしたいなーと思います