↓メインコンテンツへスキップ
すきぶる - SkBull Blog
  1. Posts/

Homepageで始める、自宅サーバーのダッシュボード管理 【今すぐ改名しろ！】

  ·   ·1565文字
Tech Docker
目次

Homepage (https://gethomepage.dev/)

自宅でサーバー、コンテナーを複数立てていると管理が大変ですよね？
そんなときにオススメのアプリケーションダッシュボード「Homepage」のインストール方法と設定例を説明します。

これは自分がカスタマイズした画面、凝ればもっとオシャレにできるかも？
これは自分がカスタマイズした画面、凝ればもっとオシャレにできるかも？

似たようアプリでDashy, Homer, Heimdall, Flameなどもあるので参考までにどうぞ。 自分はミーハーなのでStarが一番多いHomepageをつかいます。

環境
#

OSUbuntu 24.04

Dockerをつかったインストール
#

やっていることは公式の手順とほぼ同じなので、公式もあわせて参照してください。
https://gethomepage.dev/installation/docker/

Docker Compose
#

Ubuntu上でディレクトリーをつくってその中にcompose.ymlファイルとconfig用のディレクトリーも作成します。

mkdir homepage
touch homepage/compose.yml
mkdir homepage/config

compose.ymlに下記内容を書き込んでvolumesとHOMEPAGE_ALLOWED_HOSTSは適当に変更してください。

#compose.yml
services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    ports:
      - 3000:3000
    volumes:
      - /home/ubuntu/homepage/config:/app/config # Make sure your local config directory exists
      - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations
    environment:
      HOMEPAGE_ALLOWED_HOSTS: 192.168.100.20:3000 # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts

インストール
#

作成したディレクトリー内に移動しDocker ComposeでHomepageをインストールします。

sudo docker compose up -d

インストール後、設定したconfigフォルダー配下にファイルが生成されます。 そのファイルを編集して画面をカスタマイズできます。

インストール後のディレクトリ内
インストール後のディレクトリ内

確認
#

他のマシンからアクセスできるように3000番ポートを解放します。

sudo ufw allow 3000

ブラウザでhttp://<インストールしたマシンのIPアドレス>:3000/にアクセスし表示できたら立ち上げ成功です。

Homepage初期画面
Homepage初期画面

設定例
#

自分がカスタマイズした内容のファイルも載せておきます。参考になれば幸いです。色の変更は画面左下から。

カスタマイズ後のダッシュボード画面02
カスタマイズ後のダッシュボード画面02

Widgets
#

config配下のwidgets.yamlで画面のヘッダー部分をカスタマイズします。

長いので折りたたんでます。（クリックして開く）
#widgets.yaml
- greeting:
    text_size: 4xl
    text: HomeLab Dashboard

- datetime:
    text_size: 4xl
    locale: ja-JP-u-ca-japanese
    format:
      dateStyle: full
      timeStyle: medium
      hourCycle: h23

- resources:
    expanded: true
    cpu: true
    memory: true
    disk: /
    uptime: true
    diskUnits: bytes
    network: true

Services
#

services.yamlでメイン部分をカスタマイズします。Glancesをインストールしておけばプロセスもモニタリングできるのでオススメです。 hrefを設定すればそのURLへ飛べるようになります。
HomepageがAPI対応しているアプリケーションを導入していれば、そのステータスやデータをダッシュボード上に表示できます。

長いので折りたたんでます。（クリックして開く）
#services.yaml
    - Monitor:
        - Info:
            widgets:
              - type: glances
                url: http://192.168.100.20:61208
                version: 4
                metric: info
        - Process:
            widgets:
              - type: glances
                url: http://192.168.100.20:61208
                version: 4
                metric: process
        - Container:
            widgets:
              - type: glances
                url: http://192.168.100.20:61208
                version: 4
                metric: containers
    - Monitor1:
        - CPU:
            widgets:
              - type: glances
                url: http://192.168.100.20:61208
                version: 4
                metric: cpu
        - Memory:
            widgets:
              - type: glances
                url: http://192.168.100.20:61208
                version: 4
                metric: memory

    - Localhost:
        - Pi-hole（192.168.100.11）:
            icon: si-pihole
            href: https://192.168.100.11/admin/
            description: DNS
            ping: 192.168.100.11
            siteMonitor: https://192.168.100.11/admin/
            widgets:
              - type: pihole
                url: https://192.168.100.11/
                version: 6
                key: XXXX
        - TrueNas（192.168.100.10）:
            icon: truenas
            herf: http://truenas.local/
            description: NAS
            ping: 192.168.100.10
            siteMonitor: http://192.168.100.10/
            widgets:
              - type: truenas
                url: http://192.168.100.10
                key: XXXX
                enablePools: true # optional, defaults to false
                nasType: core # defaults to scale, must be set to 'core' if using enablePools with TrueNAS Core

    - Docker:
        - Jellyfin:
            icon: jellyfin
            herf: test
            description: server
            container: jellyfin
            widgets:
              - type: jellyfin
                url: http://192.168.100.20:8096/
                key: XXXX
                enableBlocks: true # optional, defaults to false
                enableNowPlaying: true # optional, defaults to true
                enableUser: true # optional, defaults to false
                showEpisodeNumber: true # optional, defaults to false
                expandOneStreamToTwoRows: false # optional, defaults to true
        - Komga:
            herf: http://truenas.local/
            icon: komga
            description: 漫画サーバー
            container: komga
            widgets:
              - type: komga
                url: http://192.168.100.20:25600/
                key: XXXX
        - Shinobi:
            container: shinobidocker-shinobi-1
            href: http://192.168.100.20:8080/
            description: 監視カメラ
            showStats: true
        - mrakc:
            container: mirakc
            href: http://192.168.100.20:40772/miraview/index.html
        - EDCB:
            container: EDCB-Wine
            href: http://192.168.100.20:5510/EMWUI/epg.html
        - Wine:
            container: EDCB-Wine
            href: http://192.168.100.20:6510/
        
        - KonomiTV:
            container: KonomiTV
            href: https://192-168-100-20.local.konomi.tv:7000/tv/
            description: テレビ
        - Glances:
            href: http://192.168.100.20:61208
            icon: glances
            container: glances-glances-1
            description: モニタリングツール

Settings
#

settings.yamlでservices.yamlで定義したコンテンツのレイアウトを設定します。

長いので折りたたんでます。（クリックして開く）
#settings.yaml
headerStyle: boxedWidgets

layout:
  Monitor:
    icon: glances
    style: row
    columns: 3

  Monitor1:
    style: row
    columns: 2
    header: false

まとめ
#

コンテナー、プロセス、リソース監視画面とリンク画面が一画面にまとまっていてとても便利です。
以上、名前で損してるアプリNo.1のアプリケーションダッシュボード「Homepage」の紹介でした。

改名しろ！

関連記事

ローカルネットワークの名前解決のためだけに使う Pi-hole on Docker
  ·   ·2495文字
Tech Domain DNS Docker Pi-hole
Komgaのインストール：NASのマウント方法とDockerをつかった構築
  ·   ·1255文字
Tech Media Server Komga Docker TrueNAS NAS