家庭内で様々なサーバーやWebアプリを動かしていると、それらをまとめたダッシュボードがほしくなりますよね。今回はそうしたサービスダッシュボードを手軽に作れるhomepageを紹介します。
homepageとは
homepageという非常に検索しづらい名前を持つこのプロダクトは、手軽で便利なサービスダッシュボードです。そしてその主用途は、一言で言えば
homepageの説明を意訳すると、
筆者も家庭内で様々なサーバーやWebアプリを動かしていますが、どのドメインで何が動いているかは、筆者の記憶ベースの運用になっています。そこで常々、これらを俯瞰し、簡単にアクセスできるホームページ
企業であれば、社内ドキュメント、事務系のアプリ、タイムカード、ファイルサーバー、コードホスティグサーバー、チケットシステム、社内Wiki等々、多数のシステムが社内/社外を問わず存在するはずです。またチームごとに、個別のサーバーもあるでしょう。従来であれば、こうしたリンクはWikiやREADME.
homepageのインストールと起動
homepageも今時のアプリの例に漏れず、Dockerで動かすのが簡単です。まずはDockerとComposeをインストールしておきましょう。
$ sudo apt install -U -y docker.io docker-compose-v2
homepage用のディレクトリと、コンフィグを保存するconfigディレクトリを作成します。またcompose.
$ mkdir -p ~/homepage/config
$ cat > ~/homepage/compose.yaml <<EOF
services:
homepage:
image: ghcr.io/gethomepage/homepage:v1.13
restart: unless-stopped
container_name: homepage
ports:
- 3000:3000
volumes:
- ./config:/app/config
environment:
HOMEPAGE_ALLOWED_HOSTS: home.exemple.com
EOF
環境変数HOMEPAGE_
設定ができたら、以下のコマンドでコンテナを起動してください。
$ sudo docker compose -f ~/homepage/compose.yaml up -d
homepageの設定
設定したドメイン、もしくはIPアドレスでhomepageにアクセスしてみましょう。以下の画面が表示されます。
サンプルとなるリンクがいくつか登録されていますね。これらデフォルトの設定は、~/homepage/
settings.yaml
settings.
「title」
「layout」
title: Home Lab
theme: dark
color: slate
language: ja
layout:
Infrastructure:
style: row
columns: 4
Network:
style: row
columns: 4
Storage:
style: row
columns: 4
Security:
style: row
columns: 4
より詳しい設定については、ドキュメントを参照してください。たとえば壁紙のように、ページ背景に任意の画像を表示するようなカスタマイズも可能です。
widgets.yaml
widgets.
以下の例では検索バー、札幌の天気、時計、リソース情報を表示するよう設定していますが、時計は必ず右側に表示されるため、実際の表示は左からリソース、検索バー、天気、時計の順番になります。
- search:
provider: google
target: _blank
- openmeteo:
label: Sapporo
latitude: 43.0667
longitude: 141.35
timezone: Asia/Tokyo
units: metric
cache: 5
- datetime:
text_size: xl
format:
dateStyle: short
timeStyle: short
- resources:
cpu: true
memory: true
disk: /
指定できるウィジェットの一覧はドキュメントで確認してください。
service.yamlの例
service.
- グループ名:
- サービス名:
icon: アイコンファイル
href: サービスのURL
description: サービスの解説
以下は筆者宅のservice.
- Infrastructure:
- Proxmox:
icon: proxmox.svg
href: https://pve.example.com:8006
description: Virtualization cluster
- Uptime Kuma:
icon: uptime-kuma.svg
href: https://kuma.example.com
description: Service monitoring
- Nginx Proxy Manager:
icon: nginx-proxy-manager.svg
href: http://docker.example.com:81
description: Reverse proxy admin
- Beszel:
icon: beszel.svg
href: https://beszel.example.com
description: Lightweight server monitoring
- Network:
- Router:
icon: router.svg
href: http://192.168.1.1
description: Home router
- Pangolin:
icon: pangolin.svg
href: https://pangolin.example.com
description: Private access gateway
- Storage:
- Nextcloud:
icon: nextcloud.svg
href: https://next.example.com
description: Private cloud
- Security:
- Vaultwarden:
icon: vaultwarden.svg
href: https://vault.example.com
description: Password manager
サービスウィジェットを使う
homepageでは、各サービスに対してサービスウィジェットを追加できます。サービスウィジェットを使うと、そのサービスと連携し、追加の情報を表示できるようになります。サービスと連携できるウィジェットの一覧は、こちらにまとまっています。ここではProxmoxサービスウィジェットを追加して、起動中のVMとコンテナ数、使用中のCPU、メモリ量を表示させてみましょう。
あらかじめProxmox側で、APIを叩くためのユーザーを作成し、トークンを発行しておいてください。権限はPVEAuditorでよいでしょう。
service.
- Infrastructure:
- Proxmox:
(略)
widget:
type: proxmox
url: https://pve.example.com:8006
username: ユーザー名@レルム!トークン名
password: "{{HOMEPAGE_VAR_PROXMOX_TOKEN}}"
widgetのtypeは
services:
homepage:
(略)
environment:
HOMEPAGE_ALLOWED_HOSTS: home.example.com
HOMEPAGE_VAR_PROXMOX_TOKEN: "Proxmoxのトークン"
Uptime Kumaにもサービスウィジェットがあるため、こちらも設定してみました。ただしUptime Kumaには完全なAPIが存在しないため、ステータスページからデータを取得する方式です。こちらの具体的な設定方法は割愛しますので、ウィジェットのドキュメントを参照してください。これで監視中のサービスのUP/
bookmark.yaml
bookmark.
以下は具体的なbookmark.
- Cloud:
- AWS Console:
- icon: aws.svg
href: https://console.aws.amazon.com/
- Sakura VPS:
- icon: mdi-server
href: https://secure.sakura.ad.jp/vps/
- Development:
- GitHub:
- icon: github.svg
href: https://github.com/
- GitLab:
- icon: gitlab.svg
href: https://gitlab.com/
- Media:
- YouTube:
- icon: youtube.svg
href: https://www.youtube.com/
- Documentation:
- Proxmox Docs:
- icon: proxmox.svg
href: https://pve.proxmox.com/wiki/Main_Page
- Docker Docs:
- icon: docker.svg
href: https://docs.docker.com/
「Cloud」
Proxmoxとの連携
homepageはProxmoxと連携し、個々のサービスのCPU使用率やメモリ使用量を取得できます。まずproxmox.
pve:
url: https://pve.example.com:8006
token: ユーザー名@レルム!トークン名
secret: "{{HOMEPAGE_VAR_PROXMOX_TOKEN}}"
設定する項目は、Proxmoxのサービスウィジェットと同様です。
続いてservice.
- Storage:
- Nextcloud:
icon: nextcloud.svg
href: https://next.example.com
description: Private cloud
proxmoxNode: pve
proxmoxVMID: 105
proxmoxType: qemu
「proxmoxNode」
Dockerとの連携
Proxmoxと同様に、Dockerとも連携し、各コンテナの情報を追加で表示することも可能です。今回はhomepage本体をDockerで動かしているため、ホストのDockerと連携してみましょう。まずcompose.
services:
homepage:
(略)
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro
続いてdocker.
docker:
socket: /var/run/docker.sock
最後にservice.
services:
- Beszel:
icon: beszel.svg
href: https://beszel.mizuno-as.net
description: Lightweight server monitoring
server: docker
container: beszel-server
「server」
これでサービスダッシュボードが完成しました。とりあえずこのページをホームに登録しておけば、家庭内で迷子にならなくて済みそうです。
ぜひ情報ウィジェットにロゴを表示する、背景に画像を表示する、ウィジェットをカスタマイズしてみる、便利なブックマークを充実させるなど、より便利なカスタマイズを施して、時間を無限に溶かしてみてください。