Zenn
🐳

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

2024/12/07に公開
React
TypeScript
docker-compose
Dockerfile
Vite
tech

はじめに

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

なぜViteを使うのか？


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

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

目次

Docker Composeとは？

  1. プロジェクトの準備
  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 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は現場で頻繁に活用されるツールで、環境構築の手間を大幅に減らし、チーム全体の開発効率を向上させます。

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

Discussion