# LokiWeb

**Repository Path**: LGBd/loki-web

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-01
- **Last Updated**: 2026-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LokiWeb — Loki 日志查询页面

**纯静态单文件** `index.html`，无构建、无后端依赖，通过 [Loki HTTP API](https://grafana.com/docs/loki/latest/reference/loki-http-api/) 查询日志。

## Docker 部署（推荐）

镜像内置 nginx，将页面与 Loki API **同源代理**，无需配置 CORS。页面中 **Loki 地址留空** 即可。

### 拉取并运行

```bash
docker pull liuguibiao/loki-web:v1.0.5

docker run -d --name loki-web -p 8080:80 \
  -e LOKI_BACKEND=http://172.13.1.10:32094 \
  liuguibiao/loki-web:v1.0.5
```

访问 http://localhost:8080。**Loki 地址留空**（走 nginx 同源代理），否则会 CORS。

若 Loki 与页面部署在同一地址（如 `http://172.13.1.10:32094`），可在 Loki 地址栏填写该地址并从该 URL 打开页面。

### 构建并推送到 Docker Hub

```bash
# 登录（首次）
docker login

# 构建
docker build -t lgbd/loki-web:latest .

# 推送（将 lgbd 换成你的 Docker Hub 用户名）
docker push lgbd/loki-web:latest
```

或使用脚本：

```bash
sh docker-build-push.sh
# 自定义：DOCKER_IMAGE=yourname/loki-web DOCKER_TAG=latest sh docker-build-push.sh
```

### docker-compose

```bash
# 修改 docker-compose.yml 中的 LOKI_BACKEND
docker compose up -d
```

| 环境变量 | 默认值 | 说明 |
|----------|--------|------|
| `LOKI_BACKEND` | `http://loki:3100` | 上游 Loki 地址（不含尾部 `/`） |

## 重要：CORS 说明

浏览器安全策略下，**纯 HTML 无法跨域访问 Loki**。若 Network 出现 `CORS error`，必须满足以下之一：

| 方案 | 说明 |
|------|------|
| **同源部署（推荐）** | 将 `index.html` 部署到与 Loki **相同域名和端口**，页面中 Loki 地址**留空** |
| **网关配置 CORS** | 在 Loki 前置 nginx/ingress 添加 `Access-Control-Allow-Origin` 响应头 |

不能用 `file://` 直接双击打开，也不能从 `localhost` 页面访问 `172.x.x.x` 的 Loki（除非配置了 CORS）。

## 同源部署示例（nginx）

将 `index.html` 放到服务器，与 Loki API 共用 `http://172.13.1.10:32094`：

```nginx
server {
    listen 32094;

    location / {
        root /path/to/LokiWeb;
        index index.html;
    }

    location /loki/ {
        proxy_pass http://loki:3100/loki/;
    }

    location /ready {
        proxy_pass http://loki:3100/ready;
    }
}
```

访问 `http://172.13.1.10:32094/`，Loki 地址留空即可。

## 跨域 + CORS 示例

若页面与 Loki 不同源，需在代理层加 CORS 头：

```nginx
location /loki/ {
    proxy_pass http://loki:3100/loki/;
    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Content-Type, Accept" always;
    if ($request_method = OPTIONS) { return 204; }
}
```

页面中填写完整 Loki 地址，如 `http://172.13.1.10:32094`。

## 功能说明

| 功能 | 说明 |
|------|------|
| 命名空间 | `{namespace="dev"}` |
| 服务名 Label | `app` / `service` / `pod` / `container_name` |
| 日志内容 | `\|= "ERROR"` |
| 时间排序 | 最新在前 / 最旧在前 |
| 时间范围 | 10m / 30m / 1h / 最近 / 自定义 |
| 高级 LogQL | 手写完整表达式 |

查询条件保存在浏览器 `localStorage`。

## LogQL 示例

```logql
{namespace="dev",app="hall"} |= "ERROR"
{namespace="dev",pod=~"hall-.*"} |= "timeout"
```