T-CREATOR

Vite × Docker：本番運用を見据えたコンテナ化手順

Vite × Docker：本番運用を見据えたコンテナ化手順

現代のフロントエンド開発において、Vite は高速なビルドツールとして多くの開発者に愛用されています。しかし、開発環境で快適に動作するアプリケーションも、本番環境への展開時には様々な課題に直面することがあります。

Docker を活用したコンテナ化は、これらの課題を解決し、開発から本番運用まで一貫した環境を提供する強力な手段です。今回は、Vite プロジェクトを Docker でコンテナ化し、本番運用に耐えうる設定を構築する方法を段階的に解説いたします。

Vite プロジェクトのコンテナ化の背景

Vite は ESM（ES Modules）ベースの高速なビルドツールとして、Vue.js や React などのフレームワークと組み合わせて利用されています。開発時の HMR（Hot Module Replacement）や高速なコールドスタートが特徴ですが、本番環境では異なる要件が求められます。

以下の図は、Vite プロジェクトがコンテナ化によってどのような利益を得られるかを示しています。

mermaidflowchart TB
    dev[開発環境] --> problem1[環境差異]
    dev --> problem2[依存関係の管理]
    dev --> problem3[デプロイメントの複雑さ]

    problem1 --> docker[Docker コンテナ化]
    problem2 --> docker
    problem3 --> docker

    docker --> solution1[環境の一貫性]
    docker --> solution2[依存関係の封じ込め]
    docker --> solution3[簡単なデプロイメント]

    solution1 --> production[本番環境]
    solution2 --> production
    solution3 --> production

コンテナ化により、開発・ステージング・本番環境で同一の実行環境を保証できます。

コンテナ化のメリット

コンテナ化により得られる主要なメリットは以下の通りです。

メリット詳細
1環境の一貫性 - 開発環境と本番環境で同じコンテナイメージを使用
2依存関係の管理 - Node.js バージョンやライブラリの固定
3スケーラビリティ - 水平スケーリングの容易さ
4デプロイメント - CI/CD パイプラインとの親和性
5セキュリティ - アプリケーションの分離と制御

技術的背景

Vite の特徴を活かしつつ Docker 化を行うには、以下の技術的要素を理解する必要があります。

開発時は Vite Dev Server を使用してホットリロードを実現し、本番時は静的ファイルとして配信するという二つのモードがあることが重要です。これらのモードに応じて、適切な Docker 設定を構築する必要があります。

Docker 化における課題

Vite プロジェクトの Docker 化には、いくつかの特有の課題があります。これらの課題を事前に理解し、適切に対処することが成功の鍵となります。

開発環境と本番環境の違い

開発環境と本番環境では、Vite の動作モードが大きく異なります。

mermaidsequenceDiagram
    participant Dev as 開発者
    participant ViteDev as Vite Dev Server
    participant ViteBuild as Vite Build
    participant WebServer as Web Server

    Note over Dev,ViteDev: 開発環境
    Dev->>ViteDev: yarn dev
    ViteDev->>Dev: HMR + ESM

    Note over Dev,WebServer: 本番環境
    Dev->>ViteBuild: yarn build
    ViteBuild->>WebServer: 静的ファイル
    WebServer->>Dev: 配信

開発環境では Vite Dev Server が動的にモジュールを変換・配信しますが、本番環境では事前にビルドした静的ファイルを配信します。

開発環境の特徴

開発環境では以下の点を考慮する必要があります。

dockerfile# 開発環境用の設定例
FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN yarn install

COPY . .
EXPOSE 5173
CMD ["yarn", "dev", "--host", "0.0.0.0"]

この設定では、コンテナ内で Vite Dev Server を起動し、ホットリロード機能を有効にしています。--host 0.0.0.0 オプションにより、コンテナ外部からのアクセスを可能にしています。

本番環境の特徴

本番環境では、セキュリティとパフォーマンスを重視した設定が求められます。

dockerfile# 本番環境用の基本設定例
FROM nginx:alpine

COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

静的ファイルを軽量な Web サーバーで配信することで、リソース使用量を最小限に抑えます。

ビルド最適化の必要性

Vite プロジェクトの Docker 化では、ビルド時間とイメージサイズの最適化が重要な課題となります。

以下の図は、最適化前後でのビルドプロセスの違いを示しています。

mermaidflowchart LR
    subgraph "最適化前"
        source1[ソースコード] --> install1[yarn install]
        install1 --> build1[yarn build]
        build1 --> image1[大きなイメージ]
    end

    subgraph "最適化後"
        source2[ソースコード] --> cache[キャッシュ活用]
        cache --> install2[効率的なインストール]
        install2 --> build2[マルチステージビルド]
        build2 --> image2[軽量イメージ]
    end

マルチステージビルドとキャッシュ戦略により、ビルド時間の短縮とイメージサイズの削減を実現できます。

ビルド時間の課題

大規模な Vite プロジェクトでは、Docker イメージのビルド時間が課題となることがあります。

dockerfile# 非効率なビルド例
FROM node:18-alpine

WORKDIR /app
COPY . .                    # 全ファイルをコピー
RUN yarn install           # 毎回全依存関係をインストール
RUN yarn build            # ビルド実行

この方法では、ソースコードが変更されるたびに依存関係のインストールからやり直しになってしまいます。

イメージサイズの問題

本番環境では、セキュリティとパフォーマンスの観点から、イメージサイズの最小化が重要です。

改善前改善後削減率
1.2GB50MB96%
node:18 ベースnginx ベース-
開発用依存関係含む静的ファイルのみ-

適切な最適化により、大幅なサイズ削減が可能です。

セキュリティ考慮事項

本番運用では、セキュリティ面での配慮が欠かせません。Vite プロジェクトの Docker 化においても、複数のセキュリティ課題があります。

コンテナイメージのセキュリティ

ベースイメージの選択は、セキュリティに大きな影響を与えます。

dockerfile# セキュリティを考慮したベースイメージ選択
FROM node:18-alpine AS builder  # Alpine ベースで脆弱性を最小化

# 非 root ユーザーでの実行
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
USER nextjs

Alpine Linux ベースのイメージは、一般的な Linux ディストリビューションと比較して攻撃対象面が小さく、セキュリティリスクを軽減できます。

実行時セキュリティ

アプリケーションの実行時にも、適切なセキュリティ設定が必要です。

dockerfile# セキュリティ強化の設定例
FROM nginx:alpine

# 不要なパッケージの削除
RUN apk del --purge

# 最小権限での実行
RUN adduser -D -s /bin/sh www-data
USER www-data

# ファイル権限の適切な設定
COPY --chown=www-data:www-data dist/ /usr/share/nginx/html/

最小権限の原則に従い、アプリケーションに必要最小限の権限のみを付与します。

環境変数とシークレット管理

機密情報の管理は、セキュリティの重要な要素です。

dockerfile# 環境変数の適切な管理
ENV NODE_ENV=production
ENV VITE_API_URL=https://api.example.com

# シークレットは実行時に注入
# ARG で機密情報を直接記述しない

Docker イメージに機密情報を埋め込まず、実行時に外部から注入する仕組みを構築することが重要です。

基本的な Docker 化手順

Vite プロジェクトの基本的な Docker 化手順を、段階的に説明いたします。まずは開発環境から始めて、徐々に本番環境に対応した設定を構築していきます。

開発用 Dockerfile の作成

開発環境用の Dockerfile は、開発者の利便性を重視した設定にします。

dockerfile# 開発環境用 Dockerfile
FROM node:18-alpine

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

# パッケージファイルのコピー（依存関係のキャッシュ効率化）
COPY package.json yarn.lock ./

まず、基本的な環境設定を行います。Node.js の LTS バージョンを使用し、Alpine ベースで軽量化を図ります。

dockerfile# 依存関係のインストール
RUN yarn install --frozen-lockfile

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

# ポートの公開
EXPOSE 5173

依存関係のインストールでは、--frozen-lockfile オプションを使用して、lock ファイルと整合性を保ちます。

dockerfile# 開発サーバーの起動
CMD ["yarn", "dev", "--host", "0.0.0.0", "--port", "5173"]

開発サーバーは、コンテナ外部からアクセスできるよう --host 0.0.0.0 を指定します。

ホットリロードの設定

Vite のホットリロード機能をコンテナ環境で正常に動作させるには、追加の設定が必要です。

javascript// vite.config.ts
export default defineConfig({
  server: {
    host: true,
    port: 5173,
    watch: {
      usePolling: true,
    },
  },
});

usePolling: true により、Docker 環境でのファイル変更検知を確実に行います。

docker-compose.yml の設定

開発環境では、docker-compose を使用して複数のサービスを管理します。

yaml# docker-compose.yml（開発環境用）
version: '3.8'

services:
  vite-app:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - '5173:5173'
    volumes:
      - .:/app
      - /app/node_modules

ボリュームマウントにより、ソースコードの変更が即座にコンテナに反映されます。

yamlenvironment:
  - NODE_ENV=development
  - VITE_API_URL=http://localhost:3001
depends_on:
  - api-server

環境変数の設定と、依存サービスの定義を行います。

yamlapi-server:
  image: node:18-alpine
  working_dir: /app
  command: yarn start
  ports:
    - '3001:3001'
  volumes:
    - ./api:/app

API サーバーなど、関連するサービスも同時に起動できるよう設定します。

開発効率の向上

開発効率を向上させるため、以下の追加設定を行います。

yaml    networks:
      - vite-network
    stdin_open: true
    tty: true

networks:
  vite-network:
    driver: bridge

ネットワークの設定により、サービス間の通信を効率化し、デバッグ時の利便性を向上させます。

環境変数の管理

環境変数の適切な管理は、柔軟性とセキュリティの両立に重要です。

dockerfile# Dockerfile での環境変数設定
ENV NODE_ENV=development
ENV VITE_APP_VERSION=1.0.0

# ビルド時変数（機密情報は含めない）
ARG BUILD_VERSION
ENV VITE_BUILD_VERSION=$BUILD_VERSION

機密情報以外の基本的な環境変数は、Dockerfile で設定します。

.env ファイルの活用

開発環境では、.env ファイルを活用して環境変数を管理します。

bash# .env.development
VITE_API_URL=http://localhost:3001
VITE_APP_TITLE=Vite App (Development)
VITE_DEBUG_MODE=true

Vite は、環境に応じて適切な .env ファイルを自動的に読み込みます。

yaml# docker-compose.yml での .env ファイル使用
services:
  vite-app:
    env_file:
      - .env.development
    environment:
      - NODE_ENV=development

docker-compose では、env_file ディレクティブを使用して .env ファイルを読み込めます。

本番環境での環境変数

本番環境では、より厳密な環境変数管理が必要です。

dockerfile# 本番環境用の環境変数設定
ENV NODE_ENV=production
ENV VITE_API_URL=${VITE_API_URL}
ENV VITE_APP_VERSION=${APP_VERSION}

# ヘルスチェック用のエンドポイント
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD curl -f http://localhost/ || exit 1

環境変数は実行時に外部から注入し、ヘルスチェック機能も追加します。

図で理解できる要点：

  • Docker 化により環境の一貫性が保たれる
  • 開発環境ではホットリロードと利便性を重視
  • 環境変数は段階的に管理レベルを上げる

本番運用を見据えた最適化

本番環境では、パフォーマンス、セキュリティ、保守性を重視した最適化が必要です。マルチステージビルドや軽量イメージの採用により、本格的な運用に対応できる Docker 環境を構築していきます。

マルチステージビルドの実装

マルチステージビルドは、ビルド環境と実行環境を分離し、最終的なイメージサイズを大幅に削減する手法です。

以下の図は、マルチステージビルドの構造を示しています。

mermaidflowchart TD
    subgraph stage1 ["Stage 1: Builder"]
        source[ソースコード] --> deps[依存関係インストール]
        deps --> build[ビルド実行]
        build --> artifacts[静的ファイル生成]
    end

    subgraph stage2 ["Stage 2: Runtime"]
        artifacts --> copy[成果物コピー]
        copy --> server[Web サーバー]
        server --> final[最終イメージ]
    end

    style stage1 fill:#f9f9f9
    style stage2 fill:#e8f5e8

ビルドステージで生成された静的ファイルのみを実行ステージにコピーし、軽量な実行環境を構築します。

ビルドステージの実装

最初のステージでは、Vite プロジェクトのビルドを行います。

dockerfile# マルチステージビルド：ビルドステージ
FROM node:18-alpine AS builder

WORKDIR /app

# パッケージファイルのコピー
COPY package.json yarn.lock ./

ビルド環境には、フル機能の Node.js イメージを使用します。

dockerfile# 依存関係のインストール（本番用のみ）
RUN yarn install --frozen-lockfile --production=false

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

# ビルドの実行
RUN yarn build

開発用依存関係も含めてインストールし、ビルドプロセスを実行します。

dockerfile# 不要なファイルの削除（オプション）
RUN rm -rf node_modules
RUN yarn install --frozen-lockfile --production=true

ビルド完了後、不要なファイルを削除してイメージサイズを最適化します。

実行ステージの実装

第二ステージでは、軽量な Web サーバーで静的ファイルを配信します。

dockerfile# マルチステージビルド：実行ステージ
FROM nginx:alpine AS runtime

# Nginx の設定ファイルをコピー
COPY nginx.conf /etc/nginx/nginx.conf

軽量な Alpine ベースの Nginx イメージを使用します。

dockerfile# ビルドステージから静的ファイルをコピー
COPY --from=builder /app/dist /usr/share/nginx/html

# ポートの公開
EXPOSE 80

# ヘルスチェックの設定
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost/ || exit 1

ビルドステージで生成された静的ファイルのみをコピーし、ヘルスチェック機能を追加します。

Nginx 設定の最適化

効率的な静的ファイル配信のため、Nginx の設定を最適化します。

nginx# nginx.conf
events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # gzip 圧縮の有効化
    gzip on;
    gzip_vary on;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json;
}

gzip 圧縮により、転送サイズを大幅に削減できます。

軽量イメージの採用

本番環境では、可能な限り軽量なベースイメージを選択することが重要です。

イメージタイプサイズ特徴用途
node:18900MB+完全な Ubuntu 環境開発・ビルド
node:18-slim200MB+最小限の Ubuntuビルド
node:18-alpine100MB+Alpine Linuxビルド・軽量実行
nginx20MB+Alpine + Nginx静的ファイル配信
scratch<10MB空のイメージ超軽量実行

Alpine Linux の利点

Alpine Linux ベースのイメージは、以下の利点があります。

dockerfile# Alpine ベースイメージの活用例
FROM nginx:alpine

# 必要最小限のパッケージのみインストール
RUN apk add --no-cache curl

# セキュリティアップデートの適用
RUN apk upgrade

Alpine Linux は、セキュリティを重視した軽量ディストリビューションです。

Distroless イメージの検討

さらなる軽量化が必要な場合は、Distroless イメージの使用も検討できます。

dockerfile# Distroless イメージの使用例（高度な最適化）
FROM gcr.io/distroless/static-debian11

COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80

ただし、Distroless イメージはデバッグが困難になるため、運用チームのスキルレベルを考慮して採用を検討してください。

セキュリティ強化設定

本番環境では、多層防御の考え方に基づいたセキュリティ設定が必要です。

非 root ユーザーでの実行

アプリケーションを非 root ユーザーで実行することで、セキュリティリスクを軽減します。

dockerfile# 非 root ユーザーの作成と設定
FROM nginx:alpine

# 専用ユーザーの作成
RUN addgroup -g 1001 -S appgroup && \
    adduser -S appuser -u 1001 -G appgroup

# ファイル所有権の変更
COPY --chown=appuser:appgroup --from=builder /app/dist /usr/share/nginx/html

# 非 root ユーザーでの実行
USER appuser

専用ユーザーでアプリケーションを実行することで、潜在的な攻撃の影響を限定します。

セキュリティヘッダーの設定

Web アプリケーションのセキュリティを強化するため、適切な HTTP ヘッダーを設定します。

nginx# セキュリティヘッダーの設定
server {
    listen 80;

    # セキュリティヘッダー
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

    # HTTPS 強制（プロキシ背後の場合）
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}

これらのヘッダーにより、XSS 攻撃やクリックジャッキングなどの脅威から保護します。

脆弱性スキャンの実装

コンテナイメージの脆弱性を定期的にチェックする仕組みを構築します。

dockerfile# マルチステージビルドでの脆弱性対策
FROM node:18-alpine AS scanner

# 脆弱性スキャンツールのインストール
RUN npm install -g audit-ci

# 依存関係の脆弱性チェック
COPY package.json yarn.lock ./
RUN yarn audit --audit-level moderate

CI/CD パイプラインでの自動脆弱性チェックにより、セキュリティリスクを早期発見できます。

図で理解できる要点：

  • マルチステージビルドでイメージサイズを 90%以上削減
  • Alpine Linux により攻撃対象面を最小化
  • 非 root ユーザー実行で権限を制限

具体的な実装例

実際のプロジェクトで使用できる、完全な Docker 設定を段階的に構築していきます。リアルなシナリオに基づいた設定ファイルと、CI/CD パイプラインとの連携方法を詳しく解説いたします。

プロジェクト構成

以下は、本番運用を想定した Vite プロジェクトのディレクトリ構成です。

csharpmy-vite-app/
├── src/                          # ソースコード
│   ├── components/
│   ├── pages/
│   └── main.ts
├── public/                       # 静的ファイル
├── docker/                       # Docker 関連ファイル
│   ├── Dockerfile.dev            # 開発環境用
│   ├── Dockerfile.prod           # 本番環境用
│   └── nginx.conf                # Nginx 設定
├── .dockerignore                 # Docker 除外ファイル
├── docker-compose.yml            # 開発環境用
├── docker-compose.prod.yml       # 本番環境用
├── package.json
├── vite.config.ts
└── .env.example

この構成により、環境ごとの設定を適切に分離し、保守性を向上させます。

以下の図は、各環境でのコンテナ構成を示しています。

mermaidflowchart TB
    subgraph "開発環境"
        dev_browser[ブラウザ] --> dev_vite[Vite Dev Server]
        dev_vite --> dev_api[API Server]
        dev_vite --> dev_db[(Database)]
    end

    subgraph "本番環境"
        prod_lb[Load Balancer] --> prod_nginx[Nginx Container]
        prod_nginx --> prod_api[API Container]
        prod_api --> prod_db[(Production DB)]
    end

    style dev_vite fill:#e1f5fe
    style prod_nginx fill:#f3e5f5

開発環境では利便性を、本番環境では可用性とパフォーマンスを重視した構成になっています。

設定ファイルの詳細

開発環境用 Dockerfile

開発効率を最大化する設定です。

dockerfile# docker/Dockerfile.dev
FROM node:18-alpine

# 開発用パッケージのインストール
RUN apk add --no-cache git

WORKDIR /app

# パッケージファイルのコピー（キャッシュ効率化）
COPY package.json yarn.lock ./

開発に必要な基本ツールをインストールし、効率的なキャッシュ戦略を実装します。

dockerfile# 依存関係のインストール
RUN yarn install --frozen-lockfile

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

# Vite 設定での開発用最適化
ENV NODE_ENV=development
ENV VITE_HMR_PORT=5173

EXPOSE 5173

# 開発サーバーの起動
CMD ["yarn", "dev", "--host", "0.0.0.0"]

ホットリロード機能を含む、開発に最適化された環境を構築します。

本番環境用 Dockerfile

パフォーマンスとセキュリティを重視した設定です。

dockerfile# docker/Dockerfile.prod
# ビルドステージ
FROM node:18-alpine AS builder

WORKDIR /app

# パッケージファイルのコピー
COPY package.json yarn.lock ./

# 本番用依存関係のインストール
RUN yarn install --frozen-lockfile --production=false

まず、ビルドに必要な全ての依存関係をインストールします。

dockerfile# ソースコードのコピーとビルド
COPY . .
RUN yarn build

# 本番用依存関係のみ再インストール
RUN rm -rf node_modules
RUN yarn install --frozen-lockfile --production=true

ビルド完了後、本番環境に不要な開発用依存関係を除去します。

dockerfile# 実行ステージ
FROM nginx:alpine AS runtime

# セキュリティ強化
RUN addgroup -g 1001 -S appgroup && \
    adduser -S appuser -u 1001 -G appgroup

# Nginx 設定のコピー
COPY docker/nginx.conf /etc/nginx/nginx.conf

# 静的ファイルのコピー
COPY --from=builder --chown=appuser:appgroup /app/dist /usr/share/nginx/html

# ヘルスチェックの設定
HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1

EXPOSE 80

# 非 root ユーザーで実行
USER appuser
CMD ["nginx", "-g", "daemon off;"]

軽量で安全な実行環境を構築し、適切なヘルスチェック機能を実装します。

Nginx 設定の詳細

本番環境用の最適化された Nginx 設定です。

nginx# docker/nginx.conf
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
    use epoll;
    multi_accept on;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # ログ形式の設定
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;

基本的なログ設定とワーカープロセスの最適化を行います。

nginx    # パフォーマンス最適化
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    # gzip 圧縮の設定
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json
        image/svg+xml;

静的ファイル配信のパフォーマンスを最大化する設定を追加します。

nginx    server {
        listen 80;
        server_name _;
        root /usr/share/nginx/html;
        index index.html;

        # セキュリティヘッダー
        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-Content-Type-Options "nosniff" always;
        add_header X-XSS-Protection "1; mode=block" always;

        # SPA 用のフォールバック設定
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 静的ファイルのキャッシュ設定
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }

        # ヘルスチェック用エンドポイント
        location /health {
            access_log off;
            return 200 "healthy\n";
            add_header Content-Type text/plain;
        }
    }
}

SPA ルーティング対応、キャッシュ最適化、ヘルスチェックエンドポイントを設定します。

Docker Compose 設定

開発環境用の docker-compose.yml です。

yaml# docker-compose.yml
version: '3.8'

services:
  vite-dev:
    build:
      context: .
      dockerfile: docker/Dockerfile.dev
    ports:
      - '5173:5173'
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
      - VITE_API_URL=http://localhost:3001
    networks:
      - app-network
    stdin_open: true
    tty: true

開発時の利便性を重視し、ホットリロードとデバッグ機能を有効にします。

yaml  api-server:
    image: node:18-alpine
    working_dir: /app/api
    command: yarn start
    ports:
      - "3001:3001"
    volumes:
      - ./api:/app/api
    environment:
      - NODE_ENV=development
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

API サーバーも含む、完全な開発環境を構築します。

CI/CD パイプラインとの連携

GitHub Actions を使用した CI/CD パイプラインの設定例です。

yaml# .github/workflows/deploy.yml
name: Build and Deploy

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'yarn'

基本的な CI 環境のセットアップを行います。

yaml- name: Install dependencies
  run: yarn install --frozen-lockfile

- name: Run tests
  run: yarn test

- name: Run lint
  run: yarn lint

- name: Build application
  run: yarn build

テスト、リント、ビルドを実行して、コードの品質を確保します。

yamlsecurity-scan:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v3

    - name: Run security audit
      run: yarn audit --audit-level moderate

    - name: Build Docker image for scanning
      run: docker build -f docker/Dockerfile.prod -t security-scan .

    - name: Run container security scan
      uses: aquasecurity/trivy-action@master
      with:
        image-ref: 'security-scan'
        format: 'sarif'
        output: 'trivy-results.sarif'

セキュリティ監査とコンテナスキャンにより、脆弱性を早期発見します。

yamlbuild-and-push:
  needs: [test, security-scan]
  runs-on: ubuntu-latest
  if: github.event_name == 'push' && github.ref == 'refs/heads/main'

  steps:
    - uses: actions/checkout@v3

    - name: Log in to Container Registry
      uses: docker/login-action@v2
      with:
        registry: ${{ env.REGISTRY }}
        username: ${{ github.actor }}
        password: ${{ secrets.GITHUB_TOKEN }}

    - name: Build and push Docker image
      uses: docker/build-push-action@v3
      with:
        context: .
        file: docker/Dockerfile.prod
        push: true
        tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest

テストとセキュリティチェックが成功した場合のみ、本番用イメージをビルドしてレジストリにプッシュします。

図で理解できる要点：

  • 環境ごとに最適化された Docker 設定
  • マルチステージビルドによる効率的なイメージ作成
  • CI/CD パイプラインでの自動品質チェック

まとめ

Vite プロジェクトの Docker 化は、現代のフロントエンド開発において必須のスキルとなっています。本記事では、基本的な開発環境の構築から、本番運用に耐えうる最適化まで、段階的に解説いたします。

重要なポイントの振り返り

Docker 化において最も重要なのは、環境ごとの要件を正確に理解することです。開発環境では開発者の生産性を最大化し、本番環境ではパフォーマンスとセキュリティを重視する必要があります。

項目開発環境本番環境
優先事項開発効率・デバッグの容易さパフォーマンス・セキュリティ
イメージサイズ大きくても可最小限に最適化
ビルド時間短縮よりも機能性重視CI/CD での高速化必須
セキュリティ基本的な対策多層防御の実装

マルチステージビルドの活用により、開発時の利便性と本番時の効率性を両立できます。ビルドステージで必要な全ての処理を行い、実行ステージでは最小限のファイルのみを配置することで、イメージサイズを 90%以上削減することが可能です。

セキュリティとパフォーマンスのバランス

本番運用では、以下のセキュリティ対策が不可欠です。

dockerfile# セキュリティベストプラクティスの要約
FROM nginx:alpine
RUN adduser -D -s /bin/sh appuser
USER appuser
COPY --chown=appuser:appuser dist/ /usr/share/nginx/html/
HEALTHCHECK CMD wget --spider http://localhost/ || exit 1

非 root ユーザーでの実行、適切なファイル権限の設定、ヘルスチェック機能の実装により、堅牢なセキュリティ基盤を構築できます。

継続的な改善の重要性

Docker 化は一度設定すれば終わりではありません。以下の点を継続的に見直していくことが重要です。

  1. 依存関係の更新 - セキュリティパッチの適用
  2. パフォーマンスモニタリング - レスポンス時間とリソース使用量の監視
  3. セキュリティスキャン - 定期的な脆弱性チェック
  4. 設定の最適化 - 新しいベストプラクティスの採用

運用チームとの連携

技術的な実装だけでなく、運用チームとの密な連携も成功の鍵となります。適切なログ設定、監視ツールとの連携、障害時の対応手順の整備により、安定した本番運用を実現できます。

Vite と Docker の組み合わせは、モダンなフロントエンド開発において強力な基盤となります。本記事で紹介した手法を参考に、プロジェクトの要件に応じてカスタマイズし、継続的な改善を行っていってください。

適切に設計された Docker 環境は、開発チームの生産性向上と、本番環境の安定性確保の両方を実現する投資となるでしょう。

関連リンク

Viteの記事Vite

もっと見る

Dockerの記事Docker

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る