Web Technologies

Docker with React

以下は、DockerとReactを使ってアプリを立ち上げる手順です。

プロジェクトディレクトリの作成

まず、プロジェクトディレクトリを作成します。docker-react という名前でディレクトリを作成し、その中に app ディレクトリと docker ディレクトリを作成します。

mkdir docker-react
cd docker-react
mkdir docker

Dockerfile の作成

docker ディレクトリの中に Dockerfile を作成します。以下は Dockerfile の内容です。

# ベースイメージの指定
FROM node:lts-alpine3.21

# 必要なツールをインストール
RUN apk add --no-cache git

# 作業ディレクトリの指定
WORKDIR /var/www/html

# create-react-app をインストール
RUN npm install -g create-react-app

この Dockerfile は、以下の処理を行います：

  1. node:lts-alpine3.21 ベースのイメージを使って、Node.js 環境を構築。
  2. git をインストール。
  3. 作業ディレクトリとして /var/www/html を指定。
  4. create-react-app をグローバルにインストール。

docker-compose.yml の作成

docker-compose.yml ファイルを docker-react ディレクトリに作成します。

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./app:/var/www/html/app
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: sh -c 'cd app && npm run winstart'

この構成では、docker-compose を使用して以下のサービスを立ち上げます：

  1. app サービスは、Dockerfile を使用してビルドされます。
  2. ローカルの app ディレクトリをコンテナの /var/www/html/app にマウントします。
  3. 3000 ポートをコンテナとホスト間でバインドし、Reactアプリをブラウザで表示できるようにします。
  4. CHOKIDAR_USEPOLLING=true の環境変数を設定して、Windows 環境でのファイル監視を有効にします。
  5. command に npm run winstart を指定して、アプリケーションを起動します。

4. Reactアプリケーションの作成

. ルートディレクトリで React アプリケーションを作成します。

mkdir app
cd app
npx create-react-app .

これにより、React アプリケーションが app ディレクトリ内に作成されます。次に、package.json に以下の scripts を追加します。

"scripts": {
  "winstart": "WATCHPACK_POLLING=true react-scripts start"
}

この設定により、ファイル変更のポーリングが有効になり、Windows 環境でのホットリロードが機能します。

5. Docker コンテナの起動

すべてのファイルが揃ったら、以下のコマンドで Docker コンテナを起動します。

docker-compose up --build

これで、React アプリケーションがコンテナ内でビルドされ、http://localhost:3000 でアプリが表示されるようになります。

6. アプリケーションの確認

ブラウザでhttp://localhost:3000/を開き、React アプリケーションが表示されることを確認します。

以上で、Docker と React を使ったアプリケーションの立ち上げが完了です。

このエラーメッセージは、Reactアプリのソースコード内でweb-vitalsモジュールが見つからないという問題を示しています。

通常、web-vitalsはパフォーマンスメトリクスを測定するためのライブラリで、create-react-appのテンプレートに含まれています。

問題点：web-vitalsモジュールインストール

このエラーを解決するためには、web-vitalsモジュールをインストールする必要があります。以下の手順を試してください。

解決方法:

web-vitalsモジュールをインストール

web-vitalsを手動でインストールするために、次のコマンドを実行します。

npm install web-vitals

アプリケーションを再ビルド

インストール後にReactアプリを再ビルドします。

docker-compose up --build

これで、web-vitalsが正しくインストールされ、エラーが解消されるはずです。

-Web Technologies