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

はじめに

React+TypeScriptの環境構築をしている記事を参考にしてコンテナを作ってもtsc -vが not found だったので少しカスタマイズしてみました。GitHubで公開しているので気軽に使ってみて下さい。
Dockerfile, docker-compose.ymlを書くのは初めてだったため、うまく書けているか不安です。もし、改善すべき点や問題点があればコメントで教えてください。

処置方法

pathがうまく通っていない可能性も考えましたが、調べるのが面倒だったので、明示的にTypeScriptをインストールすることにしました。

ファイルの作成

dockerfile

FROM node:18.14.1-alpine3.17
WORKDIR /usr/src/app
RUN npm install -g typescript

docker-compose.yml

docker-compose.yml

version: '3'

services:
  front:
    build: ./
    container_name: front
    volumes:
      - ./:/usr/src/app
    ports:
      - '3000:3000'
    command: sh -c 'cd react-app && yarn start'
    tty: true
    environment:
      - CHOKIDAR_USEPOLLING=true

イメージの構築

Dockerイメージを構築するためのコマンドです。

docker-compose build

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

Dockerコンテナ内で、Reactアプリケーションを作成するためのコマンドです。
このコマンドでは、Reactアプリケーションを作成するためのツールであるcreate-react-appを使用して、react-appという名前のプロジェクトを作成します。また、TypeScriptのテンプレートを使用しています。

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

コンテナの作成と起動

Dockerコンテナを起動するためのコマンドです。
-dオプションを指定することで、バックグラウンドでコンテナを実行します。
これにより、Webアプリケーションが常に実行されるようになります。

docker-compose up -d

ローカルホストに接続

ここまでの手順が完了したら、Webブラウザを開いて「 http://localhost:3000/ 」にアクセスしてください。
以下のようにデフォルトのページが起動すれば環境構築完了です。

さいごに

今回はcreate-react-appを使いましたが、viteというツールの方がパフォーマンスが高いらしいですね。気が向いたらviteも使ってみようと思います。