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

今回はそんな疑問に回答します。

内容はこちらのQiita記事と全く同じです。

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

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

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

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のページが起動すれば環境構築完了となる。