# unified_static

**Repository Path**: Aturous/unified_static

## Basic Information

- **Project Name**: unified_static
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-27
- **Last Updated**: 2025-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 统一静态页面项目部署指导文档

## 项目概述

本项目是一个统一的静态页面系统，通过nginx配置实现根据URL参数动态路由到不同页面的功能。系统支持以下三种页面类型：

- **用户资料页** (profile)
- **求租详情页** (request)  
- **店铺详情页** (shop)

该方案特别适用于移动端DeepLink跳转场景，可以实现原生应用到Web页面的无缝跳转。

## 配置说明

### nginx配置文件概述

本项目使用 `zhenhaopu.conf` 作为nginx配置文件，主要功能包括：

1. **静态文件服务** - 提供HTML、CSS、JS等静态资源
2. **动态路由** - 根据URL参数路由到不同页面
3. **API代理** - 将/api/请求代理到后端服务
4. **Gzip压缩** - 优化页面加载速度
5. **错误处理** - 完善的404处理机制

### 核心路由规则

配置文件通过URL查询参数实现以下路由规则：

#### 用户资料页
```
http://192.168.2.227:8080/?userId=44
```
- 参数：`userId` 
- 目标页面：`/profile/index.html`
- 用途：显示用户的个人资料页面

#### 求租详情页
```
http://192.168.2.227:8080/?rentId=1
```
- 参数：`rentId`
- 目标页面：`/request/index.html`
- 用途：显示求租请求的详细信息

#### 店铺详情页
```
http://192.168.2.227:8080/?shopId=44
```
- 参数：`shopId`
- 目标页面：`/shop/index.html`
- 用途：显示店铺的详细信息

#### 默认首页
```
http://192.168.2.227:8080/
```
- 无参数时访问默认首页

### 配置文件工作流程

```
请求到达 → 判断URL参数 → 路由到相应页面 → 返回HTML
     ↓
检查静态资源目录 → 若匹配则返回资源
     ↓
检查API代理规则 → 若为/api/则代理到后端
     ↓
404处理
```

## 部署步骤

### 第一步：环境准备

**系统要求：**
- 已安装nginx（推荐版本 1.18+）
- 确保8080端口可用
- 项目文件位于 `d:/work/unified_static` 目录

**验证nginx安装：**
```bash
nginx -v
```

### 第二步：配置文件部署

#### Windows系统部署

1. **定位nginx配置目录**
   ```bash
   # 查找nginx配置目录，通常为：
   C:\nginx\conf\vhosts\
   ```

2. **复制配置文件**
   ```bash
   # 将 zhenhaopu.conf 复制到nginx的vhosts目录
   cp d:\work\unified_static\zhenhaopu.conf C:\nginx\conf\vhosts\
   ```

3. **编辑主nginx配置**
   
   打开 `C:\nginx\conf\nginx.conf`，在http块中添加：
   ```nginx
   include conf/vhosts/*.conf;
   ```

#### 其他系统部署

```bash
# Linux/Mac系统
sudo cp zhenhaopu.conf /etc/nginx/sites-enabled/
# 或
sudo cp zhenhaopu.conf /usr/local/nginx/conf/vhosts/
```

### 第三步：配置参数调整（重要）

根据您的实际环境，修改 `zhenhaopu.conf` 中的以下参数：

#### 基础配置
```nginx
listen 8080;              # 修改为实际需要的端口
server_name localhost;    # 修改为实际的服务器名称

root d:/work/unified_static;  # 修改为项目实际路径
```

#### API代理配置
```nginx
location /api/ {
    proxy_pass http://localhost:5001;  # 修改为实际的后端服务地址
    # 其他代理设置保持不变
}
```

### 第四步：启动nginx

#### 测试配置文件

在启动前，先验证配置文件是否正确：

```bash
# Windows系统
nginx -t -c "C:\nginx\conf\nginx.conf"

# Linux/Mac系统
sudo nginx -t -c "/etc/nginx/nginx.conf"
```

如配置正确，会显示：
```
nginx: the configuration file ... syntax is ok
nginx: configuration file ... test is successful
```

#### 启动服务

```bash
# Windows系统 - 启动nginx
nginx

# Linux/Mac系统 - 启动nginx
sudo nginx

# 或如果已有nginx运行，重新加载配置
nginx -s reload
```

#### 停止服务

```bash
# Windows系统
nginx -s stop

# Linux/Mac系统
sudo nginx -s stop
```

## 使用示例

部署完成后，打开浏览器访问以下URL：

### 用户资料页示例

访问用户ID为44的资料页：
```
http://192.168.2.227:8080/?userId=44
```

预期结果：
- 页面加载 `/profile/index.html`
- 前端JS代码可以通过查询参数获取userId=44
- 页面加载用户ID为44的相关数据

### 求租详情页示例

访问求租ID为1的详情页：
```
http://192.168.2.227:8080/?rentId=1
```

预期结果：
- 页面加载 `/request/index.html`
- 前端JS代码可以通过查询参数获取rentId=1
- 页面加载相应的求租信息

### 店铺详情页示例

访问店铺ID为44的详情页：
```
http://192.168.2.227:8080/?shopId=44
```

预期结果：
- 页面加载 `/shop/index.html`
- 前端JS代码可以通过查询参数获取shopId=44
- 页面加载相应的店铺信息

## 前端代码集成

在各页面的JavaScript代码中，需要解析URL参数并加载相应的数据：

### 获取查询参数

```javascript
// 获取URL查询参数
function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}

// 用户资料页 - profile/js/main.js
const userId = getQueryParam('userId');
if (userId) {
    // 根据userId加载用户数据
    loadUserData(userId);
}

// 求租详情页 - request/js/main.js
const rentId = getQueryParam('rentId');
if (rentId) {
    // 根据rentId加载求租详情
    loadRentData(rentId);
}

// 店铺详情页 - shop/js/main.js
const shopId = getQueryParam('shopId');
if (shopId) {
    // 根据shopId加载店铺数据
    loadShopData(shopId);
}
```

## 目录结构

```
unified_static/
├── common/                  # 公共资源（所有页面共用）
│   ├── css/
│   │   ├── common.css      # 公共样式
│   │   └── reset.css       # 重置样式
│   ├── js/
│   │   ├── common.js       # 公共脚本
│   │   └── utils.js        # 工具函数
│   └── banner.html         # 公共横幅
│
├── profile/                 # 用户资料页
│   ├── css/
│   │   └── style.css       # 页面样式
│   ├── js/
│   │   └── main.js         # 页面逻辑
│   ├── index.html          # 页面入口
│   └── nginx.conf          # 页面级nginx配置（可选）
│
├── request/                 # 求租详情页
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   ├── index.html
│   └── nginx.conf
│
├── shop/                    # 店铺详情页
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   ├── index.html
│   └── nginx.conf
│
├── zhenhaopu.conf          # nginx配置文件（核心）
└── README.md               # 本说明文档
```

## 技术特性详解

### 1. 静态文件服务

配置中为每个目录单独配置了try_files规则：

```nginx
location /profile/ {
    try_files $uri =404;
}
```

这确保只有实际存在的文件才被返回，不存在的文件返回404。

### 2. 动态路由机制

通过if条件判断查询参数，然后使用rewrite规则重定向到相应页面：

```nginx
if ($arg_userId) {
    rewrite ^ /profile/index.html last;
}
```

- `$arg_userId` - 获取userId查询参数
- `rewrite ^ /profile/index.html last` - 重写请求到profile页面

### 3. API代理

所有/api/前缀的请求都被代理到后端服务：

```nginx
location /api/ {
    proxy_pass http://localhost:5001;
    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;
}
```

### 4. Gzip压缩

启用Gzip压缩可以显著减少传输数据量：

```nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_comp_level 6;
```

## 故障排除

### 问题1：无法访问指定页面

**症状：** 访问 `http://192.168.2.227:8080/?userId=44` 返回404或错误

**解决方案：**
1. 检查nginx配置是否正确加载
2. 验证项目路径是否正确
3. 检查nginx是否已启动

```bash
# 检查nginx进程
ps aux | grep nginx  # Linux/Mac
tasklist | findstr nginx  # Windows

# 查看nginx错误日志
tail -f /var/log/nginx/error.log  # Linux/Mac
```

### 问题2：静态资源加载失败

**症状：** 页面加载但CSS、JS文件无法加载

**解决方案：**
1. 检查文件路径是否正确
2. 在浏览器开发者工具中查看Network标签，检查请求URL
3. 确保文件路径与配置中的root路径一致

### 问题3：路由不生效

**症状：** 带参数的URL没有正确路由到对应页面

**解决方案：**
1. 验证nginx配置中的if条件
2. 检查rewrite规则语法
3. 重新加载nginx配置

```bash
nginx -s reload
```

### 问题4：端口被占用

**症状：** 启动nginx时提示端口已被占用

**解决方案：**

```bash
# Windows - 查找占用8080端口的进程
netstat -ano | findstr :8080

# 杀死占用端口的进程
taskkill /PID <PID> /F

# Linux/Mac - 查找占用8080端口的进程
lsof -i :8080

# 杀死占用端口的进程
kill -9 <PID>
```

## 日志查看

### Windows系统

nginx日志通常位于：
```
C:\nginx\logs\
```

### Linux/Mac系统

```bash
# 访问日志
tail -f /var/log/nginx/access.log

# 错误日志
tail -f /var/log/nginx/error.log
```

## 高级配置

### 自定义端口

如需使用其他端口，修改配置文件：

```nginx
listen 9090;  # 改为9090端口
```

然后访问：
```
http://192.168.2.227:9090/?userId=44
```

### 自定义域名

如需使用自定义域名，修改配置文件：

```nginx
server_name example.com;
```

### 跨域配置

如前端和后端不在同一域名，可添加CORS头：

```nginx
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
```

## 移动端DeepLink集成

### 原生应用跳转示例

在移动端原生应用中，可以通过以下方式跳转到Web页面：

```
// iOS
UIApplication.shared.open(URL(string: "http://192.168.2.227:8080/?userId=44")!)

// Android
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setData(Uri.parse("http://192.168.2.227:8080/?userId=44"));
startActivity(intent);
```

## 常见应用场景

### 场景1：分享功能
用户在应用中分享用户资料，生成链接：
```
http://192.168.2.227:8080/?userId=44
```
其他用户点击链接可在Web浏览器中查看资料。

### 场景2：通知点击跳转
应用收到服务器下发的通知，点击后跳转到：
```
http://192.168.2.227:8080/?rentId=1
```

### 场景3：商品详情推广
店铺推广链接：
```
http://192.168.2.227:8080/?shopId=44
```

## 扩展建议

1. **添加更多参数** - 可扩展支持其他查询参数
2. **缓存优化** - 配置适当的缓存策略提高性能
3. **HTTPS** - 生产环境建议配置SSL证书
4. **监控** - 添加访问统计和监控

## 支持和帮助

如遇到问题，请检查：
1. nginx配置语法是否正确
2. 项目路径是否存在
3. 端口是否被占用
4. 防火墙是否开放了8080端口