# 本地开发连接线上 Prod 环境指南

## 背景

本地开发时，默认 API 代理指向 `https://dev-clinic.pingcap.com`（`local_dev` 环境）。如果需要连接线上 Prod 环境（`https://clinic.pingcap.com`），由于 Auth0 OAuth 回调地址未配置 `localhost`，无法直接走登录流程。解决办法是从线上手动复制 Cookie 和 CSRF Token 到本地。

## 步骤

### 1. 配置 `.env.local` 切换到 Prod

在 `packages/clinic-web/` 目录下创建或编辑 `.env.local` 文件（该文件已被 `.gitignore` 忽略，不会提交）：

```bash
# packages/clinic-web/.env.local
DEPLOY_ENV=prod
```

> `DEPLOY_ENV=prod` 会让本地代理目标切换为 `https://clinic.pingcap.com`（见 `builder.js` 第 80-85 行）。

### 2. 从线上 Prod 复制 Cookie

1. 打开浏览器，访问 [https://clinic.pingcap.com/clinic/](https://clinic.pingcap.com/clinic/) 并登录
2. 打开 DevTools → **Application** → **Cookies** → `https://clinic.pingcap.com`
3. 找到所有 Cookie，**全部复制为一个字符串**（格式：`key1=value1; key2=value2; ...`）

   - 快捷方式：DevTools → **Network** 面板 → 随便点一个 `/clinic/api/v1/` 请求 → **Headers** → 复制 `Cookie` 请求头的完整值

4. 将复制的 Cookie 写入 `.env.local`：

```bash
# packages/clinic-web/.env.local
DEPLOY_ENV=prod
PROXY_COOKIE=session=xxx; _ga=xxx; ...（此处粘贴完整 Cookie 字符串）
```

> `PROXY_COOKIE` 环境变量会被注入到所有代理请求的 `Cookie` 头中（见 `builder.js` 第 92-96 行），从而绕过本地无法登录的问题。

### 3. 从线上 Prod 复制 CSRF Token

CSRF Token 存储在浏览器 localStorage 中，key 为 `clinic.auth.csrf_token`。前端每次 API 请求都会通过 `x-csrf-token` 请求头发送它。

1. 在已登录的 Prod 页面，打开 DevTools → **Application** → **Local Storage** → `https://clinic.pingcap.com`
2. 找到 `clinic.auth.csrf_token`，复制其值
3. 本地启动后，打开 `http://localhost:8181/clinic/`，在 DevTools → **Application** → **Local Storage** → `http://localhost:8181` 中手动添加：
   - Key: `clinic.auth.csrf_token`
   - Value: （粘贴从 Prod 复制的值）

> 也可以在浏览器 Console 中执行：
>
> ```js
> localStorage.setItem('clinic.auth.csrf_token', '粘贴你的 token')
> ```

### 4. 启动本地开发服务器

```bash
cd packages/clinic-web
pnpm dev
```

浏览器会自动打开 `http://localhost:8181/clinic/`。此时所有 API 请求会代理到 `https://clinic.pingcap.com`，并携带你从线上复制的 Cookie 和 CSRF Token。

### 5. 刷新页面验证

如果一切正常，页面应能正常加载数据。如果遇到 401 跳转到登录页，说明 Cookie 或 CSRF Token 已过期，需要重新从线上复制。

## 注意事项

- **Cookie 和 CSRF Token 有时效性**，过期后需要重新从线上复制
- **不要提交 `.env.local`**，该文件包含敏感凭证（已在 `.gitignore` 中忽略）
- Prod 环境的数据是**真实数据**，操作需谨慎
- 如果需要同时修改前端环境变量（如 `REACT_APP_RELEASE_ENV`），也可以在 `.env.local` 中覆盖：
  ```bash
  REACT_APP_RELEASE_ENV=prod
  REACT_APP_REGION=global
  ```

## 快速参考

| 配置项                   | 说明                                                           | 位置                |
| ------------------------ | -------------------------------------------------------------- | ------------------- |
| `DEPLOY_ENV`             | 控制代理目标 (`prod` / `staging` / `local_dev`)                | `.env.local`        |
| `PROXY_COOKIE`           | 注入到代理请求的 Cookie 头                                     | `.env.local`        |
| `clinic.auth.csrf_token` | 前端 API 请求的 CSRF Token                                     | 浏览器 localStorage |
| 代理路径                 | `/clinic/api/v1`, `/ngm/api/v1`, `/fault/api`, `/chaos/api` 等 | `builder.js`        |