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

#なぜこの記事を書いたのか

ReactとTypeScriptは相性が良いといわれており、この二つを組み合わせて開発する人も多いため、Dockerfile と docker-compose.ymlを一から作成して環境構築する方法を記事としてまとめておきたかった。

#環境構築完了（ゴール）の確認

この記事のゴールは以下のようにReactのページが起動すること。

#環境構築の手順

①Docker、nodeのインストール
②Dockerfile、docker-compose.ymlの作成
③ビルド
④TypeScriptで動くReactアプリの作成
⑤コンテナの実行

##①Docker、nodeのインストール

• Dockerのインストール
  https://www.docker.com

Dockerはコンテナ型の仮想環境。
Dockerをインストールして、Dockerの環境の中で開発をすることになる。

• nodeのインストール
  https://nodejs.org/ja/download/

Dockerで環境構築したり、ライブラリをインストールする為にnodeが必要になる。

##②Dockerfile、docker-compose.ymlの作成
docker-react-ts-app（プロジェクトフォルダ）
　└┬─ Dockerfile
　　└─ docker-compose.yml

上記のフォルダ構成を参考に、ファイルを作成する。

「docker-react-ts-app」というフォルダを作成し、その直下に「Dockerfile」「docker-compose.yml」という名称で新規ファイルを作成すればOK。

###Dockerfile

FROM node:14.17.5

ENV LANG=C.UTF-8
ENV TZ=Asia/Tokyo

WORKDIR /usr/src/app

• ターミナルで「node -v」を実行することでnodeのバージョンを確認できる。バージョンを「FROM node:○○.○○.○」という形で指定する。
• 「ENV LANG=C.UTF-8」は環境変数LANGにC.UTF-8を設定することを意味する。Cは最低限の英語表記を表す。日本語を指定する場合はja_JPだが文字化けを起こすことがある。（参考 https://eng-entrance.com/linux-localization-lang ）
• 「ENV TZ=Asia/Tokyo」はタイムゾーンをAsia/Tokyoに設定する。

###docker-compose.yml

docker-compose.yml

version: '3'

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

• version: '3' はdocker-composeで使用するバージョンを定義している。このバージョンによって、docker-compose.ymlの書き方が異なる。
• servicesはアプリケーションを動かすための各要素をネストさせて定義する。上記docker-compose.ymlの場合はfrontendというServiceを定義している。（参考 https://qiita.com/yuta-ushijima/items/d3d98177e1b28f736f04 ）
• commandは「docker-compose up -d」したとき、flontendディレクトリに移動してdevサーバーを起動する。
• ttyはコンテナが起動してすぐ終了してしまうのを防ぐ。

##③ビルド

「③ビルド」「④Reactアプリの作成」「⑤コンテナの実行」で実行する「docker-compose」コマンドは、Dockerfileが存在するディレクトリで実行する必要がある。ターミナルにて「cd docker-react-ts-app」を実行してディレクトリを移動しておく必要がある。

このコマンドを実行してビルドする。

docker-compose build

※buildコマンドはimageを作成する。コンテナは作成しない。

##④TypeScriptで動くReactアプリの作成

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

上記「①Docker、nodeのインストール」でnpmをインストールしていれば「npx create-react-app frontend --template typescript」が実行され、TypeScriptで動くReactアプリが作成される。生成されるファイルもjsxファイルではなくtsxファイルとなる。

##⑤コンテナの実行

docker-compose up -d

ここまで完了したらWebブラウザで「 http://localhost:3000 」へアクセスする。以下のようにReactのページが起動すれば環境構築完了となる。

#docker-compose upに失敗する場合
compose upやcompose downを繰り返していると、いくつもコンテナが立ち上がってしまい、docker-compose upに失敗することがあります。その場合は起動中のコンテナを停止したりするなどしてみてください。（参考 https://qiita.com/musatarosu/items/31d6293a93e75ca6073e ）

#参考

• Docker上にReact+TypeScriptの環境を構築

#Dockerで環境を構築する手順の記事

• Reactの環境構築
• React + TypeScriptの環境構築 👈今ここ