Serve TeslaMate at root and dashboard under subpath

Author: zijian-z

.env.example

@@ -4,7 +4,7 @@ IMAGE_NAMESPACE=your-namespace
 IMAGE_TAG=latest
 
 # Only Nginx is published to the host.
-WEB_PORT=8080
+WEB_PORT=80
 BASIC_AUTH_USER=admin
 BASIC_AUTH_PASSWORD=change-this-password
 

README.md

@@ -11,7 +11,7 @@
   v
 Nginx / Frontend  -- 内网 HTTP -->  FastAPI Backend  -- Docker 内网 -->  PostgreSQL
        |
-       └── 可选代理 /teslamate/ 到内网 TeslaMate 初始化页面
+       └── 根路径 / 反向代理到内网 TeslaMate
 
 TeslaMate Collector  -- 内网 --> PostgreSQL + MQTT
 ```
@@ -49,7 +49,7 @@ sudo docker compose -f compose.local.yaml up --build
 访问：
 
 ```text
-http://localhost:8080
+http://localhost:8080/dashboard/
 用户名：admin
 密码：change-me-local
 ```
@@ -88,7 +88,7 @@ IMAGE_REGISTRY=registry.cn-shenzhen.aliyuncs.com
 IMAGE_NAMESPACE=your-namespace
 IMAGE_TAG=latest
 
-WEB_PORT=8080
+WEB_PORT=80
 BASIC_AUTH_USER=admin
 BASIC_AUTH_PASSWORD=change-this-password
 
@@ -145,10 +145,10 @@ sudo docker compose up -d
 之后访问：
 
 ```text
-http://部署机IP:8080
+http://部署机IP/
 ```
 
-第一次启动后，先用同一个入口访问 `http://部署机IP:8080/teslamate/` 完成 TeslaMate 授权初始化；之后日常使用 `http://部署机IP:8080/` 查看本项目的报表界面。TeslaMate 没有发布独立宿主机端口，`/teslamate/` 也受同一组 Basic Auth 保护。
+第一次启动后，访问 `http://部署机IP/` 完成 TeslaMate 授权初始化；之后日常访问 `http://部署机IP/dashboard/` 查看本项目的报表界面。TeslaMate 没有发布独立宿主机端口，根路径 `/` 和 `/dashboard/` 都受同一组 Basic Auth 保护。
 
 只要外层还有反向代理或公网入口，把它转发到 `WEB_PORT` 即可；不需要额外暴露 TeslaMate、PostgreSQL 或 MQTT。
 
@@ -164,7 +164,7 @@ http://部署机IP:8080
 
 如果目录里有多个备份文件，脚本会按名称优先级取第一个匹配项。这个导入只在数据库卷首次初始化时执行一次；后续镜像更新、容器重启不会再次导入，也不会覆盖已有数据。若要重新导入，需要先删除对应的 PostgreSQL volume。
 
-恢复脚本会在备份导入完成后自动清空 `private.tokens`。如果备份来自旧版 TeslaMate，脚本也会兼容清空 `public.tokens`。这样历史行程、充电、位置等数据会保留，但不会继承备份里的旧 Tesla 授权；启动后访问 `http://部署机IP:8080/teslamate/` 重新完成授权即可。
+恢复脚本会在备份导入完成后自动清空 `private.tokens`。如果备份来自旧版 TeslaMate，脚本也会兼容清空 `public.tokens`。这样历史行程、充电、位置等数据会保留，但不会继承备份里的旧 Tesla 授权；启动后访问 `http://部署机IP/` 重新完成授权即可。
 
 完整重建并重新导入备份：
 

compose.yaml

@@ -50,6 +50,7 @@ services:
       DATABASE_HOST: database
       MQTT_HOST: mosquitto
       CHECK_ORIGIN: "false"
+      URL_PATH: /
       TZ: ${TZ:-Asia/Shanghai}
     volumes:
       - ./import:/opt/app/import
@@ -119,7 +120,7 @@ services:
       BASIC_AUTH_USER: ${BASIC_AUTH_USER:-admin}
       BASIC_AUTH_PASSWORD: ${BASIC_AUTH_PASSWORD}
     ports:
-      - "${WEB_PORT:-8080}:80"
+      - "${WEB_PORT:-80}:80"
     networks:
       - app
       - data

frontend/Dockerfile

@@ -14,7 +14,7 @@ RUN apk add --no-cache openssl
 
 COPY nginx/default.conf /etc/nginx/conf.d/default.conf
 COPY nginx/10-basic-auth.sh /docker-entrypoint.d/10-basic-auth.sh
-COPY --from=build /app/dist /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html/dashboard
 
 RUN chmod +x /docker-entrypoint.d/10-basic-auth.sh
 

frontend/nginx/default.conf

@@ -1,7 +1,3 @@
-geo $dollar_sign {
-    default "$";
-}
-
 map $http_upgrade $connection_upgrade {
     default upgrade;
     "" close;
@@ -28,8 +24,9 @@ server {
         return 200 "ok\n";
     }
 
-    location /api/ {
+    location /dashboard/api/ {
         set $api_upstream api:8000;
+        rewrite ^/dashboard/api(/.*)$ /api$1 break;
         proxy_pass http://$api_upstream;
         proxy_http_version 1.1;
         proxy_set_header Host $host;
@@ -39,8 +36,9 @@ server {
         proxy_read_timeout 60s;
     }
 
-    location /health {
+    location = /dashboard/health {
         set $api_upstream api:8000;
+        rewrite ^ /health break;
         proxy_pass http://$api_upstream;
         proxy_http_version 1.1;
         proxy_set_header Host $host;
@@ -49,59 +47,31 @@ server {
         proxy_set_header X-Forwarded-Proto $scheme;
     }
 
-    location = /teslamate {
-        return 301 /teslamate/;
+    location = /dashboard {
+        return 301 /dashboard/;
     }
 
-    location /teslamate/ {
-        set $teslamate_upstream teslamate:4000;
-        rewrite ^/teslamate/(.*)$ /$1 break;
-        proxy_pass http://$teslamate_upstream;
-        proxy_http_version 1.1;
-        proxy_set_header Accept-Encoding "";
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_set_header X-Forwarded-Prefix /teslamate;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection $connection_upgrade;
-        proxy_read_timeout 3600s;
-        proxy_redirect / /teslamate/;
-        sub_filter_once off;
-        sub_filter_types *;
-        sub_filter 'href="/' 'href="/teslamate/';
-        sub_filter 'src="/' 'src="/teslamate/';
-        sub_filter 'action="/' 'action="/teslamate/';
-        sub_filter '"/live' '"/teslamate/live';
-        sub_filter '"/js/' '"/teslamate/js/';
-        sub_filter 'url(/' 'url(/teslamate/';
-        sub_filter 'baseUrl:window.location.origin' 'baseUrl:window.location.origin+"/teslamate"';
-        sub_filter 'url:this.redirect?void 0:this.href||void 0' 'url:this.redirect?void 0:(this.href!==null?this.href.replace("/teslamate","/"):this.href)||void 0';
-        sub_filter 'onRedirect({to:o,flash:r}){this.liveSocket.redirect(o,r)}' 'onRedirect({to:o,flash:r}){this.liveSocket.redirect(o.replace(o.startsWith("/")?/^\//gm:/\/${dollar_sign}/gm, "/teslamate/"),r)}';
+    location /dashboard/assets/ {
+        try_files $uri =404;
+        expires 30d;
+        add_header Cache-Control "public, max-age=2592000, immutable";
+    }
+
+    location /dashboard/ {
+        try_files $uri $uri/ /dashboard/index.html;
     }
 
-    location /live/websocket {
+    location / {
         set $teslamate_upstream teslamate:4000;
         proxy_pass http://$teslamate_upstream;
         proxy_http_version 1.1;
-        proxy_set_header Host $host;
+        proxy_set_header Host $http_host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_set_header X-Forwarded-Prefix /teslamate;
+        proxy_set_header X-Forwarded-Host $http_host;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection $connection_upgrade;
         proxy_read_timeout 3600s;
     }
-
-    location /assets/ {
-        try_files $uri =404;
-        expires 30d;
-        add_header Cache-Control "public, max-age=2592000, immutable";
-    }
-
-    location / {
-        try_files $uri /index.html;
-    }
 }

frontend/src/main.tsx

@@ -205,7 +205,8 @@ type Dashboard = {
 
 type ReportKey = 'overview' | 'trends' | 'drives' | 'charging' | 'locations' | 'vehicle';
 
-const API_BASE = import.meta.env.VITE_API_BASE ?? '';
+const defaultApiBase = import.meta.env.BASE_URL === '/' ? '' : import.meta.env.BASE_URL.replace(/\/$/, '');
+const API_BASE = import.meta.env.VITE_API_BASE ?? defaultApiBase;
 
 const ranges = [
   { label: '30天', value: 30 },

frontend/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig({
+  base: process.env.VITE_BASE_PATH ?? '/dashboard/',
   plugins: [react()],
   build: {
     chunkSizeWarningLimit: 700,
@@ -17,6 +18,14 @@ export default defineConfig({
   server: {
     port: 5173,
     proxy: {
+      '/dashboard/api': {
+        target: 'http://localhost:8000',
+        rewrite: (path) => path.replace(/^\/dashboard\/api/, '/api')
+      },
+      '/dashboard/health': {
+        target: 'http://localhost:8000',
+        rewrite: () => '/health'
+      },
       '/api': 'http://localhost:8000',
       '/health': 'http://localhost:8000'
     }