Skip to content

Commit 4757983

Browse files
author
jie
committed
Update installation documentation for ThingsVis, adding details on Docker Compose and source installation options. Include port information for ThingsVis API and Studio, and clarify Nginx configuration for reverse proxy setup.
1 parent a5d713f commit 4757983

4 files changed

Lines changed: 195 additions & 41 deletions

File tree

‎docs/installation/docker_installation.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ flowchart LR
2626
H --> L[8883/MQTTS]
2727
H --> M[5432/PostgreSQL]
2828
H --> N[6379/Redis]
29+
H --> O[8000/ThingsVis API]
30+
H --> P[3000/ThingsVis Studio]
2931
3032
style A fill:#e8f0fe,stroke:#4a8af4,color:#1a73e8
3133
style G fill:#e8f0fe,stroke:#4a8af4,color:#1a73e8
@@ -36,6 +38,8 @@ flowchart LR
3638
style L fill:#fef1f1,stroke:#d73a49,color:#cb2431
3739
style M fill:#fef1f1,stroke:#d73a49,color:#cb2431
3840
style N fill:#fef1f1,stroke:#d73a49,color:#cb2431
41+
style O fill:#fef1f1,stroke:#d73a49,color:#cb2431
42+
style P fill:#fef1f1,stroke:#d73a49,color:#cb2431
3943
4044
```
4145

@@ -131,8 +135,16 @@ docker logs -f containerID
131135
8883 (MQTTS)
132136
5432 (PostgreSQL)
133137
6379 (Redis)
138+
8000 (ThingsVis API, thingsvis-server)
139+
3000 (ThingsVis Studio, thingsvis-studio)
134140
```
135141

142+
:::info ThingsVis Access
143+
144+
Docker Compose includes `thingsvis-server` and `thingsvis-studio`. End users only need port **8080** — the frontend Nginx proxies `/main/` and `/thingsvis-api/` to ThingsVis. Ports 3000/8000 are for ops and debugging.
145+
146+
:::
147+
136148
:::tip Device Connection
137149

138150
For device connection instructions, please refer to:

‎docs/installation/source-code-installation.md‎

Lines changed: 87 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ flowchart LR
2525
2626
K[Optional Components ]
2727
K --> L[Modbus Protocol Service]
28-
K --> N[Visualization Editor]
28+
K --> N[ThingsVis]
2929
3030
style A fill:#e8f0fe,stroke:#4a8af4,color:#1a73e8
3131
style J fill:#e8f0fe,stroke:#4a8af4,color:#1a73e8
@@ -430,34 +430,61 @@ $ cd modbus-protocol-plugin
430430
$ go run . start
431431
```
432432

433-
## 6. Optional: Visual Editor Installation & Build (Community Edition)
433+
## 6. Optional: ThingsVis Installation
434434

435-
### Install Pnpm
435+
ThingsPanel dashboards are powered by **ThingsVis**, which requires both **API Server** (default port 8000) and **Studio** (default port 3000).
436436

437-
```
438-
npm i -g pnpm
437+
### Option 1: Docker Compose (Recommended)
438+
439+
```bash
440+
git clone https://github.com/ThingsPanel/thingsvis.git
441+
cd thingsvis
442+
cp apps/server/.env.example .env
443+
# Edit .env: set AUTH_SECRET, DATABASE_URL, etc.
444+
docker compose up -d
439445
```
440446

441-
### Build Visual Editor from Source
447+
After startup:
448+
- ThingsVis API: `http://localhost:8000`
449+
- ThingsVis Studio: `http://localhost:3000`
442450

443-
1. Download Source Code
451+
### Option 2: Run from Source
452+
453+
Prerequisites: Node.js `>= 20.10.0`, pnpm `>= 9.0.0`, PostgreSQL.
444454

445455
```bash
446-
git clone https://github.com/ThingsPanel/visual-editor.git
456+
git clone https://github.com/ThingsPanel/thingsvis.git
457+
cd thingsvis
458+
pnpm install
459+
pnpm build:widgets
447460
```
448461

449-
2. Install Dependencies
462+
1. Copy `apps/server/.env.example` to `apps/server/.env` and set `DATABASE_URL`, `AUTH_SECRET`.
463+
2. Initialize the database:
450464

451465
```bash
452-
npm install
466+
cd apps/server
467+
pnpm db:push
468+
pnpm seed
453469
```
454470

455-
3. Build Dist
471+
3. Start the full stack (Server + Studio):
456472

457473
```bash
458-
pnpm run build
474+
cd thingsvis
475+
pnpm dev:app
459476
```
460477

478+
### ThingsPanel Frontend Environment Variables
479+
480+
When building the ThingsPanel frontend, set in `.env.production`:
481+
482+
```bash
483+
VITE_THINGSVIS_STUDIO_URL=/main/
484+
```
485+
486+
In production, the ThingsVis API is typically proxied via Nginx at `/thingsvis-api/` on the same domain.
487+
461488
## 7. Optional: Install Rule Engine
462489

463490
Please refer to the README at https://github.com/ThingsPanel/rule-engine for installation instructions.
@@ -470,9 +497,9 @@ yum install nginx
470497

471498
### Nginx Configuration
472499

473-
After installation, create `tp.conf` in `/etc/nginx/conf.d`. Copy the content below.
474-
Copy the **frontend dist files** to `/usr/share/nginx/html` (or modify the root path in config).
475-
Copy the **visual editor dist files** to `/usr/share/nginx/visual-editor/dist`.
500+
After installation, create `tp.conf` in `/etc/nginx/conf.d`. Copy the content below.
501+
Copy the **frontend dist files** to `/usr/share/nginx/html` (or modify the `root` path in config).
502+
ThingsVis is integrated via reverse proxy — ensure `thingsvis-server` (8000) and `thingsvis-studio` (3000) are running:
476503

477504
**Note: Modify configuration to match your environment.**
478505

@@ -522,13 +549,52 @@ server {
522549
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
523550
}
524551
525-
# Visualization Editor
526-
location /visual {
527-
alias /home/visual-editor/dist;
528-
index index.html index.htm;
529-
try_files $uri $uri/ /visual/index.html;
552+
# ThingsVis Studio
553+
location /main/ {
554+
proxy_pass http://127.0.0.1:3000/;
555+
proxy_http_version 1.1;
556+
proxy_set_header Host $host;
557+
proxy_set_header X-Real-IP $remote_addr;
558+
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
559+
proxy_set_header X-Forwarded-Proto $scheme;
530560
}
531-
561+
562+
# ThingsVis API
563+
location /thingsvis-api/ {
564+
proxy_pass http://127.0.0.1:8000/api/v1/;
565+
proxy_http_version 1.1;
566+
proxy_set_header Host $host;
567+
proxy_set_header X-Real-IP $remote_addr;
568+
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
569+
proxy_set_header Upgrade $http_upgrade;
570+
proxy_set_header Connection upgrade;
571+
proxy_buffering off;
572+
}
573+
574+
location = /registry.json {
575+
proxy_pass http://127.0.0.1:3000/registry.json;
576+
proxy_http_version 1.1;
577+
proxy_set_header Host $host;
578+
}
579+
580+
location /widgets/ {
581+
proxy_pass http://127.0.0.1:3000/widgets/;
582+
proxy_http_version 1.1;
583+
proxy_set_header Host $host;
584+
}
585+
586+
location = /mf-manifest.json {
587+
proxy_pass http://127.0.0.1:3000/mf-manifest.json;
588+
proxy_http_version 1.1;
589+
proxy_set_header Host $host;
590+
}
591+
592+
location /static/ {
593+
proxy_pass http://127.0.0.1:3000/static/;
594+
proxy_http_version 1.1;
595+
proxy_set_header Host $host;
596+
}
597+
532598
location / {
533599
index index.html index.htm;
534600
try_files $uri $uri/ /index.html;

‎i18n/zh-Hans/docusaurus-plugin-content-docs/current/installation/docker_installation.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ flowchart LR
2626
H --> L[8883/MQTTS]
2727
H --> M[5432/PostgreSQL]
2828
H --> N[6379/Redis]
29+
H --> O[8000/ThingsVis API]
30+
H --> P[3000/ThingsVis Studio]
2931
3032
style A fill:#e8f0fe,stroke:#4a8af4,color:#1a73e8
3133
style G fill:#e8f0fe,stroke:#4a8af4,color:#1a73e8
@@ -36,6 +38,8 @@ flowchart LR
3638
style L fill:#fef1f1,stroke:#d73a49,color:#cb2431
3739
style M fill:#fef1f1,stroke:#d73a49,color:#cb2431
3840
style N fill:#fef1f1,stroke:#d73a49,color:#cb2431
41+
style O fill:#fef1f1,stroke:#d73a49,color:#cb2431
42+
style P fill:#fef1f1,stroke:#d73a49,color:#cb2431
3943
4044
```
4145

@@ -131,8 +135,16 @@ docker logs -f containerID
131135
8883（mqtts端口）
132136
5432（postgresql端口）
133137
6379（redis端口）
138+
8000（ThingsVis API，thingsvis-server）
139+
3000（ThingsVis 编辑器，thingsvis-studio）
134140
```
135141

142+
:::info ThingsVis 访问说明
143+
144+
Docker Compose 已内置 `thingsvis-server` 与 `thingsvis-studio`。日常使用浏览器访问 **8080** 即可，前端 Nginx 会将 `/main/`、`/thingsvis-api/` 代理到 ThingsVis 服务，无需对用户单独暴露 3000/8000 端口。运维调试时可直连上述端口。
145+
146+
:::
147+
136148
:::tip 设备对接
137149

138150
设备接入请参考

‎i18n/zh-Hans/docusaurus-plugin-content-docs/current/installation/source-code-installation.md‎

Lines changed: 84 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ flowchart LR
2424
2525
K[可选组件 ]
2626
K --> L[Modbus 设备接入服务]
27-
K --> N[大屏]
27+
K --> N[ThingsVis]
2828
2929
style A fill:#e8f0fe,stroke:#4a8af4,color:#1a73e8
3030
style J fill:#e8f0fe,stroke:#4a8af4,color:#1a73e8
@@ -458,36 +458,61 @@ $ cd modbus-protocol-plugin
458458
$ go run . start
459459
```
460460

461-
## 6. 可选：Visual-editor可视化安装打包(社区版不支持)
461+
## 6. 可选：ThingsVis 安装部署
462462

463-
### 安装Pnpm
463+
ThingsPanel 看板基于 **ThingsVis** 引擎，需同时运行 **API Server**（默认 8000）和 **Studio 编辑器**（默认 3000）。
464464

465-
1. 在以上node.js安装好的前提下，执行命令安装pnpm
465+
### 方式一：Docker Compose（推荐）
466466

467-
```
468-
npm i -g pnpm
467+
```bash
468+
git clone https://github.com/ThingsPanel/thingsvis.git
469+
cd thingsvis
470+
cp apps/server/.env.example .env
471+
# 编辑 .env，填写 AUTH_SECRET、DATABASE_URL 等
472+
docker compose up -d
469473
```
470474

471-
### 可视化源码打包
475+
启动后：
476+
- ThingsVis API：`http://localhost:8000`
477+
- ThingsVis Studio：`http://localhost:3000`
472478

473-
1. 下载源码(未安装git，可直接下载仓库的zip包)
479+
### 方式二：源码启动
480+
481+
前置要求：Node.js `>= 20.10.0`、pnpm `>= 9.0.0`、PostgreSQL。
474482

475483
```bash
476-
https://github.com/ThingsPanel/visual-editor.git
484+
git clone https://github.com/ThingsPanel/thingsvis.git
485+
cd thingsvis
486+
pnpm install
487+
pnpm build:widgets
477488
```
478489

479-
2. 安装依赖
490+
1. 复制 `apps/server/.env.example` 为 `apps/server/.env`，配置 `DATABASE_URL`、`AUTH_SECRET`。
491+
2. 初始化数据库：
492+
493+
```bash
494+
cd apps/server
495+
pnpm db:push
496+
pnpm seed
497+
```
498+
499+
3. 启动完整服务（Server + Studio）：
480500

481501
```bash
482-
npm install
502+
cd thingsvis
503+
pnpm dev:app
483504
```
484505

485-
3. 打包生成dist
506+
### ThingsPanel 前端环境变量
507+
508+
打包 ThingsPanel 前端时，在 `.env.production` 中配置：
486509

487510
```bash
488-
pnpm run build
511+
VITE_THINGSVIS_STUDIO_URL=/main/
489512
```
490513

514+
生产环境 ThingsVis API 通常通过 Nginx 同域代理 `/thingsvis-api/`，无需额外配置 API 地址。
515+
491516

492517

493518
## 7. 可选：安装Rule-engine规则引擎
@@ -504,7 +529,7 @@ yum install nginx
504529

505530
### Nginx配置
506531

507-
安装完成后，进入/etc/nginx/conf.d目录下新建文件tp.conf，将下面内容复制进去,然后将前端**打包好的dist内的文件**复制到/usr/share/nginx/html，(推荐把/usr/share/nginx/html换成dist路径)；将打包好的可视化dist文件放到/usr/share/nginx/visual-editor/dist与一下配置一致；
532+
安装完成后，进入 `/etc/nginx/conf.d` 目录下新建文件 `tp.conf`，将下面内容复制进去，然后将前端**打包好的 dist 内的文件**复制到 `/usr/share/nginx/html`（推荐把 `root` 路径换成实际 dist 目录）。ThingsVis 通过反向代理接入，需确保 `thingsvis-server`（8000）和 `thingsvis-studio`（3000）已启动：
508533

509534
**注意如果访问有权限问题，修改nginx.conf配置**
510535

@@ -563,13 +588,52 @@ server {
563588
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
564589
}
565590
566-
# 可视化部分
567-
location /visual {
568-
alias /home/visual-editor/dist;
569-
index index.html index.htm;
570-
try_files $uri $uri/ /visual/index.html;
591+
# ThingsVis Studio 编辑器
592+
location /main/ {
593+
proxy_pass http://127.0.0.1:3000/;
594+
proxy_http_version 1.1;
595+
proxy_set_header Host $host;
596+
proxy_set_header X-Real-IP $remote_addr;
597+
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
598+
proxy_set_header X-Forwarded-Proto $scheme;
571599
}
572-
600+
601+
# ThingsVis API
602+
location /thingsvis-api/ {
603+
proxy_pass http://127.0.0.1:8000/api/v1/;
604+
proxy_http_version 1.1;
605+
proxy_set_header Host $host;
606+
proxy_set_header X-Real-IP $remote_addr;
607+
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
608+
proxy_set_header Upgrade $http_upgrade;
609+
proxy_set_header Connection upgrade;
610+
proxy_buffering off;
611+
}
612+
613+
location = /registry.json {
614+
proxy_pass http://127.0.0.1:3000/registry.json;
615+
proxy_http_version 1.1;
616+
proxy_set_header Host $host;
617+
}
618+
619+
location /widgets/ {
620+
proxy_pass http://127.0.0.1:3000/widgets/;
621+
proxy_http_version 1.1;
622+
proxy_set_header Host $host;
623+
}
624+
625+
location = /mf-manifest.json {
626+
proxy_pass http://127.0.0.1:3000/mf-manifest.json;
627+
proxy_http_version 1.1;
628+
proxy_set_header Host $host;
629+
}
630+
631+
location /static/ {
632+
proxy_pass http://127.0.0.1:3000/static/;
633+
proxy_http_version 1.1;
634+
proxy_set_header Host $host;
635+
}
636+
573637
location / {
574638
index index.html index.htm;
575639
try_files $uri $uri/ /index.html;

0 commit comments

Comments
 (0)