77 lines
1.7 KiB
Markdown
77 lines
1.7 KiB
Markdown
# 哈夫币展示页
|
|
|
|
一个轻量展示前端，数据直接读取 `hfb_sys` 的公开接口。
|
|
|
|
## 数据来源分析
|
|
|
|
- 商品列表：`GET /api/listings?page=1&page_size=12&keyword=&sort=&zone=`
|
|
- 首页配置：`GET /api/mobile-home-config`
|
|
- 图片资源：商品返回的 `cover_url`、`screenshot_urls` 已经是 `/api/...` 相对路径，前端无需额外拼接。
|
|
- 生产部署建议：展示页只作为静态站点运行，Nginx 将 `/api/` 反向代理到 `hfb_sys` 后端。
|
|
|
|
## 本地开发
|
|
|
|
确认 `hfb_sys` 后端已经在 `127.0.0.1:8080` 运行后：
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
打开 `http://127.0.0.1:5174`。
|
|
|
|
如果后端地址不同：
|
|
|
|
```bash
|
|
VITE_API_PROXY_TARGET=http://127.0.0.1:8080 npm run dev
|
|
|
|
VITE_API_PROXY_TARGET=https://hao858.com/ npm run dev
|
|
```
|
|
|
|
## 构建
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
产物在 `dist/`。
|
|
|
|
## 部署方案
|
|
|
|
### 方案一：跟 `hfb_sys` 同机 Docker 部署
|
|
|
|
1. 先让 `hfb_sys` 的后端容器加入一个共享网络，或者创建外部网络：
|
|
|
|
```bash
|
|
docker network create hfb_sys_net
|
|
docker network connect hfb_sys_net hfb_sys-backend-1
|
|
```
|
|
|
|
2. 确认 `nginx.conf` 里的后端主机名能解析到后端容器：
|
|
|
|
```nginx
|
|
proxy_pass http://hfb_sys_backend:8080/api/;
|
|
```
|
|
|
|
如果后端容器名不是 `hfb_sys_backend`，改成真实容器名或在 compose 里加 network alias。
|
|
|
|
3. 启动展示页：
|
|
|
|
```bash
|
|
docker compose -f deploy/docker-compose.yml up -d --build
|
|
```
|
|
|
|
默认访问 `http://服务器IP:8090`。
|
|
|
|
### 方案二：复用现有 Nginx
|
|
|
|
执行 `npm run build`，把 `dist/` 配到一个新站点，新增：
|
|
|
|
```nginx
|
|
location /api/ {
|
|
proxy_pass http://127.0.0.1:8080/api/;
|
|
}
|
|
```
|
|
|
|
这样展示页和 `hfb_sys` 共用一套数据库、后台审核、图片存储和公开接口。
|