DockerでReact・TypeScript環境を構築する方法(ハンズオン講座)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、DockerでReact・TypeScript環境を構築する方法について解説していきます。

1 DockerでReact・TypeScript環境を構築する方法(ハンズオン講座)
2 Dockerの学習・参考書
3 参考・引用
4 最近の投稿

DockerでReact・TypeScript環境を構築する方法(ハンズオン講座)

プロジェクトでDocker上でReact・TypeScriptを使用していますが、ゼロイチでDockerでReact・TypeScript環境を構築したことがなかったので、調べながら環境構築の方法をまとめておきました。

Dockerについて学習中なので、Dockerに関して細かく説明を記載してありますが、ご了承ください。

プロジェクト・ディレクトリの作成と移動

まずは、次のコマンドでプロジェクト・ディレクトリの作成と移動をします。

プロジェクト・ディレクトリ名は、自由に決めてください。

mkdir プロジェクト名 && cd プロジェクト名

Dockerfileを作成する

Dockerfileは、Dockerイメージをビルドするための設定ファイルです。

次のコマンドで、Dockerfileを作成して開きます。

touch Dockerfile && open Dockerfile

openしたDockerfileの内容は、次の内容をコピペしてください。

ただし、使用するバージョンは node公式の推奨版をご確認ください。

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

このDockerfileはNode.jsアプリケーションを実行するためのDockerイメージを作成するためのものであり、

Node.jsのランタイム環境を提供し、/usr/src/app ディレクトリにアプリケーションファイルをコピーするように指定しています。

FROM コマンドは、ビルドするDockerイメージのベースとなるイメージを指定しています。
WORKDIR コマンドは、コンテナ内で作業するディレクトリを /usr/src/app に設定しています。
- WORKDIRで指定されたPathは、イメージ内でアプリケーションを実行するためのディレクトリとして使用されます。
- 以降のRUNやCOPYコマンドで指定されたファイルやディレクトリは、このディレクトリ内にコピーされるようになります。

docker-compose.yml を作成する

docker-compose.yml は、Docker Composeを使用して、複数のDockerコンテナを定義し、それらを構成・連携するための設定ファイルです。

次のコマンドで、docker-compose.ymlを作成して開きます。

touch docker-compose.yml && open docker-compose.yml

openしたdocker-compose.ymlの内容は、次の内容をコピペしてください。

YAMLファイルは、JSONと違いコメントができるので、コメントを細かく記しています。

# versionは、3系
version: '3'
# Serviceを設定する
services:
  # Service名は、自由に決めていい
  frontend:
    # DockerfileまでのPath
    build: .
    # 環境変数を定義する
    environment:
      # Node.jsのグローバル変数: 開発用途なのでdevelopmentを指定
      - NODE_ENV=development
    # ホストマシン:コンテナ => ファイルを共有するための設定
    volumes:
      - ./:/usr/src/app
    # Dockerコンテナ内で実行されるコマンドを指定する
    command: sh -c 'cd frontend && yarn start'
    # ホストマシンPort番号:コンテナのPost番号
    ports:
      - 8000:3000
    # CLI画面の操作をできるようにする
    tty: true

今回のdocker-compose.yml の内容を解説します。

version は、Docker Composeのバージョンを指定しています。
services は、構築するサービスを動かすための各要素をネストさせて定義します。
- 最初にサービス名を定義して、続けて設定内容を記述していきます。
build コマンドは、Dockerfileを使用してイメージをビルドするためのPath設定を行います。
- . は、Dockerfileがあるディレクトリ(Path)を指定しています。
- 今回の場合、Docker Composeは現在のディレクトリのDockerfileを使用してイメージを構築します。
environment コマンドは、環境変数を定義するために使用されます。
- NODE_ENV を development に設定しています。
volumes コマンドは、ホストマシンとDockerコンテナの間でファイルを共有するために使用されます。
- ホストマシンのカレントディレクトリを、Dockerコンテナの /usr/src/app ディレクトリにマウントしています。
command コマンドは、Dockerコンテナ内で実行されるコマンドを指定します。
- sh コマンドを使用して、frontendディレクトリに移動し、yarn start を実行してアプリケーションを起動しています。
ports コマンドは、Dockerコンテナとホストマシンのポートをマッピングするために使用されます。
- 今回は、ホストマシンの8000番ポートをDockerコンテナの3000番ポートにマッピングしています。
tty コマンドは、Dockerコンテナ内でTTYを有効にするために使用されます。
- 最後の行のTTYを有効にすることで、CLIの標準入出力がLockされずに機能して、コンテナ内でコマンドが実行できるようになります。

(余談) Dockerの ttyコマンドとは？

Dockerの tty コマンドは、コンテナ内のTTY（テレタイプ）デバイスを有効にするためのコマンドです。

TTYは、コンピューターとユーザーの間で通信を行うための古典的な手段の1つであり、コンピューターからの出力を受信し、ユーザーからの入力を送信することができます。

Dockerコンテナ内でTTYを有効にすることで、コンテナ内でのコマンドの実行時に、標準入出力のコマンドライン画面が、Lockされずに使用することができます。

コンテナ内で docker run コマンドを実行した際に、コンテナ内のターミナルでコマンドを実行することができます。

docker-composeでDockerfileからimageをビルドする

docker-compose buildコマンドは、Dockerファイルから imageを作成してくれるコマンドです。

コンテナは作成しないので、注意です。

docker-compose build

このコマンドを実行すると、Dockerfileに従って各サービスのDockerイメージがビルドされ、イメージ名とタグ名が作成されます。

docker image ls で、buildされたimageを確認すると次のとおりです。

insta_word_cloud_app % docker image ls
REPOSITORY                         TAG       IMAGE ID       CREATED         SIZE
insta_word_cloud_app-frontend      latest    32f9a111b134   6 seconds ago   173MB

React・TypeScriptのAppテンプレートを作成する

次のコマンドで、frontend サービス内でReact・TypeScriptのAppを作成するために必要なコマンドをDocker コンテナ内で実行させます。

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

上記のコマンドでは、Docker Composeによって定義された frontend サービス内で、一時的なコンテナを起動して、その中で指定されたコマンドを実行しています。

詳細な説明は、次のとおりです。

docker-compose run コマンドを使用して、frontend サービスを実行。
--rm オプションで、コマンドの実行が終了したらコンテナを自動的に削除されるように設定。
sh -c で、実行するコマンドを指定する。
npx create-react-app frontend --template typescript は一時的なコンテナ内で実行されるコマンドです。
- このコマンドは、React・TypeScriptのAppを作成するために使用されます。

Docker コンテナを実行する

次のコマンドで、Docker Composeファイルに定義されたサービスをバックグラウンドで起動できます。

docker-compose up -d

docker-compose up -d コマンドは、Docker Composeファイルに定義されたサービスをバックグラウンドで起動するために使用されます。

このコマンドを実行すると、Docker Composeファイルに定義されたすべてのサービスが起動し、Dockerイメージが必要に応じて自動的にダウンロードされます。

またdocker-compose down コマンドを使用して、すべてのコンテナを停止し、削除することができます。

docker-compose down

最終的な動作確認

Dockerコンテナの起動状況はdocker container psで確認できます。

localhost: 8000 から Containerの3000番Portにコネクションがあることがわかります。

docker container ps 
CONTAINER ID   IMAGE                           COMMAND                  CREATED          STATUS          PORTS                               NAMES
ba6f52ee8084   insta_word_cloud_app-frontend   "docker-entrypoint.s…"   7 seconds ago    Up 5 seconds    0.0.0.0:8000->3000/tcp              insta_word_cloud_app-frontend-1

今回は http://localhost:8000/ にアクセスして、次のようなReactAppが立ち上がっていれば成功です。