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

はじめに

Dockerを使うと、さまざまな開発環境を簡単に構築できます。本記事では、初学者向けに Docker Compose を利用して、Viteを使用したReact + TypeScriptサービスを簡単に立ち上げる手順を詳しく解説します。

なぜViteを使うのか？

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

また、Reactをセットアップするためのテンプレートも用意されており、複雑な設定を気にせず、すぐに開発に集中できる環境が整います。モダンな開発現場では、この軽量さと速度がプロジェクトの生産性を左右するため、Viteの採用が急増しています。開発者の作業負担を減らし、スピーディーな開発をサポートしてくれます。

目次

Docker Composeとは？

1. プロジェクトの準備
   • プロジェクトディレクトリを作成
   • ReactアプリケーションをViteでセットアップ
2. Dockerfileを作成
3. docker-composeymlを作成
4. vite.configを修正
5. サービスを起動する
6. 開発を進める
7. トラブルシューティング
8. まとめ

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
     現在起動中のコンテナの状況を確認。

Dockerのインストールについてはこちらで詳しく解説されています。
MacOSでのDocker環境構築ガイド（CLI＆Docker Desktop）
コマンドについてはこちらでさらに詳しく解説されています。
Docker Composeコマンド完全ガイド｜初心者向け実践解説

---

1.プロジェクトの準備

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

ターミナルで以下のコマンドを実行して、プロジェクトのフォルダを作成します。

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

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

以下のコマンドでViteを使用してReactプロジェクトを作成します。

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

このコマンドは以下のことを自動的に行います：

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

セットアップが完了したら、プロジェクトディレクトリに移動します。

cd vite-react-app

依存関係をインストールします。

npm install

2.Dockerfileを作成

Dockerfileは、アプリケーションの実行環境を定義するファイルです。
以下の内容でプロジェクトルートに Dockerfile を作成してください。

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

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

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

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

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

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

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

解説

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

3.docker-compose.ymlを作成

次に、Docker Composeを使って簡単にコンテナを管理できるようにします。
以下の内容で 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

解説

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を修正

vite.config.tsにserver設定を追加します。
この設定では、開発中のアプリケーションをLAN内のどのデバイスからでも確認できるようにしつつ、ポート番号を 5173 に固定します。
(セキュリティが必要な場合、ネットワーク設定やファイアウォールの構成に注意してください。)

変更前

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

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

変更後

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

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

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

• port: 5173：
  Vite開発サーバーが使用するポート番号を指定します。
  デフォルトでは 5173 が使用されますが、この設定により任意のポート番号に変更することが可能です。

5.サービスを起動する

プロジェクトルートで以下のコマンドを実行して、サービスを立ち上げます。

docker-compose up

正常に起動したら…

ターミナルに以下のようなメッセージが表示されます。

[+] 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

ブラウザで http://localhost:5173/ にアクセスすると、Vite + Reactの初期画面が表示されます！

6.開発を進める

ファイルを編集すると、変更内容が即座に反映されます！（ホットリロード機能）

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

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

8.まとめ

この記事では、Docker Composeを使ってViteを利用したReactサービスを立ち上げる手順を紹介しました。Docker Composeは現場で頻繁に活用されるツールで、環境構築の手間を大幅に減らし、チーム全体の開発効率を向上させます。

「誰でも同じ環境で開発できる」強みは、トラブルを減らしスムーズな開発を実現します。実践することで、プロジェクトで頼られるエンジニアへと一歩近づけるはずです。ぜひ挑戦してみてください！