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
# 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
が使われてました.
なので,本コードもそうしてます.
ChatGPTによる説明(gpt-4o)
FROM node:22-slim
説明: node:22-slim というベースイメージを使用しています。このイメージには、Node.js 22 がインストールされていて、slim 版は不要なファイルやライブラリを含まない軽量なバージョンです。
利点: コンテナサイズが小さく、必要最低限のものだけが含まれているため、効率的なアプリケーションの動作が期待できます。
WORKDIR /usr/src/app
説明: コンテナ内の作業ディレクトリを /usr/src/app に設定しています。このコマンド以降で実行されるすべてのコマンドは、このディレクトリを基準にして行われます。
利点: アプリケーションコードや依存ファイルを一貫して管理するための作業場所が明確になり、他のディレクトリに散らばらないようにします。
React: Docker Compose
詳しい書き方については特に説明しないです.
以下に,工夫したところだけ説明しています.
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"
stdin_open: true
ports
Reactのデフォルト?である3000は使わないようにしました.
よく使われるポート番号を避けて,"10000:3000"
にしています.
volumes
1行でバインドせずに複数行に分けて,バインドしています.
こちらも参考サイトがありますので,ぜひ見てみてください.
ChatGPTによる説明(gpt-4o)
- version: "3.9"
説明: 使用するDocker Composeのバージョンを指定しています。3.9は最新の安定版です。
- services:
説明: 定義されたコンテナサービスのリスト。ここでは app という名前のサービスを定義しています。
- app:
container_name: app
説明: コンテナの名前を app に指定しています。これにより、この名前でコンテナを識別できます。
build:
context: .
説明: Dockerfileのビルドコンテキストを現在のディレクトリ(.)に指定しています。Dockerfileとアプリケーションのソースコードがこのディレクトリに存在することを前提としています。
dockerfile: Dockerfile
説明: Dockerfile という名前のファイルを使用してコンテナをビルドします。
- ports:
"10000:5173"
説明: ホストマシンのポート 10000 をコンテナ内のポート 5173 にマッピングしています。Viteのデフォルトの開発サーバーポートが 5173 であるため、この設定によりブラウザで localhost:10000 にアクセスすると、Viteでホストされているアプリケーションが表示されます。
- volumes:
type: bind
説明: ホストマシンのファイルをコンテナにバインドマウントします。これにより、ローカルのファイルがコンテナ内でリアルタイムに反映されます。
source: ./app
説明: ホストの ./app ディレクトリがコンテナ内の /usr/src/app にマウントされます。これにより、ローカルの app フォルダの変更がリアルタイムでコンテナに反映されます。
target: /usr/src/app
説明: コンテナ内の /usr/src/app ディレクトリに、ホストの ./app フォルダをマウントします。
- environment:
NODE_ENV=development
説明: 環境変数 NODE_ENV を development に設定しています。これにより、開発モードでアプリケーションが実行されます。
- command:
sh -c "cd react-app && npm install && npm run dev"
説明: コンテナが起動したときに実行されるコマンドです。具体的には、まず react-app ディレクトリに移動し、依存関係をインストールした後に、Viteの開発サーバーを起動するために npm run dev を実行します。
- stdin_open: true
説明: この設定により、コンテナの標準入力が開かれた状態になり、インタラクティブな操作が可能になります。デバッグやログの確認に役立ちます。
実行方法
まずは,ファイルをビルドします.
docker compose build
このままだと,reactのアプリがdocker内に存在しないので,コマンドで作ってあげます.
以下の場合だと,react-app
がアプリ名.
あと,''
内を書き換えると,作りたい環境を作れると思います.
docker-compose run --rm app sh -c 'npm create vite@latest react-app -- --template react'
react-appができたら以下のコマンドを実行.
docker compose up -d
これで完成すると思います.
Discussion