初心者でもできる！: macOS で React.js を Docker 上に構築する方法

React.jsを学習・開発する際、Dockerを使った環境構築は非常に便利です。Dockerを利用することで、環境の一貫性を保ちながら、異なるOS上でも同じ開発環境を再現できるため、チーム開発や本番環境との互換性を高めることができます。この記事では、macOS上でReact.jsのDocker環境を構築する手順を詳しく解説し、つまづきやすいポイントや再起動後の立ち上げ方法についても紹介します。

Dockerのインストール
1. 手順
2. Dockerの確認
2. Docker環境でReact.jsを構築するメリット
1. 環境の一貫性と汚染防止
2. 複数プロジェクトの管理
3. Node.jsとReact.jsのDocker環境を構築する手順
docker-compose.yml の内容の詳しい説明
1. 各設定項目の詳細
docker-compose.yml設定のポイント
1. ステップ4: Reactアプリの初期化
2. ステップ5: Docker Composeで環境を起動
4. つまづきやすいポイントと対策
1. Node.jsのインストールが必要
2. Dockerfileの一時的な移動が必要な場合
5. 再起動後のDocker環境の立ち上げ方法
6. まとめ
1. 関連

Dockerのインストール

まず、Dockerのインストールから始めます。macOSではDocker Desktopを使うことで、簡単にDocker環境をセットアップできます。

手順

Docker公式サイトにアクセスし、Docker Desktop for Mac をダウンロードします。
ダウンロードしたファイルを開き、指示に従ってインストールを進めます。
インストール後、アプリケーションフォルダからDocker Desktopを起動します。

Dockerの確認

Docker Desktopが正しく起動し、「Docker Desktop is running」というメッセージが表示されれば準備完了です。ターミナルで以下のコマンドを実行して、Dockerのバージョンが表示されるか確認してください。

docker --version

2. Docker環境でReact.jsを構築するメリット

環境の一貫性と汚染防止

Dockerを利用することで、異なる開発環境においても同じ設定を保つことができます。また、ローカル環境を汚さずに開発ができるため、依存関係の競合などによる問題を避けることができます。

複数プロジェクトの管理

Dockerを使えば、同一のPC上で複数のプロジェクトを切り替えて開発することが容易になります。ポート番号を切り替えることで、複数のReact.jsプロジェクトを同時に立ち上げることも可能です。

3. Node.jsとReact.jsのDocker環境を構築する手順

Docker上にReact.jsの開発環境を構築するには、まずNode.jsのコンテナイメージをベースに環境を整え、Dockerfileとdocker-compose.ymlを使って構成します。

ステップ1: プロジェクトディレクトリの作成

まず、React.jsプロジェクト用のディレクトリを作成し、ターミナルで移動します。

mkdir my-react-app
cd my-react-app

ステップ2: Dockerfileの作成

次に、プロジェクトディレクトリにDockerfileを作成し、Node.jsの環境をセットアップします。このファイルには、Reactの依存関係インストールから開発サーバーの起動までの設定を記述します。

# Node.jsのイメージをベースにする
FROM node:18

# 作業ディレクトリを設定
WORKDIR /app

# package.jsonとpackage-lock.jsonをコピー
COPY package*.json ./

# 依存関係をインストール
RUN npm install

# アプリケーションコードをコピー
COPY . .

# 開発サーバーを起動
CMD ["npm", "start"]

ステップ3: docker-compose.ymlの作成

プロジェクトのルートディレクトリにdocker-compose.ymlを作成し、以下の内容を記述します。docker-compose.ymlでは、ポートやボリュームの設定など、コンテナの詳細な構成を行います。

version: '3'
services:
  frontend:
    build:
      context: .       # Dockerfileがあるディレクトリ
    ports:
      - "3000:3000"    # React開発サーバーのポート
    volumes:
      - .:/app         # ホストとコンテナ間のファイル共有
      - /app/node_modules
    stdin_open: true
    tty: true

docker-compose.yml の内容の詳しい説明

docker-compose.ymlファイルは、複数のDockerコンテナを簡単に管理し、構成するための設定ファイルです。React.jsの開発環境において、docker-compose.ymlを使うことで、Reactアプリケーションを実行するコンテナを立ち上げるための必要な設定を一元管理できます。ここでは、各設定項目について詳しく説明します。

version: '3'
services:
  frontend:
    build:
      context: .       # Dockerfileがあるディレクトリを指定
    ports:
      - "3000:3000"    # ポート番号を指定（ホスト側:コンテナ側）
    volumes:
      - .:/app         # ホストとコンテナ間のファイル共有
      - /app/node_modules
    stdin_open: true
    tty: true

各設定項目の詳細

version: ‘3’
- Docker Composeのファイル形式のバージョンを指定します。このversion: '3'は、Composeファイルのバージョン3を使用することを意味します。バージョンによって使える設定や機能が異なります。
services
- 複数のサービス（コンテナ）を定義するセクションです。ここに各コンテナの設定を記述します。この例ではfrontendという1つのサービス（React.jsのコンテナ）を定義しています。
frontend
- サービスの名前です。この名前でdocker-compose upやdocker-compose downなどのコマンドでサービスを操作できるようになります。例えば、別のプロジェクトを追加する場合は、ここに新しいサービス（例: backend）を追加します。
build
- buildセクションは、Dockerイメージをビルドするための設定です。
- context: .
  - Dockerfileが存在するディレクトリ（コンテキスト）を指定します。ここでは、docker-compose.ymlが配置されている現在のディレクトリ（.）を指定しています。この設定により、Dockerfileを基にReact.jsのイメージがビルドされます。
ports
- コンテナとホストの間で公開するポート番号を指定します。形式はホスト側ポート:コンテナ側ポートです。
- 例えば、3000:3000と設定すると、ホスト（ローカルマシン）のポート3000でアクセスしたリクエストが、コンテナ内のポート3000に転送されます。
- 複数のプロジェクトを同時に実行したい場合は、ホスト側のポートを変更する（例: 3001:3000）ことでポートの競合を回避できます。
volumes
- ホストとコンテナ間のファイル共有設定です。これにより、ホスト上で編集したファイルが自動的にコンテナ内に反映されます。
- .:/app
  - 現在のディレクトリ（.）をコンテナの/appディレクトリにマウントします。これにより、Reactプロジェクトのファイルをホストとコンテナ間で同期できます。
- /app/node_modules
  - node_modulesディレクトリのマウントは、ホスト側のファイルがコンテナ内で上書きされないようにするためです。これにより、依存関係がホストとコンテナで競合することを防ぎます。
stdin_open: true
- 標準入力を開いた状態にして、コンテナが対話的に操作できるようにします。開発環境で必要なオプションです。
tty: true
- 疑似ターミナル（TTY）を割り当て、コンテナを対話的に操作できるようにするオプションです。stdin_openと併せて設定することで、開発中にコンテナ内での操作がしやすくなります。

docker-compose.yml設定のポイント

ports設定でホスト側のポート番号を変えることで、複数のReact.jsプロジェクトを同時に起動できます。例えば、次のように設定を変えます。yamlコードをコピーするports: - "3001:3000"
volumes設定は、ホストとコンテナのファイルを同期しながら開発するための重要な設定です。これにより、ホスト上のエディタで編集したファイルが即座に反映されるので、ホットリロードを利用しながら快適に開発が行えます。

ステップ4: Reactアプリの初期化

Dockerコンテナ内でReactアプリを作成するため、以下のコマンドをターミナルで実行します。

docker-compose run frontend sh

コンテナ内で以下のコマンドを実行して、Reactアプリの雛形を作成します。

npx create-react-app .

これでpackage.jsonなどの必要なファイルが生成され、Reactアプリが初期化されます。

ステップ5: Docker Composeで環境を起動

すべての準備が整ったら、Docker ComposeでReact環境を起動します。

docker-compose up

このコマンドでコンテナが立ち上がり、Reactアプリがhttp://localhost:3000で表示されるようになります。

4. つまづきやすいポイントと対策

Node.jsのインストールが必要

npx create-react-appを使用する際、ローカルにNode.jsがインストールされていると、コンテナを使わずにReactアプリが初期化されることがあります。この場合、Docker環境で完全に隔離された開発を希望する場合は、ローカルのNode.jsをアンインストールするか、コンテナ内でnpxコマンドを実行するようにしましょう。

Dockerfileの一時的な移動が必要な場合

Reactアプリを作成する際にDockerfileが存在すると競合する場合があります。エラーが出た場合は、以下のようにDockerfileを一時的に別の場所へ移動してからReactアプリを作成し、作成後に元の場所に戻すことが解決策となります。

mv Dockerfile ../
npx create-react-app .
mv ../Dockerfile .

5. 再起動後のDocker環境の立ち上げ方法

再起動後にDockerとReact.js環境を再び起動するには、以下の手順を実行します。

ステップ1: Docker Desktopの起動

まず、Docker Desktopを起動します。以下のコマンドでバックグラウンドでDockerを立ち上げます。

open /Applications/Docker.app

ステップ2: プロジェクトディレクトリに移動

プロジェクトのルートディレクトリに移動します。

cd /path/to/my-react-app

ステップ3: Docker Composeで環境を再起動

Docker Desktopが完全に起動したら、以下のコマンドでReactアプリのDocker環境を再起動します。

docker-compose up

ステップ4: ブラウザで確認

起動後、ブラウザでhttp://localhost:3000にアクセスし、Reactアプリが表示されることを確認します。

6. まとめ

Dockerを使ってReact.jsの開発環境を構築することで、環境の一貫性を保ちながら、学習や開発を進めることができます。今回の手順では、DockerのインストールからReactアプリの初期化、つまづきやすいポイント、再起動後の環境立ち上げ方までを解説しました。

Docker環境を活用することで、ローカル環境に依存しないクリーンで再現性の高い開発環境を実現できます。ぜひこの手順を参考に、Dockerを使ったReact.jsの学習・開発を進めてみてください。