初心者でも簡単！Docker ComposeでViteを使ってReact + TypeScriptアプリをサクッと立ち上げてみよう

はじめに

なぜViteを使うのか？

Vite（ビート）は、高速な開発体験を提供するビルドツールです。モダンブラウザのネイティブ機能を活用することで、リアルタイムプレビューやビルド速度の大幅な向上を実現しています。これにより、コード変更後の反映が即座に行われるため、フィードバックループが短縮され、開発効率が大幅に向上します。

Docker Composeとは？

Docker Composeは、複数のDockerコンテナを簡単に管理・構築できるツールです。通常、個別のDockerコンテナを手動で設定・起動するには多くのコマンドを入力する必要がありますが、Docker Composeを使うと、1つの設定ファイル（docker-compose.yml）にまとめて記述することで、複数のサービスを一括で起動・管理できます。

特徴とメリット

1. 簡単なサービス管理
   複数のコンテナ（例: アプリケーション、データベース、キャッシュサーバーなど）を1つのファイルで構成できるため、管理が簡単です。
2. コマンドの一元化
   docker-compose up や docker-compose down といった単純なコマンドで、すべてのコンテナを起動・停止できます。
3. 再現性の高い環境
   開発環境をコードとして管理できるため、どのマシンでも同じ環境を再現可能です。これにより、「私の環境では動くけど、他の人の環境では動かない」という問題を防げます。
4. 柔軟な拡張性
   コンテナのネットワーク設定や依存関係、ボリューム（データ永続化）などを簡単に設定できます。

開発現場での活用例

• 複数サービスのローカル環境構築
  Webアプリケーションでは、フロントエンド、バックエンド、データベース、キャッシュなどが必要な場合があります。Docker Composeを使えば、これらを一括で起動・停止し、連携をスムーズに行えます。
• チーム開発での統一環境
  全員が同じ docker-compose.yml を共有することで、個別の開発環境設定が不要になり、トラブルが減少します。

基本的な仕組み

1. docker-compose.yml ファイル
   サービスの構成（使用するイメージ、ポート設定、ボリューム設定など）を定義します。
2. 主なコマンド
   • docker-compose up
     設定に基づいてすべてのコンテナを起動。
   • docker-compose down
     起動中のコンテナを停止し、ネットワークやボリュームも削除。
   • docker-compose ps
     現在起動中のコンテナの状況を確認。

1.プロジェクトの準備

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

mkdir my-docker-compose-app
cd my-docker-compose-app
Copy

ReactアプリケーションをViteでセットアップ

npm create vite@latest vite-react-app -- --template react-ts
Copy

1. vite-react-appという名前のプロジェクトを作成
2. Reactテンプレートを使用
3. TypeScriptを選択

cd vite-react-app
Copy

npm install
Copy

2.Dockerfileを作成

# ベースイメージとしてNode.jsを使用
FROM node:22-alpine

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

# 必要なファイルをコンテナにコピー
COPY package*.json ./

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

# ソースコードをコピー
COPY . .

# Viteサーバーを起動するポートを公開
EXPOSE 5173

# 開発サーバーを起動
CMD ["npm", "run", "dev"]
Copy

解説

1. FROM: Node.jsの軽量イメージ（Alpine）をベースに使用します。
2. WORKDIR: コンテナ内の作業ディレクトリを設定します。
3. COPY: 必要なファイル（package.jsonやソースコード）をコンテナにコピーします。
4. RUN: npm install で依存関係をインストールします。
5. EXPOSE: 開発サーバーが使用するポート（5173）を公開します。
6. CMD: コンテナ起動時に実行するコマンドを指定します。

3.docker-compose.ymlを作成

version: '3.9'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "5173:5173"
    volumes:
      - .:/app
      - /app/node_modules
    stdin_open: true
    tty: true
Copy

解説

1. version: Composeファイルのバージョンを指定します。
2. services: サービスを定義します（ここではappという名前で定義）。
3. build: Dockerfileを使ってイメージをビルドします。
   • context: 現在のディレクトリをコンテキストとして使用。
   • dockerfile: 使用するDockerfileを指定。
4. ports: ローカルポート（5173）とコンテナポートをマッピングします。
5. volumes: ホストとコンテナ間でコードを共有します。
   • .:/app: ホストのプロジェクトディレクトリをコンテナの/appにマウント。
   • /app/node_modules: node_modulesはホスト側に依存させない。
6. stdin_open/tty: 開発サーバーのインタラクティブな操作を有効にします。

4.vite.configを修正

変更前

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})
Copy

変更後

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,	// サーバーがリッスンするホストアドレスを指定
    port: 5173,	// 開発サーバーが使用するポート番号
  },
})
Copy

• host: true： 開発サーバーをローカルホスト以外のIPアドレス（例: 0.0.0.0）で起動する設定です。 デフォルトでは localhost のみが利用可能ですが、この設定を有効にすることで、同じネットワーク内の他のデバイス（スマートフォンやタブレットなど）からもアクセスできるようになります。
• port: 5173： Vite開発サーバーが使用するポート番号を指定します。 デフォルトでは 5173 が使用されますが、この設定により任意のポート番号に変更することが可能です。

5.サービスを起動する

docker-compose up
Copy

正常に起動したら…

[+] Running 2/2
 ✔ Network vite-react-app_default  Created                                                                           0.0s 
 ✔ Container vite-react-app-app-1  Created                                                                           0.6s 
Attaching to app-1
app-1  | 
app-1  | > vite-react-app@0.0.0 dev
app-1  | > vite
app-1  | 
Re-optimizing dependencies because vite config has changed
app-1  | 
app-1  |   VITE v6.0.3  ready in 120 ms
app-1  | 
app-1  |   ➜  Local:   http://localhost:5173/
app-1  |   ➜  Network: http://***.**.*.*:5173/
app-1  |   ➜  press h + enter to show help
Copy

6.開発を進める

7.トラブルシューティング

• ポートエラー: 5173 ポートが既に使用されている場合は、docker-compose.yml のポート設定を変更してください（例: - "5174:5173"）。
• 依存関係のエラー: node_modules が正しく認識されない場合は、volumes セクションを確認し、コンテナを再起動します。

8.まとめ