feat: 初始化项目
This commit is contained in:
5
docs/readm.md
Normal file
5
docs/readm.md
Normal file
@@ -0,0 +1,5 @@
|
||||
这里曾是一座依山而居、世代相传的原始村落。青瓦土墙、石板小路、院落炊烟,记录着村民们质朴而悠长的生活记忆。随着时代的发展,国家重大交通工程 西渝高铁 的线路从这里经过,为区域带来新的机遇与活力。为了配合建设,村民们整体搬迁至新的安置点,开启了更加便利、现代的生活。
|
||||
|
||||
如今,这片旧址被完整保留下来,以最原始的村落风貌呈现在人们面前。通过全景影像,曾经的院落布局、街巷肌理与自然环境得以真实记录,也让人们得以重新走进这段乡村记忆。
|
||||
|
||||
这幅全景图不仅是一份空间记录,更是一段关于 时代变迁、乡愁记忆与发展轨迹 的见证。旧村虽迁,但生活的印记与文化的脉络,依然在这片土地上静静延续。
|
||||
101
docs/部署说明.md
Normal file
101
docs/部署说明.md
Normal file
@@ -0,0 +1,101 @@
|
||||
# 前后端分离部署说明
|
||||
|
||||
项目支持**前后端分离**部署:前端为纯静态资源,后端为独立 Node API,便于分别部署到静态主机与 API 服务器。
|
||||
|
||||
---
|
||||
|
||||
## 一、目录与职责
|
||||
|
||||
| 类型 | 目录/文件 | 说明 |
|
||||
|------|-----------|------|
|
||||
| **前端(静态)** | `index.html`, `config.json`, `api.config.json`, `lib/`, `image/` | 可部署到 Nginx、OSS、Vercel、GitHub Pages 等 |
|
||||
| **后端(API)** | `server/`(含 `server.js`, `db.js`, `index.js`, `package.json`) | 单独部署到 Node 主机,仅提供 `/api/*` 接口 |
|
||||
|
||||
---
|
||||
|
||||
## 二、前端部署
|
||||
|
||||
1. **构建静态包**(在项目根目录):
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
产出目录 `dist/`,内含:`index.html`, `config.json`, `api.config.json`, `lib/`, `image/`。
|
||||
|
||||
2. **配置 API 地址**:
|
||||
将 `dist/` 部署到你的静态站点后,修改 **`dist/api.config.json`**(或部署前在根目录改好再 build):
|
||||
```json
|
||||
{
|
||||
"apiBase": "https://你的API域名"
|
||||
}
|
||||
```
|
||||
- 不填或空字符串 `""` 表示与当前页面同源(例如 Nginx 反向代理了 `/api` 到后端时可用 `""`)。
|
||||
- 前后端不同域时填后端根地址,例如 `https://api.example.com`(不要以 `/` 结尾)。
|
||||
前端会请求 `apiBase + '/api/config'`、`apiBase + '/api/stats'` 等。
|
||||
|
||||
3. **上传**:将 `dist/` 内所有文件上传到静态主机或 CDN。
|
||||
|
||||
---
|
||||
|
||||
## 三、后端部署
|
||||
|
||||
1. **只部署 API**:进入后端目录并安装依赖、启动:
|
||||
```bash
|
||||
cd server
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
默认端口 3000,可通过环境变量 `PORT` 修改。
|
||||
数据库文件为 `server/data/pano.db`(首次运行自动创建)。
|
||||
|
||||
2. **生产环境建议**:
|
||||
- 使用 pm2、systemd 等保活。
|
||||
- 如需限制跨域,设置环境变量 `CORS_ORIGIN` 为前端域名,例如:
|
||||
`CORS_ORIGIN=https://你的前端域名`
|
||||
|
||||
---
|
||||
|
||||
## 四、弹幕配置(后端)
|
||||
|
||||
弹幕**默认不显示**,由后端配置控制。
|
||||
|
||||
- 接口:**GET /api/config** 返回示例:
|
||||
```json
|
||||
{
|
||||
"danmakuEnabled": false,
|
||||
"danmakuPosition": "top"
|
||||
}
|
||||
```
|
||||
- 数据来源:SQLite 表 `settings`(在 `server/data/pano.db` 所在库):
|
||||
- `danmaku_enabled`:`1` 开启弹幕,`0` 关闭(默认)。
|
||||
- `danmaku_position`:弹幕区域位置,目前仅使用 `top`(顶部)。
|
||||
|
||||
**开启弹幕**:在部署后端的机器上执行(或通过自建管理接口写入):
|
||||
|
||||
```bash
|
||||
cd server
|
||||
node -e "
|
||||
const db = require('better-sqlite3')('data/pano.db');
|
||||
db.prepare(\"INSERT OR REPLACE INTO settings (key, value) VALUES ('danmaku_enabled', '1')\").run();
|
||||
db.close();
|
||||
"
|
||||
```
|
||||
|
||||
或使用 SQLite 客户端执行:
|
||||
```sql
|
||||
INSERT OR REPLACE INTO settings (key, value) VALUES ('danmaku_enabled', '1');
|
||||
```
|
||||
|
||||
前端会周期性/首次请求 `/api/config`,收到 `danmakuEnabled: true` 后显示顶部弹幕并拉取留言。
|
||||
|
||||
---
|
||||
|
||||
## 五、本地联合运行(不分离)
|
||||
|
||||
在项目根目录:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
会同时提供静态资源与 `/api` 接口(根目录 `server.js` 挂载 `server/` 的 API),适合本地开发。此时 `api.config.json` 的 `apiBase` 保持为 `""` 即可。
|
||||
Reference in New Issue
Block a user