Docker上に Vite + React 環境を作りたい．

はじめに

• Docker上で Vite + React 環境を作るための方法です．

• 自分は，React環境も作りたかったので，やってます．

  • 分かりづらいので，React用に記事を分けます．

• ChatGPTとペアプロしたので，スタイルに統一性がないかもしれないです．

• 事前に, DockerおよびDockerComposeが動く環境があることが前提です．

• 参考にしたサイトもリンク付してます．

React

ファイル構造は以下の通りです．

.
├── app/
│   └── {react-appが作られる}
├── docker-compose.yml
└── Dockerfile

React: Docker Fileの作成

基本的には，docker composeのyamlファイルに書いています．
なので，Dockerファイルは簡素になっています．

Dockerfile

# Dockerfile

# Base image
FROM node:22-slim

# Set working directory inside the container
WORKDIR /usr/src/app

FROM node:20-slim

nodeファイルはalpineでも，slimでもなんでも良いと思っていました．
でも，参考するサイトによると，リスクがあるので何も考えずに使うのは避けたほうが良いらしいです．
（詳しくは，サイトを見てください．）

加えて，最近の@shoki-y_in_KDDIアジャイル開発センター株式会社さんのサイトでも, node:22-slimが使われてました．
なので，本コードもそうしてます．

• node【公式】

ChatGPTによる説明（gpt-4o)

FROM node:22-slim
説明: node:22-slim というベースイメージを使用しています。このイメージには、Node.js 22 がインストールされていて、slim 版は不要なファイルやライブラリを含まない軽量なバージョンです。
利点: コンテナサイズが小さく、必要最低限のものだけが含まれているため、効率的なアプリケーションの動作が期待できます。

WORKDIR /usr/src/app
説明: コンテナ内の作業ディレクトリを /usr/src/app に設定しています。このコマンド以降で実行されるすべてのコマンドは、このディレクトリを基準にして行われます。
利点: アプリケーションコードや依存ファイルを一貫して管理するための作業場所が明確になり、他のディレクトリに散らばらないようにします。

React: Docker Compose

詳しい書き方については特に説明しないです．
以下に，工夫したところだけ説明しています．

docker-compose.yml

version: "3.9"

services:
  app:
    container_name: app
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "10000:5173"
    volumes:
      - type: bind
        source: ./app
        target: /usr/src/app
    environment:
      - NODE_ENV=development
    command: sh -c "cd react-app && npm install && npm run dev -- --host"
    stdin_open: true

ports

Reactのデフォルト?である3000は使わないようにしました．
よく使われるポート番号を避けて，"10000:3000"にしています．

volumes

1行でバインドせずに複数行に分けて，バインドしています．
こちらも参考サイトがありますので，ぜひ見てみてください．

ChatGPTによる説明（gpt-4o)

1. version: "3.9"
   説明: 使用するDocker Composeのバージョンを指定しています。3.9は最新の安定版です。

2. services:
   説明: 定義されたコンテナサービスのリスト。ここでは app という名前のサービスを定義しています。

3. app:
   container_name: app
   説明: コンテナの名前を app に指定しています。これにより、この名前でコンテナを識別できます。
   build:
   context: .
   説明: Dockerfileのビルドコンテキストを現在のディレクトリ（.）に指定しています。Dockerfileとアプリケーションのソースコードがこのディレクトリに存在することを前提としています。
   dockerfile: Dockerfile
   説明: Dockerfile という名前のファイルを使用してコンテナをビルドします。

4. ports:
   "10000:5173"
   説明: ホストマシンのポート 10000 をコンテナ内のポート 5173 にマッピングしています。Viteのデフォルトの開発サーバーポートが 5173 であるため、この設定によりブラウザで localhost:10000 にアクセスすると、Viteでホストされているアプリケーションが表示されます。

5. volumes:
   type: bind
   説明: ホストマシンのファイルをコンテナにバインドマウントします。これにより、ローカルのファイルがコンテナ内でリアルタイムに反映されます。
   source: ./app
   説明: ホストの ./app ディレクトリがコンテナ内の /usr/src/app にマウントされます。これにより、ローカルの app フォルダの変更がリアルタイムでコンテナに反映されます。
   target: /usr/src/app
   説明: コンテナ内の /usr/src/app ディレクトリに、ホストの ./app フォルダをマウントします。

6. environment:
   NODE_ENV=development
   説明: 環境変数 NODE_ENV を development に設定しています。これにより、開発モードでアプリケーションが実行されます。

7. command:
   sh -c "cd react-app && npm install && npm run dev"
   説明: コンテナが起動したときに実行されるコマンドです。具体的には、まず react-app ディレクトリに移動し、依存関係をインストールした後に、Viteの開発サーバーを起動するために npm run dev を実行します。

8. stdin_open: true
   説明: この設定により、コンテナの標準入力が開かれた状態になり、インタラクティブな操作が可能になります。デバッグやログの確認に役立ちます。

実行方法

まずは，ファイルをビルドします．

docker compose build

このままだと，reactのアプリがdocker内に存在しないので，コマンドで作ってあげます．
以下の場合だと，react-appがアプリ名．
あと，''内を書き換えると，作りたい環境を作れると思います．

• vite公式

docker-compose run --rm app sh -c 'npm create vite@latest react-app -- --template react'

react-appができたら以下のコマンドを実行．

docker compose up -d

これで完成すると思います．

記事作成に使用したツール

• ディレクトリ構造の部分