Dockerで自分を覗き見するサイトを作る

はじめに

プロジェクトのリポジトリ：Live-dashboard

この記事の手順はすべてLinuxサーバー上で実行しています。

構築をはじめる

構築を始める前に、サーバーにDockerがインストールされていることを確認してください。

BASH

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

ワンクリックデプロイ

1. キーを生成する

BASH

# 设备密钥（每台设备各生成一个，记下来）
openssl rand -hex 16
# HASH_SECRET（服务端内部用，只需一个）
openssl rand -hex 32

2. コンテナを起動する

DEVICE_TOKEN の形式は キー:デバイスID:デバイス名:プラットフォーム です。

デバイスが1台だけの場合：

BASH

docker run -d --name live-dashboard \
  -p 3000:3000 \
  -v dashboard_data:/data \
  -e HASH_SECRET=<MY_SECRET> \
  -e 'DEVICE_TOKEN_1=<MY_TOKEN>:my-pc:MyPC:windows' \
  ghcr.io/monika-dream/live-dashboard:latest

複数台ある場合：

BASH

docker run -d --name live-dashboard \
  -p 3000:3000 \
  -v dashboard_data:/data \
  -e HASH_SECRET=<MY_SECRET> \
  -e 'DEVICE_TOKEN_1=<TOKEN_A>:my-pc:私のパソコン:windows' \
  -e 'DEVICE_TOKEN_2=<TOKEN_B>:my-phone:私のスマホ:android' \
  ghcr.io/monika-dream/live-dashboard:latest
#                      ─────── ───── ──── ───────
#                      キー▲   ID▲  名前▲ プラットフォーム▲
# ▲キー：ステップ1で生成したランダム文字列。デバイスごとに異なります
# ▲ID：任意の英字識別子（my-pc、phone-1 など）。デバイスごとに異なります
# ▲名前：ダッシュボードの表示名。日本語も使用できます（私のパソコン、私のスマホ など）
# ▲プラットフォーム：windows / macos / android のいずれかを指定

注意：各デバイスにはそれぞれ固有の DEVICE_TOKEN_N が必要で、キーとデバイスIDはどちらも重複させることはできません。2台のデバイスが同じTOKENを共有していると、同じ1台のデバイスとして表示され、状態が互いに上書きされてしまいます。

デバイスを増やしたい場合は、DEVICE_TOKEN_3、DEVICE_TOKEN_4……と追加するだけです。番号は連続していなくてもかまいません。

既存のコンテナにデバイスを追加したい場合は、いったん古いコンテナを停止して削除し、新しいコマンドで作り直します。データは dashboard_data ボリュームに保存されているので失われません：

BASH

>docker stop live-dashboard && docker rm live-dashboard
> # 然后执行包含新 DEVICE_TOKEN 的 docker run 命令

3. ブラウザを開く

http://localhost:3000 にアクセスして、ダッシュボードのページが表示されればサーバー側の準備は完了です（この時点ではデバイスのデータはまだないため、ダークモードで表示されます）。

サイトメタデータをカスタマイズする

BASH

docker run -d --name live-dashboard \
  -p 3000:3000 \
  -v dashboard_data:/data \
  -e HASH_SECRET=<MY_SECRET> \
  -e DEVICE_TOKEN_1=<MY_TOKEN>:my-pc:MyPC:windows \
  -e DISPLAY_NAME=你的名字 \
  ghcr.io/monika-dream/live-dashboard:latest

表示名のほかにも、ブラウザのタブタイトル、ページの説明、ファビコンをカスタマイズできます。

BASH

docker run -d --name live-dashboard \
  -p 3000:3000 \
  -v dashboard_data:/data \
  -e HASH_SECRET=<MY_SECRET> \
  -e DEVICE_TOKEN_1=<MY_TOKEN>:my-pc:MyPC:windows \
  -e DISPLAY_NAME=你的名字 \
  -e SITE_TITLE="你的名字 Now" \
  -e SITE_DESC="看看我在干什么" \
  -e SITE_FAVICON="/favicon.ico" \
  ghcr.io/monika-dream/live-dashboard:latest

Agent の設定

Agent の設定 - Windows

原作者の GitHub Releases から live-dashboard-agent.exe をダウンロードします
ダブルクリックでそのまま実行します。初回起動時には設定ダイアログが自動で開くので、サーバーのアドレスとTokenを入力するだけです

設定が終わると、Agentが自動でデータを送信し始めます。

詳しくは原作者のチュートリアルを参照してください：Agent の設定 - Windows

Agent の設定 - macOS

原作者の GitHub Releases から live-dashboard-agent-macos.zip をダウンロードします
解凍してそのまま実行します。初回起動時には設定ダイアログが自動で開くので、サーバーのアドレスとTokenを入力するだけです

設定が終わると、Agentが自動でデータを送信し始めます。

詳しくは原作者のチュートリアルを参照してください：Agent の設定 - macOS

Agent の設定 - Android

ダウンロード先：LiveDashboard

インストールしたらアプリを開き、「設定」ページでサーバーのアドレスとTokenを入力します
「健康」ページで「許可」ボタンを押して Health Connect の権限を許可し、同期したいデータの種類を選びます（初期状態ではすべて選択されています）
重要：「状態」ページで Shizuku を使って権限を許可してください（そうしないとアプリ名を取得できません）
「状態」ページでバックグラウンド常駐の権限をオンにします

実際の表示

おわりに

~~ぜひ僕を覗き見しに来てください：Moitr Now~~（現在は閉鎖中）