はじめに
NASを単なるファイルサーバーで終わらせるのはもったいない。 DockerでHomepageを構築し、自分専用のダッシュボード(コックピット)を作成した記録を共有します。
ダッシュボードの完成形
Infrastructure(インフラ系)とMedia(写真・動画系)の2ペイン構成にし、上部にはシステムリソースとGoogle検索を配置。

設定ファイルの構成例
docker-compose.yaml
Homepageをデプロイするための構成です。設定ファイルを保存するディレクトリ(/volume1/docker/homepage/config など)は、ご自身の環境に合わせて適宜読み替えてください。 もちろんはじめにconfigディレクトリを作成しておいてください。 一度、下記のyamlでデプロイすること。
services:
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
ports:
- 3000:3000
volumes:
- /volume1/docker/homepage/config:/app/config # 設定ファイルを置く場所
- /var/run/docker.sock:/var/run/docker.sock # Dockerの状態を表示する場合に必要
environment:
# NASIPにはNASのIPアドレスを入力してください。これ入力しないとエラーになります。
- HOMEPAGE_ALLOWED_HOSTS=NASIP,NASIP:3000,localhost,127.0.0.1
restart: always
widgets.yaml (システム監視 & 検索)
ページ上部にCPU/メモリ使用率とGoogle検索を統合します。YAMLのインデントには要注意。
- resources:
cpu: true
memory: true
disk: /
- search:
provider: google
target: _blank # 検索結果を新しいタブで開く(便利です)
focus: true # ページを開いた瞬間に検索バーにカーソルが来る
showOptional: true # オプションを表示
services.yaml (サービス一覧)
各サービスをカテゴリ分けして表示します。 yaml中のkeyというのは、各アプリからの情報を取得するためのapi keyです。 各アプリ内の設定ページからapi keyを取得して、貼り付けてください。
- Infrastructure:
- Pi-hole:
icon: pi-hole
href: http://192.168.1.xxx:8000/admin
description: 広告ブロック・DNS
- Vaultwarden:
icon: vaultwarden
href: https:// yourdomain
description: パスワード管理
- Tailscale:
icon: tailscale
href: https://login.tailscale.com
description: メッシュVPN
- Cloudflared:
icon: cloudflare
href: https://dash.cloudflare.com
description: トンネル接続
- Media & Memories:
- Immich:
icon: immich
href: http://192.168.1.xxx:2283
description: 写真ライブラリ
widget:
type: immich
url: http://192.168.1.xxx:2283
key: your_api_key_here
version: 2 #最新版だとこれがないとapi動作エラー
- Jellyfin:
icon: jellyfin
href: http://192.168.1.xxx:8096
description: 動画ライブラリ
widget:
type: jellyfin
url: http://192.168.1.xxx:8096
key: your_api_key_here
ハマりどころと解決策(Tips)
YAMLのインデント
YAMLは1マスのズレで読み込みエラーになります。ログに error: end of the stream... と出た場合は、ハイフンの位置やスペースが全角になっていないか徹底的にチェックしましょう。
VaultwardenのHTTPS制約
Vaultwardenはセキュリティ上、HTTPS接続が必須です。HTTPでログインできない場合は、Cloudflare Tunnelなどを経由させてHTTPS化する必要があります。
まとめ
サンプルリンクの削除
画面下のサンプルリンク(DeveloperやSocial)が不要な場合は、bookmarks.yaml の中身をすべて削除して空ファイルにするか、コメントアウトしてください。これでメインのサービス群だけが並ぶ、純度100%の自作ダッシュボードになります。
restart: alwaysについて
Compose内の restart: alwaysは、NASのOS再起動後も自動でダッシュボードが立ち上がるための設定です。
