Vite React アプリケーションの Docker 環境で発生する「Blocked request. This host is not allowed」エラーの解決方法

問題の概要

Docker Compose を使用して Vite React アプリケーションを構築し実行する際、以下のエラーメッセージが表示されることがあります：

Blocked request. This host ("frontend_web") is not allowed. To allow this host, add "frontend_web" to `server.allowedHosts` in vite.config.js.

このエラーは、Vite のセキュリティ機能である Host Header 検証 が原因で発生します。Vite の最近のバージョン（6.0.11以降など）では、不正なホストからのリクエストを防ぐため、デフォルトでローカルホスト(localhost)と標準ポートのみを許可するように変更されました。

発生条件の特徴

• Docker 環境においてコンテナ名（この場合は frontend_web）でアクセスしようとした場合
• Vite のバージョンが v6.0.9+, v5.4.12+, v4.5.6+ 以降
• 開発サーバーへのアクセス方法が Docker 内部ネットワーク経由の場合

解決方法

方法1: Vite設定ファイルでホストを明示的に許可（推奨）

最も安全で公式に推奨される方法は、Vite 設定ファイルで許可するホストを明示的に指定することです。

1. プロジェクトルートの vite.config.js（または vite.config.ts）を開く
2. 以下の設定を追加：

export default defineConfig({
  server: {
    allowedHosts: ['frontend_web'] // 許可するホスト名を指定
  },
  // 他の設定...
});

方法2: すべてのホストを許可（開発環境のみ）

開発中で一時的に全てのホストアクセスを許可する場合（非推奨）：

export default defineConfig({
  server: {
    allowedHosts: true // すべてのホストを許可
  },
});

WARNING

この設定はセキュリティリスクがあるため、開発環境でのみ使用し、本番環境では絶対に使用しないでください。

方法3: Dockerネットワーク設定の調整

Docker Compose でサービス名を正しく解決できるようにネットワーク設定を調整する方法：

# docker-compose.yml
services:
  frontend:
    container_name: frontend_web
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    networks:
      - app-network

networks:
  app-network:
    name: my_app_network

この設定で、同一ネットワーク内のコンテナ間で frontend_web というホスト名が解決可能になります。

よくある失敗と対策

vite-plugin-allowed-hosts 使用時のエラー

[ERROR] Failed to resolve entry for package "vite-plugin-allowed-hosts"

このエラーは、プラグインが現在のViteバージョンと互換性がない場合に発生します。

解決策:

1. プラグインを削除：

npm uninstall vite-plugin-allowed-hosts

2. 正式な server.allowedHosts 設定を使用する（前述の方法1）

Angularプロジェクトでの注意点

AngularプロジェクトでViteを使用している場合（v19以降）、Angular CLI固有の設定が必要です：

// angular.json
{
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "allowedHosts": ["localhost", "frontend_web"] // ここに許可ホストを追加
    }
  }
}

バージョン別の注意事項

• Vite v6.0.11+: server.allowedHosts の設定が必須
• Vite v5.4.12～6.0.10: preview.allowedHost の設定が必要
• Vite v4.5.6+: 初期のホスト検証機能が導入

公式の変更履歴については、Vite GitHub Discussionsを参照してください。

ベストプラクティス

1. 開発環境では、必要なホストのみを明示的に許可
2. 本番環境では、この設定は適用されないことを確認（静的ファイル提供時）
3. Dockerを使用する場合、環境変数を活用した設定：

// vite.config.js
export default defineConfig({
  server: {
    allowedHosts: process.env.DOCKER_MODE 
      ? [process.env.HOST_NAME] 
      : ['localhost']
  }
});

結論

Blocked request. This host is not allowed エラーは、Viteのセキュリティ機能強化により導入されたホスト検証によるものです。Docker環境では以下のいずれかの方法で解決できます：

1. 推奨: Vite設定で server.allowedHosts: ['frontend_web'] を設定
2. 代替案: Dockerネットワーク設定を調整し名前解決を適切に実施
3. 一時対策: 開発用に allowedHosts: true（非推奨）

プロダクション環境では不要な設定であり、この問題は開発時のローカル環境やDockerコンテナ間通信に限定されることに留意してください。