Docker + React + TypeScript の 環境構築方法

はじめに

DockerでReactとTypeScriptの環境構築を行ってみました。

Docker各種ファイル作成

１．Dockerfile

Dockerfile： Dockerコンテナのビルド時や起動時の作業を一つの設定ファイルにまとめたもの

プロジェクトフォルダを作成し、その中にDockerfileを作成し、内容を以下にする。

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

FROM： 元となるイメージ
　　　コロンの後にタグを指定
　　　タグなしの場合、latest(最新)が選択される。

WORKDIR： 命令を実行するディレクトリを指定

２．docker-compose.yml

docker-compose.yml： Dockerアプリケーションのためのツールで、
　　　　　　　　　　複数のコンテナを定義し実行するためのYAML（ヤムル）ファイル。
　　　　　　　　　　Docker-composeを使って、Dockerコンテナの起動や
　　　　　　　　　　コンテナ起動時の設定などを行うことができます。

プロジェクトフォルダの中にdocker-compose.ymlを作成し、内容を以下にする。

docker-compose.yml

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

version： docker-composeで使用するバージョンを定義する
　　　　バージョンによって,docker-compose.ymlの書き方が変わる

service： アプリケーションを動かすためのそれぞれの要素のこと
　　　　frontend(services名は自由に決めていい)はアプリケーションを動かす
　　　　一つの要素であると定義される。

build： イメージの構成をDockerfileに記述して、自動でビルドしてベースイメージに指定する。
　　　buildには、Dockerfileのファイルパスを指定する。
　　　今回は同一フォルダ内にDockerfileが存在するため　. 　となる。

environment： コンテナ内の環境変数を指定する。
　　　　　　　Node.jsのグローバル変数: 開発用途なのでdevelopmentを指定します。

volumes： コンテナにボリュームをマウントするときにマウントする設定ファイルのパスを指定する。
　　　　ホスト側でマウントするパスを指定するには、
　　　　「ホストのディレクトリパス：コンテナのディレクトリパス」を指定する。

command： コンテナ内で動かすコマンドを指定する。
　　　　今回はシェルスクリプトでtodo-reactフォルダに移動してyarn startコマンドを実行します。
　　　　yarn startコマンドは、
　　　　Reactアプリケーションを開始するために必要なすべての依存関係をインストールし
　　　　ローカルサーバーを起動します。

ports: コンテナが公開するポートは、portsで指定する。
　　　「ホストマシンのポート番号:コンテナのポート番号」で指定します。
　　　今回はホスト8000：コンテナ3000となります。

tty： 仮想端末を配置するコマンドで、コンテナが正常終了するのを防ぐことができます。
　　true時、コンテナが起動し続けるようになります。

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

以下のコマンドをターミナルで実行することでReactプロジェクトが出来上がります。

docker-compose run --rm frontend sh -c 'npx create-react-app プロジェクト名 --template typescript'

プロジェクト名は任意でOK（例　todo-react）
--template typescriptを付けることでtypeScriptが使えるようになります。

イメージの構築

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

docker-compose build

build コマンドは、イメージを構築します。コンテナは作成しません。

コンテナの作成と起動

docker-compose up –d

up コマンドは、キャッシュがある場合は
それを使ってイメージの構築から、コンテナの構築・起動まで行います。
-d　をつけることでバックグラウンドで実行します。

停止

docker-compose stop

ローカルホストに接続

コンテナが起動している状態で、Webブラウザを開いて「 http://localhost:8000/ 」にアクセスし
Reactの初期画面が表示されれば完了です。

今回はdocker-compose.yml内のportsでホスト8000：コンテナ3000で指定しているため
localhost:8000になります。

一括消去

docker-compose down

docker-composeで作られた、コンテナ、イメージ、ボリューム、ネットワーク
そして未定義コンテナ、全てを一括消去するコマンドです。

以上になります。

最後に

最後まで読んでいただきまして、ありがとうございました。