【初心者向け】Docker ComposeでReact・TypeScriptの環境構築をする方法【2026年最新版】

今回の記事では、DockerとDocker Composeを用いてReact・TypeScriptの環境構築の手順を解説していきます。最終的に、create-react-routerを用いてチュートリアルでよく見る画面(ページ)を作成し、ブラウザからページが見れることを確認します。

この記事では、メソッドや語句の説明などの細かい知識は説明しません。

DockerやDocker Compose、React・TypeScriptの各手順については、詳しい解説記事へのリンクを適宜掲載しています。

【用語の定義】

アプリケーション: ここでは、投稿サービスやSNSサービスなどのWebサービス、Docker Desktop for Mac等のデスクトップアプリの呼び方を「アプリケーション」に統一します。

※サンプルコード先頭の「$」はここから右側はコマンドだよ！という目印です。「$」以降のコードをターミナルで実行してください。

目次非表示

1. 今回使用する開発環境/バージョン
2. Docker Desktop for Macをインストールする
3. Docker環境を構築するためのフォルダを用意する
- 3.1 ターミナルでDesktopに移動する
- 3.2 GitとGitHubで管理するためのフォルダを作成する
4. GitHubで新しいリポジトリを作成する
5. GitHubからリポジトリをcloneし、Gitで管理できるようにする
- 5.1 新しく作成したリポジトリのclone用コードを取得する
- 5.2 自身のパソコンにGitHubリポジトリをcloneする
6. Dockerfileを作成する
7. docker-compose.ymlを作成する
8. create-react-routerでアプリケーションを作成する
9. Docker環境を構築し、作成したアプリケーションを確認する
- 9.1 Docker環境を構築する
- 9.2 作成したアプリケーションをブラウザから確認する
終わりに

1. 今回使用する開発環境/バージョン

今回の記事では、以下の開発環境/バージョンを使用して解説します。

M1 Mac: Memory 16GB
Docker Desktop: v4.53.0
Docker Compose: v2.40.3
Node.js: v24.17.0
Pnpm: v10.34.4

Docker、Docker Composeに関しては、2025年11月27日(木)時点でのDocker Desktopが採用している最新バージョンを使用しています。詳しくは公式リリース情報をご覧ください。

Node.jsのバージョンに関しては、v24.17.0で固定しています。

Pnpmのバージョンに関しては、v10.34.4で固定しています。

2. Docker Desktop for Macをインストールする

※すでにDocker Desktop for Macをインストール済みの方は、次のステップに進んでください。

Docker Desktop for MacというアプリケーションをMac PCにインストールするだけで、開発環境でDockerを使用する準備が整います。

詳しいインストール方法は、Docker Desktop for Macのインストール手順を参考にしてください。

それでは次のステップに進み、実際にDocker環境を構築していきます。

3. Docker環境を構築するためのフォルダを用意する

VS Code(Visual Studio Code)を使用して開発を行います（Cursorなどお好きなエディタを使用して問題ありません）。エディタのインストール方法は省略します。

3.1 ターミナルでDesktopに移動する

まずVS Codeを開きます。

次に、画面上部バー「Terminal」内の「New Terminal」をクリックします。

「New Terminal」をクリックすると、VS Code内下部にターミナルが表示されます。

今後のコマンド操作は、このターミナル内で行っていきます。

ターミナルを開くと、カレントディレクトリ(現在のディレクトリ)が~になっています。

lsコマンドを実行すると、カレントディレクトリ内のファイルを見ることができます。

今回はDesktop内にファイルを作成するので、Desktopに移動します。

Screenshot 2023-05-19 at 9.15.59.png (88.5 kB)

下記コードを実行し、Desktopディレクトリに移動します。

$ cd Desktop

Screenshot 2023-05-21 at 11.00.30.png (51.9 kB)

ディレクトリを移動すると、先ほどのカレントディレクトリ~がDesktopに変わっています。

これでカレントディレクトリが変更できました。

以下、lsコマンドと同じようにターミナルでコマンドを実行し、手順を進めてください。

3.2 GitとGitHubで管理するためのフォルダを作成する

まずはGitとGitHubで管理するためのGitHubフォルダを作成します。

$ mkdir GitHub

GitHubフォルダ内にターミナルから移動します。

$ cd GitHub

後ほどGitHubフォルダ内で作業をするため、VS Codeはそのまま開いておいてください。

なぜかというと、一度VS Codeを閉じてしまうと、再度Desktop内のGitHubフォルダにVS Codeのターミナルから移動する必要があるからです。

※手動で作成する場合は、Desktop上の画面を2本指でクリックをしてフォルダを作成してください。

4. GitHubで新しいリポジトリを作成する

※ GitHubアカウントを作成していない方は、GitHubアカウント作成方法を参考に登録してください。

それでは、GitHubでコードを管理するためにリポジトリを作成します。

まずは、自身のGitHubアカウントにアクセスし、「Repositories」内の緑色の「New」ボタンをクリックしてください。

「New」をクリックすると、下記の「リポジトリ作成画面」が表示されます。ここでリポジトリ名の指定やリポジトリの公開設定等を行います。

下記に設定情報を列挙しますので、それに合わせてリポジトリ作成の必要項目を入力し、「Create repository」をクリックしてください。

Repository name: react-docker
Description: 空白
公開設定: Public
Initialize this repository with: 「Add a README file」にチェックを入れる
上記以外: デフォルト設定のまま

リポジトリが作成されると、下記のように新しいリポジトリのページが作成されます。

5. GitHubからリポジトリをcloneし、Gitで管理できるようにする

※「cloneする」とは、「GitHubのリポジトリを自身のパソコンにコピーする」ようなイメージです。

5.1 新しく作成したリポジトリのclone用コードを取得する

まずは、「4. GitHubでリポジトリを作成する」で作成したGitHubのreact-dockerリポジトリを開いてください。

次に、react-dockerリポジトリ内の緑色の「Code」ボタンをクリックしてください。「Code」ボタンをクリックすると、下記のようなリポジトリのclone方法やダウンロード方法に関する情報が表示されます。

表示中の「Local」の「Clone」の「HTTPS」にある、「https://github.com/<自身のユーザー名>/react-docker」というコードをコピーしてください。コピーしたコードはclone時に使用します。

5.2 自身のパソコンにGitHubリポジトリをcloneする

次に自身のMacへリポジトリをcloneします。

「3.2 GitとGitHubで管理するためのフォルダを作成する」で作成した自身のDesktop内にあるGitHubフォルダ内に、VS Codeのターミナルから移動してください(もしくは、先程の開いたままのVS Codeに移動してください)。

移動後ターミナルで、「5.1 新しく作成したリポジトリのclone用コードを取得する」で取得したHTTPS接続用のURLを用いて、下記コードを実行します。

$ git clone https://github.com/<自身のユーザー名>/react-docker

コードを実行すると、「README.md」ファイルの入った「react-docker」フォルダが作成されます。

これで、「react-docker」フォルダで編集を行い、「$ git commit ~」や「$ git push ~」等のコマンドを実行すると、自身のGitHubリポジトリにも変更が反映され、今までのコード履歴を見ることができます。

6. Dockerfileを作成する

「5.2 自身のパソコンにGitHubリポジトリをcloneする」でcloneしたreact-dockerファイル内に、下記Dockerfileを作成してください。

FROM node:24.17.0-alpine3.24

RUN apk add --no-cache git

WORKDIR /react-docker

RUN npm install -g pnpm@10.34.4

# 以下、後で使用するためコメントアウトしておいてください。
# COPY pnpm-lock.yaml ./

# COPY package.json ./

# RUN pnpm install

# COPY . .

# EXPOSE 5173

# CMD ["pnpm", "dev", "--host", "0.0.0.0"]

※ Dockerイメージにはalpine以外にも様々な種類がありますので、気になる方は Dockerイメージの種類を参考にしてください。

※ Dockerfileの書き方については、Dockerfileの書き方を参考にしてください。

7. docker-compose.ymlを作成する

Dockerfileの作成と同じく、「5.2 自身のパソコンにGitHubリポジトリをcloneする」でcloneしたreact-dockerファイル内に、下記docker-compose.ymlを作成してください。

services:
  front:
    build: .
    volumes:
      - .:/react-docker
    ports:
      - "5173:5173"
    tty: true
    stdin_open: true

docker-compose.ymlの書き方については、docker-compose.ymlの書き方を参考にしてください。

8. create-react-routerでアプリケーションを作成する

今回は、create-react-routerを使用してReact・TypeScript環境を構築します。

create-react-routerは、Reactを使用したアプリケーションの雛形を素早く作成するためのCLIツールです。

まず、先ほど「5.2 自身のパソコンにGitHubリポジトリをcloneする」でcloneしたreact-dockerフォルダに移動します。

次に、VS Codeのターミナルで以下のコマンドを実行し、アプリケーションを作成します。

今回はmy-appという名前のフォルダを作成するため、<フォルダ名>の部分をmy-appに変更してコマンドを実行します。

# 実行するコマンド
$ docker compose run --rm front pnpm create react-router@latest my-app --template remix-run/react-router-templates/default
# コマンドの書式
$ docker compose run --rm front pnpm create react-router@latest <フォルダ名> --template remix-run/react-router-templates/default

※ docker composeコマンドは、現在のディレクトリにdocker-compose.ymlファイルが存在する場合にのみ実行できます。

コマンドを実行すると、ターミナル内で以下の順番で質問されるので、①と②は「No」、③は「Yes」を選択してください。

Initialize a new git repository?：No
Install dependencies with pnpm?：No
Include the React Router agent skill?：Yes

質問に全て答えると、以下のような構造のディレクトリ/ファイル群が作成されます。

react-docker
├── my-app # 空になったmy-appフォルダを削除
│   ├── .agents
│   ├── app
│   ├── public
│   ├── .dockerignore
│   ├── .gitignore
│   ├── Dockerfile
│   ├── package.json
│   ├── react-router.config.ts
│   ├── README.md
│   ├── tsconfig.json
│   └── vite.config.ts
├── docker-compose.yml
└── Dockerfile

その後、以下の5つの変更を行います。

ルートディレクトリに新しくproductionフォルダを作成する（フォルダ名は任意）
pnpm create react-router実行時に、my-appフォルダ内に作成されたDockerfileを①で作成したproductionフォルダ内に移動する
my-app内のすべてのファイルやフォルダをルートディレクトリ（react-docker内）に移動する
空のmy-appフォルダを削除する
ルートディレクトリのDockerfileのコメントアウト部分（COPY package.json ./以下）を解除（COPY pnpm-lock.yaml ./ だけはコメントアウトしたままにしておいてください。）

【変更後のreact-dockerディレクトリ構造】
react-docker
  ├── .agents
  ├── app
  ├── production
  │   └── Dockerfile
  ├── public
  ├── .dockerignore
  ├── .gitignore
  ├── docker-compose.yml
  ├── Dockerfile
  ├── package.json
  ├── react-router.config.ts
  ├── README.md
  ├── tsconfig.json
  └── vite.config.ts

【変更前のDockerfile】
FROM node:24.17.0-alpine3.24

・・・省略・・・

# COPY pnpm-lock.yaml ./

# COPY package.json ./

# RUN pnpm install

# COPY . .

# EXPOSE 5173

# CMD ["pnpm", "dev", "--host", "0.0.0.0"]

【変更後のDockerfile】
FROM node:24.17.0-alpine3.24

・・・省略・・・

# COPY pnpm-lock.yaml ./ # ここはまだコメントアウトしておいてください。

COPY package.json ./

RUN pnpm install

COPY . .

EXPOSE 5173

CMD ["pnpm", "dev", "--host", "0.0.0.0"]

次に、下記コマンドを実行し、$ docker compose runコマンドで立ち上がったコンテナを停止させます。

$ docker compose down

次に、下記コマンドを順番に実行し、$ docker compose run front pnpm installコマンドを実行し、ルートディレクトリ内にpnpm-lock.yaml ファイルを作成します。

$ docker compose build --no-cache

$ docker compose run front pnpm install

上記コマンドを実行した後、以下のように新しいディレクトリ/ファイルが作成されます。

【pnpm install後のreact-dockerディレクトリ構造】
react-docker
  ├── .pnpm-store # コマンド実行後に自動生成、フォルダ内の構造は省略
  ├── app
  ├── node_modules # コマンド実行後に自動生成、フォルダ内の構造は省略
  ├── production
  │   └── Dockerfile
  ├── public
  ├── .dockerignore
  ├── .gitignore
  ├── docker-compose.yml
  ├── Dockerfile
  ├── package.json
  ├── pnpm-lock.yaml # コマンド実行後に自動生成
  ├── react-router.config.ts
  ├── README.md
  ├── tsconfig.json
  └── vite.config.ts

その後、ルートディレクトリのDockerfileのコメントアウト部分（COPY pnpm-lock.yaml ./）を解除します。

【変更前のDockerfile】
FROM node:24.17.0-alpine3.24

・・・省略・・・

# COPY pnpm-lock.yaml ./

COPY package.json ./

RUN pnpm install

COPY . .

EXPOSE 5173

CMD ["pnpm", "dev", "--host", "0.0.0.0"]

【変更後のDockerfile】
FROM node:24.17.0-alpine3.24

・・・省略・・・

COPY pnpm-lock.yaml ./

COPY package.json ./

RUN pnpm install

COPY . .

EXPOSE 5173

CMD ["pnpm", "dev", "--host", "0.0.0.0"]

これで環境構築の下準備は完了です。

最後に、下記コマンドを実行し、$ docker compose runコマンドで立ち上がったコンテナを停止させます。

$ docker compose down

9. Docker環境を構築し、作成したアプリケーションを確認する

9.1 Docker環境を構築する

手順は以下の3ステップです。コマンドは全てターミナルで実行してください。

$ docker compose build --no-cacheを実行し、イメージをビルドする
$ docker compose up -dを実行し、コンテナを起動する
$ docker psを実行し、コンテナが起動していることを確認する

※ Dockerにおける「イメージのビルド」とは、Dockerイメージを作成するためのプロセスを指します。イメージは、Dockerコンテナの実行に必要なすべての依存関係、設定、およびアプリケーションの実行に必要なファイルなどを含んだパッケージのことです。簡単にいうと、イメージのビルドは、Docker環境を構築するための準備作業の一部です。

まずは、下記コマンドを使用してイメージをビルドします。