DockerでReact, TypeScript環境を構築する

事前準備

Docker Desktop をダウンロードしておく。
ダウンロードしたら、起動しておく。

手順

1. 任意の場所にプロジェクトフォルダを作成する
2. 作成したプロジェクトフォルダ内に以下の2つのファイルを作成する
   • Dockerfile
   • docoker-compose.yml
3. Dockerfile, docker-compose.yaml に記述する
4. ターミナルでコマンドを実行し、Reactアプリを作成する

以下順番に解説していきます。

プロジェクトフォルダの作成

任意の場所で以下のコマンドを実行し、プロジェクトフォルダを作成する。
今回は my-news-app としました。

mkdir my-news-app
cd my-news-app

プロジェクトフォルダに移動したら、以下のコマンドを実行し、Docker 関連のフォルダを作成する。

touch Dockerfile
touch docker-compose.yml

画像のような構成になっていればOKです。

Dockerfile, docker-compose.yaml への記述

Dockerfile

FROM node:18.12.1-alpine
WORKDIR /usr/src/app

バージョンは、現時点での推奨である 18.12.1 を使用します。
推奨版の確認は node公式 をご確認ください。

docker-compose.yaml

version: '3'

services:
  node:
    build: .
    volumes:
      - ./:/usr/src/app
    command: sh -c 'cd react-app && yarn start'
    ports:
      - '3000:3000'

command:のreact-appですが、これはのちに React アプリを作成する際に指定したアプリ名となります。

作成したら以下のコマンドを実行します。

docker-compose build

React, TypeScript アプリの作成

ターミナルで以下のコマンドを実行してください。
react-appの部分をご自身のプロジェクトの名前に置き換えてください。

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

React アプリが作成されると、以下のようなディレクトリ構成となるはずです。

React アプリが作成されたことを確認したのち、以下のコマンドを実行する。

docker-compose up -d

コンテナが起動します。
http://localhost:3000 にアクセスし、以下の画面が表示されれば、環境構築完了です。

お疲れ様でした。