這是本文件的舊版！
自建 OwnTrack 追蹤個人 GPS 軌跡服務
- 雖然 Google Map 有提供這功能, 不過很多人想記錄自己軌跡, 但又不想讓 Google 掌握自己的隱私, 就會有這個需求
-
- GitHub - https://github.com/owntracks
架構圖
graph TB
%% External Components
Mobile[📱 OwnTracks Mobile App
MQTT + WebSocket] Browser[🌐 Web Browser] External[🌍 External MQTT Clients] WebApp[📱 Mobile Web App
WebSocket Only] %% Docker Services subgraph "Docker Environment" subgraph "Mosquitto MQTT Broker" MQTT[Eclipse Mosquitto
Port: 1883, 9001] end subgraph "OwnTracks Recorder" Recorder[OwnTracks Recorder
Port: 8083
HTTP API] end subgraph "Frontend Web Interface" Frontend[OwnTracks Frontend
Port: 80
Nginx Web Server] end end %% Storage subgraph "Data Storage" MosquittoData[(Mosquitto Data
./mosquitto/data)] MosquittoLog[(Mosquitto Logs
./mosquitto/log)] RecorderStore[(Location Data
./store)] AuthFile[(Authentication
./auth/users.auth)] ConfigFile[(Configuration
./config/config.js)] end %% Data Flow - Location Publishing Mobile -.->|MQTT Publish
Location Data
Port 1883| MQTT Mobile -.->|WebSocket Publish
Location Data
Port 9001| MQTT External -.->|MQTT Publish
Location Data
Port 1883| MQTT WebApp -.->|WebSocket Publish
Location Data
Port 9001| MQTT %% Internal MQTT Subscription MQTT -->|MQTT Subscribe
Location Topics| Recorder %% Data Storage Flow Recorder --> RecorderStore MQTT --> MosquittoData MQTT --> MosquittoLog %% Web Interface Flow Browser -->|HTTP Request
Port 80| Frontend Frontend -->|HTTP API Calls
Port 8083| Recorder Recorder -->|JSON Response
Location Data| Frontend Frontend -->|HTML/JS/CSS| Browser %% Configuration and Authentication Recorder -.-> AuthFile Frontend -.-> ConfigFile %% WebSocket for Real-time (optional) MQTT -.->|WebSocket
Port 9001| Browser %% Styling classDef service fill:#e1f5fe,stroke:#01579b,stroke-width:2px classDef storage fill:#f3e5f5,stroke:#4a148c,stroke-width:2px classDef external fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px class MQTT,Recorder,Frontend service class MosquittoData,MosquittoLog,RecorderStore,AuthFile,ConfigFile storage class Mobile,Browser,External external
MQTT + WebSocket] Browser[🌐 Web Browser] External[🌍 External MQTT Clients] WebApp[📱 Mobile Web App
WebSocket Only] %% Docker Services subgraph "Docker Environment" subgraph "Mosquitto MQTT Broker" MQTT[Eclipse Mosquitto
Port: 1883, 9001] end subgraph "OwnTracks Recorder" Recorder[OwnTracks Recorder
Port: 8083
HTTP API] end subgraph "Frontend Web Interface" Frontend[OwnTracks Frontend
Port: 80
Nginx Web Server] end end %% Storage subgraph "Data Storage" MosquittoData[(Mosquitto Data
./mosquitto/data)] MosquittoLog[(Mosquitto Logs
./mosquitto/log)] RecorderStore[(Location Data
./store)] AuthFile[(Authentication
./auth/users.auth)] ConfigFile[(Configuration
./config/config.js)] end %% Data Flow - Location Publishing Mobile -.->|MQTT Publish
Location Data
Port 1883| MQTT Mobile -.->|WebSocket Publish
Location Data
Port 9001| MQTT External -.->|MQTT Publish
Location Data
Port 1883| MQTT WebApp -.->|WebSocket Publish
Location Data
Port 9001| MQTT %% Internal MQTT Subscription MQTT -->|MQTT Subscribe
Location Topics| Recorder %% Data Storage Flow Recorder --> RecorderStore MQTT --> MosquittoData MQTT --> MosquittoLog %% Web Interface Flow Browser -->|HTTP Request
Port 80| Frontend Frontend -->|HTTP API Calls
Port 8083| Recorder Recorder -->|JSON Response
Location Data| Frontend Frontend -->|HTML/JS/CSS| Browser %% Configuration and Authentication Recorder -.-> AuthFile Frontend -.-> ConfigFile %% WebSocket for Real-time (optional) MQTT -.->|WebSocket
Port 9001| Browser %% Styling classDef service fill:#e1f5fe,stroke:#01579b,stroke-width:2px classDef storage fill:#f3e5f5,stroke:#4a148c,stroke-width:2px classDef external fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px class MQTT,Recorder,Frontend service class MosquittoData,MosquittoLog,RecorderStore,AuthFile,ConfigFile storage class Mobile,Browser,External external
安裝服務
Server 端
docker-compose.yml
services: mosquitto: image: eclipse-mosquitto:2 ports: - 1883:1883 - 9001:9001 volumes: - ./mosquitto/config:/mosquitto/config - ./mosquitto/data:/mosquitto/data - ./mosquitto/log:/mosquitto/log restart: unless-stopped otrecorder: image: owntracks/recorder ports: - 8083:8083 volumes: - ./store:/store - ./config:/config - ./auth:/auth restart: unless-stopped environment: - OTR_HOST=mosquitto - OTR_PORT=1883 - OTR_USER=${OTR_USER} - OTR_PASS=${OTR_PASS} - OTR_HTTPPORT=8083 - OTR_AUTHFILE=/auth/users.auth depends_on: - mosquitto owntracks-frontend: image: owntracks/frontend ports: - 80:80 environment: - SERVER_HOST=otrecorder - SERVER_PORT=8083 restart: unless-stoppedhttps://raw.githubusercontent.com/tryweb/docker-compose/refs/heads/main/owntracks/docker-compose.yml
- 到 .env 內設定你的存取帳號密碼
.env
OTR_USER=recorder OTR_PASS=recorderpass
https://raw.githubusercontent.com/tryweb/docker-compose/refs/heads/main/owntracks/.env.example
手機端
- Connection 要選 HTTP
- 設定 Endpoint 的 URL Exp. http://192.168.11.200:8083/pub 一定要加上 /pub 才可以
- 設定 Credentials 的 Username 與 Password 要和 .env 內設定的相同
透過 Cloudflare Tunnel 設定對外服務
- 這樣的設定好處是, 手機連上哪個網路都可以立即回報, 不用等回到可連上內網的網路才統一回報
