React アプリケーションを Docker 化する方法

React アプリケーションを Docker 化すると、開発ワークフローを合理化し、開発のさまざまな段階にわたって一貫した環境を確保し、デプロイメント プロセスを簡素化できます。このガイドでは、Docker 環境のセットアップから Docker イメージの構築と実行まで、React アプリケーションを Docker 化する手順を説明します。

前提条件

1. Docker: Docker がマシンにインストールされていることを確認します。 Docker の公式 Web サイトからダウンロードできます。

2. React アプリケーション: create-react-app または別のメソッドを使用して React アプリケーションを作成する必要があります。お持ちでない場合は、create-react-app.
   を使用して基本的なアプリを作成できます。

npx create-react-app my-react-app
cd my-react-app

ステップ 1: Dockerfile を作成する

Dockerfile は、アプリケーションの Docker イメージを構築する方法に関する一連の手順を含むスクリプトです。 React アプリケーションのルート ディレクトリに、次の内容を含む Dockerfile という名前のファイルを作成します:

# Use an official node runtime as a parent image
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json files to the working directory
COPY package*.json ./

# Install the dependencies
RUN npm install

# Copy the rest of the application code to the working directory
COPY . .

# Build the React app
RUN npm run build

# Install a simple server to serve the React app
RUN npm install -g serve

# Set the command to run the server
CMD ["serve", "-s", "build"]

# Expose port 3000
EXPOSE 3000

ステップ 2: .dockerignore ファイルを作成する

.dockerignore ファイルは、ファイルを Docker イメージにコピーするときに無視するファイルとディレクトリを指定します。これにより、イメージ サイズが削減され、ビルド プロセスが高速化されます。次の内容を含む .dockerignore ファイルをルート ディレクトリに作成します:

node_modules
build
.dockerignore
Dockerfile
.git
.gitignore

ステップ 3: Docker イメージを構築する

React アプリケーションの Docker イメージをビルドするには、アプリケーションのルート ディレクトリに移動し、次のコマンドを実行します。

docker build -t my-react-app .

このコマンドは、現在のディレクトリ (.) をコンテキストとして使用して、タグ my-react-app を持つイメージを構築するように Docker に指示します。

ステップ 4: Docker コンテナを実行する

Docker イメージが構築されたら、次のコマンドを使用してコンテナーで実行できます:

docker run -p 3000:3000 my-react-app

このコマンドは、ローカル マシンのポート 3000 をコンテナのポート 3000 にマップし、ブラウザで http://localhost:3000 にある React アプリケーションにアクセスできるようにします。

ステップ 5: Docker Compose (オプション)

複数のコンテナを管理する場合、または構成を追加する場合は、Docker Compose を使用できます。次の内容を含む docker-compose.yml ファイルをルート ディレクトリに作成します:

version: '3'

services:
  react-app:
    build: .
    ports:
      - "3000:3000"

docker-compose.yml ファイルで定義されたサービスを開始するには、次のコマンドを実行します:

docker-compose up

結論

これらの手順に従うことで、React アプリケーションが正常に Docker 化されました。アプリケーションを Docker 化すると、さまざまな環境間で一貫性が確保されるだけでなく、デプロイメント プロセスが簡素化され、アプリケーションの管理と拡張が容易になります。

追加リソース

• Docker ドキュメント
• React ドキュメント
• Docker Compose ドキュメント

プロジェクト固有のニーズに応じて、Dockerfile と Docker Compose の構成を自由にカスタマイズできます。 Docker 化を楽しんでください!