先生と生徒の会話形式で理解しよう

生徒

「Reactでアプリを作っているんですけど、Dockerを使うと便利って聞きました。どういう意味なんですか？」

先生

「Dockerはアプリを入れるコンテナを作る仕組みなんです。まるでお弁当箱に材料を詰めて持ち運ぶように、Reactの開発環境をどこでも同じ状態で動かせるんですよ。」

生徒

「なるほど！でもReactとDockerをどうやって組み合わせるんですか？」

先生

「実際にはDockerfileとdocker-compose.ymlを使って設定します。それでは、順番に基本を見ていきましょう！」

1. Dockerとは何か？Reactと一緒に使う理由

Docker（ドッカー）は「コンテナ型仮想化」と呼ばれる技術を使って、ソフトウェアを同じ環境で動かすための仕組みです。初心者にとっては難しく聞こえるかもしれませんが、イメージとしては「同じ料理を誰でも同じ味で作れるように、材料とレシピをまとめて箱に詰めて渡す」ようなものです。

Reactの開発では、パソコンの環境によって「動いた」「動かない」と差が出やすいですが、Dockerを使えば誰のPCでも同じ環境が再現できます。これがDockerとReactを組み合わせる最大のメリットです。

2. ReactのプロジェクトをDockerで動かす流れ

ReactとDockerを組み合わせる開発環境構築の流れは次のようになります。

順番に設定していくことで、初心者でもReactアプリをDocker上で簡単に動かせるようになります。

Dockerfileは「Dockerで環境を作るためのレシピ」のようなファイルです。ReactをDockerで動かすときの基本的なDockerfileは次のようになります。


FROM node:18
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "start"]

この設定で「Node.jsをインストールし、Reactの依存関係を入れて、アプリを起動する」という一連の流れをDockerに伝えています。

docker-compose.ymlは、複数のサービスをまとめて管理する設定ファイルです。Reactの開発環境をシンプルにDockerで動かす場合は次のように書きます。


version: "3"
services:
  react-app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules

これでローカルPCの3000番ポートとDockerコンテナの3000番ポートがつながり、ブラウザからReactアプリを表示できるようになります。

設定ファイルを準備したら、次の手順でアプリを起動できます。

（画面にReactの初期ページが表示され、Docker経由でアプリが動いていることが確認できます）

ReactとDockerを組み合わせると、初心者でも次のような利点を得られます。

例えば、友達と一緒に料理を作るとき、同じ材料とレシピを共有すれば誰でも同じ料理を作れますよね。ReactとDockerを使うのもそれと同じで「開発環境を共有できる」という強みがあります。

最後に、ReactとDockerを初めて使うときによくあるつまずきポイントをまとめます。

これらに気を付けながら進めれば、ReactとDockerを使った開発環境構築もスムーズに学べます。