DockerでReactとTypeScriptの開発環境構築の仕方

はじめに

この解説では既にローカル環境にてDocker DesktopがインストールされていてDockerをある程度理解している、操作できる前提で進めます。
エディターは使い慣れているもので良いと思います。私はvscodeで構築してみました。
Reactと相性抜群のTypeScriptで構築します。

参考にしたサイト

以下のサイトを参考にさせていただきました。

・Docker, React, TypeScriptを使用したプロジェクト作成
・Reactの開発環境をDockerで整えよう
・Create React App

ゴール

localhost:3000に接続して以下のReactページが表示されれば成功です。

構築手順

⒈ プロジェクトフォルダの作成
⒉ Dockerfileとdocker-compose.ymlの作成
⒊ ビルド
⒋ TypeScriptベースのReactアプリの作成
⒌ コンテナの実行

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

Desktopなどのわかりやすい場所にプロジェクトフォルダを作成する
この解説ではプロジェクトフォルダを「react-sample-app」とする

Desktop $ mkdir react-sample-app

⒉ Dockerfileとdocker-compose.ymlを作成

プロジェクトフォルダ「react-sample-app」の中に移動してDockerfileとdocker-compose.ymlを作成する、ファイルはviを使っても、エディタでファイル作成で作ってもどっちでもやり易い方でいいと思う。

Dockerfile

#　Dockerfileの作成

Desktop $ cd react-sample-app
react-sample-app $ vi Dockerfile

node.jsのバージョンを現時点で最新版に指定してます。

# Dockerfile

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

docker-compose.yml

# docker-compose.ymlの作成

Desktop $ cd react-sample-app
react-sample-app $ vi docker-compose.yml

# docker-compose.yml

version: '3'

services:
 node:
   build: .
   environment:
     - NODE_ENV=development
   volumes:
     - ./:/usr/src/app
   command: sh -c 'cd react-ts-app && yarn start'
   ports:
     - '3000:3000'
   tty: true3

⒊ ビルド

プロジェクトフォルダ「react-sample-app」内のDockerfileとdocker-compose.ymlが置かれているディレクトリにいることを確認してコマンドを実行する。

# react-sample-app フォルダ

react-sample-app $ ls
react-sample-app $ Dockerfile  docker-compose.yml

ビルドを実行
docker imageが作成される。

$ docker-compose build

⒋ TypeScriptベースのReactアプリの作成

同じくプロジェクトフォルダ内にいることを確認して以下のコマンドを実行する。
Create React Appにてコマンドの詳細な使用方法が解説されています。

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

実行し終わるとプロジェクトフォルダ内に新しく「react-ts-app」フォルダができていることが確認できます。

# react-sample-app フォルダ

react-sample-app $ ls
react-sample-app $ Dockerfile  docker-compose.yml  react-ts-app

⒌ コンテナの実行

プロジェクトフォルダ内にいることを確認してコンテナを実行します。

$ docker-compose up -d

コンテナが実行されているか以下のコマンドで確認してSTATUSがrunningになっていれば「localhost:3000」で接続できます。
もし、STATUSがexitedになっている場合は何かしらのエラーが発生してるか、Dockerを再起動、再構築してみると解決できるかもしれません。

$ docker-compose ps

コンテナの停止・削除

以下のコマンドでDockerを停止あるいは削除することができます。
イメージは残ります。

# コンテナの停止
$ docker-compose stop

# コンテナの停止と削除
$ docker-compose down

まとめ

まずは、DockerでReactとTypeScriptの開発環境を構築してみようということが本章でのゴールでした。
最適解は他にも沢山あると思いますので、今後とも勉強です。