デフォルトのリソースファイルを置き換えることで、Web インターフェースをカスタマイズできます。このガイドでは、主要な視覚要素を置き換え、カスタマイズされたコンテンツでアプリケーションを起動する方法を説明します。

前提条件

  • Docker と Docker Compose がインストールされていること
  • 置き換え用のカスタマイズされた視覚ファイルが準備されていること

カスタマイズの手順

  1. リソースファイルの置き換え web_assets ディレクトリに以下のカスタマイズされたファイルを追加します:

    • logo-site.png メインナビゲーションバーのロゴ
    • favicon.ico ブラウザタブのアイコン
  2. カスタマイズされたリソースで起動 基本設定と web リソース設定を使用してアプリケーションを起動します:

    docker compose -f docker-compose.yaml -f docker-compose.with-web-assets.yaml up -d
    

ファイル仕様

ファイル用途推奨仕様
logo-site.png左上のナビバーロゴPNG フォーマット
favicon.icoブラウザタブアイコンICO フォーマット、48×48 ピクセル

重要な注意事項

  • 🔄 再起動が必要:リソースファイルを変更した後、変更を確認するにはコンテナの再起動が必要です。
  • 🖼️ リソース要件:正しく認識されるように、ファイル名とフォーマットを完全に一致させてください。

ディレクトリ構造の例

project/
├── web_assets/
│   ├── logo-site.png    # カスタマイズされたロゴ
│   └── favicon.ico      # カスタマイズされたサイトアイコン
├── docker-compose.yaml
└── docker-compose.with-web-assets.yaml