🍋

【Docker】React+TypeScriptのDocker環境を構築する

2022/09/27に公開約1,300字

①ディレクトリを作成

mkdir react_ts_app
cd react_ts_app

②各種設定ファイルを準備する

% touch {docker-compose.yml,Dockerfile}
Dockerfile
FROM node:17.4.0-alpine
WORKDIR /usr/src/app
docker-compose.yml
version: '3'
services:
  frontend:
    build: .
    # Node.jsのグローバル変数です。開発用途なのでdevelopmentを指定します。
    environment:
      - NODE_ENV=development
    volumes:
      - ./:/usr/src/app
    command: sh -c 'cd frontend && yarn start'
    ports:
      - 8000:3000
    tty: true

③イメージの構築

% docker-compose build

④React+TypeScriptでプロジェクトを作成

TypeScriptを指定して、create-react-appする

% docker-compose run --rm frontend sh -c 'npx create-react-app frontend --template typescript'

⑤コンテナの作成と起動

% docker-compose up -d

⑥ローカルホストに接続

http://localhost:8000/ にアクセスする

以下が表示されれば完了

ローカルで動かす

% docker-compose build
% docker-compose run --rm frontend yarn install
% docker-compose up -d

http://localhost:8000/ にアクセスする

環境

Apple M1 Pro
macOS BigSur 12.1
Docker Engine 20.10.12
Docker Compose 1.29.2
react 18.0.17
react-dom 18.0.6
typescript 4.7.4

参考

https://qiita.com/kashimuuuuu/items/b5f35057dfe1980d053a

https://zenn.dev/nishiharu/articles/9e6f0f488310ec

https://zenn.dev/mochiblock/articles/3af073ff13c6e2

Discussion

ログインするとコメントできます