# 八、收银台/运营平台上线配置

```{important}
🎯 **本章目标：** 只上线 web-pay，先搭好「统一收款中台」的线上环境。

**本章完成后，你将拥有这些可访问的线上入口：**

| 你能打开什么 | 线上地址示例 | 实际作用 |
| --- | --- | --- |
| 统一收银台 | `https://pay.example.com` | 用户付款页（后续由 SaaS 带订单跳转进来） |
| 运营平台 | `https://paymanager.example.com` | 登录后台，管理商户、应用、订单与通道 |
| 支付网关 API | `https://pay-api.example.com` | 承接微信 / 支付宝公网回调 |
| 运营平台 API | `https://paymanager-api.example.com` | 运营后台接口，供前端调用 |

**过关时你应该能确认：**

- 四个域名 DNS、HTTPS 均已生效
- 两个前端已通过 OBS/CDN 发布，页面能打开且为最新构建
- 两个后端已在服务器运行，宝塔把 API 域名反代到 `9216` / `9217`
- 能用第 5 章账号登录 **线上** 运营平台
- CodeArts 流水线已对 `main` 分支自动构建，并把前端 `dist`、后端 Jar 发布到线上对应位置

**本章还不做：** 创建 SaaS 订单、验证付款回调与业务订阅更新。这些统一放到第 9 章的本地支付闭环里，避免第一次上线 web-pay 时同时排查平台与业务两套系统。
```

## 8.1 域名规划

### 先用通俗话理解 OBS + CDN

上线前，前端会先被构建成一堆静态文件（`index.html`、`.js`、`.css`、图片等）。这类页面不需要像 Java 后端那样 7×24 在服务器上跑进程，更适合交给专门的「静态托管 + 加速」方案：


| 名词                    | 可以怎么理解                                 | 在本项目里干什么                                             |
| ------------------------- | ---------------------------------------------- | -------------------------------------------------------------- |
| **OBS**（对象存储）     | 云端大仓库，专门放网页文件                   | 存放收银台、运营平台构建后的`dist`                           |
| **CDN**（内容分发网络） | 在全国各地设了很多「快递点」，用户就近取页面 | 绑定你的域名，让用户打开`https://pay.example.com` 更快、更稳 |

![OBS 与 CDN 承接前端静态文件](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-06-081-obs-cdn-meaning.png)

**为什么网站前端不直接放在云服务器上？** 可以，但一般不划算：服务器更适合跑后端 Jar；静态页走 OBS/CDN 通常更省、更容易扩容，也和后面 CodeArts「构建 → 上传 → 刷新缓存」的发布方式一致。

### 如果是微信小程序或 App，前端放哪里？

不同产品形态，用户「打开方式」不同，上线位置也不一样：


| 前端类型       | 用户怎么访问                 | 通常上线到哪里                                |
| ---------------- | ------------------------------ | ----------------------------------------------- |
| **网站 / H5**  | 浏览器输入网址，或从链接点开 | OBS + CDN（或同类静态托管）                   |
| **微信小程序** | 在微信里搜索或扫码打开       | 微信开发者工具上传代码包到**微信平台**        |
| **手机 App**   | 应用商店安装后打开           | **App Store / 应用市场** 上架，或企业内部分发 |

![不同前端形态的上线位置](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-07-081-frontend-types.png)

收银台、运营平台、后续真实 SaaS 独立站里的 H5 前端，都属于 **网站应用**：用户通过域名在浏览器里访问，所以生产环境把页面放到 OBS/CDN，再让域名指向 CDN 即可。

```{tip}
💡 本教程的 web-pay 收银台与运营平台是 **Vue 网站前端**，不是微信小程序包，也不是原生 App。你要做的是：任何人只要在浏览器里输入 `https://pay.example.com` 或 `https://paymanager.example.com`，就能打开对应页面——这正是 OBS/CDN 擅长的场景。若你以后把业务做成小程序或 App，业务页走微信 / 应用市场上线；**统一收银台仍建议保留网站形态**，方便从 H5、短信链接、外部浏览器跳转付款。
```

### 本项目的四个线上域名

web-pay 线上拆成 **四个入口**：两个 **网站前端** 走 OBS/CDN，两个 **后端 API** 走云服务器 + 宝塔 Nginx 反向代理。后面 OBS 上传、CDN 刷新、宝塔反代和支付平台回调，都围绕这张表展开。

![web-pay 四个线上入口](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/prepare-accounts-13-domain-four-entrypoints.png)


| 域名                         | 指向                          | 作用                                        |
| ------------------------------ | ------------------------------- | --------------------------------------------- |
| `pay.example.com`            | OBS/CDN                       | 统一收银台前端，用户在浏览器里付款          |
| `pay-api.example.com`        | 宝塔/Nginx →`127.0.0.1:9216` | 支付网关 API；**微信 / 支付宝回调也填这里** |
| `paymanager.example.com`     | OBS/CDN                       | 运营平台前端，你在浏览器里管理商户与订单    |
| `paymanager-api.example.com` | 宝塔/Nginx →`127.0.0.1:9217` | 运营平台后端 API，供运营前端调用            |

```{tip}
💡 **小技巧：从 8.2 起的操作方式是通用的。** 本章用 web-pay 的收银台、运营平台举例，但步骤本身可以复用到你后续所有 **网站 / H5 / SaaS 前端**（构建 `dist` → 上传 OBS → 绑定 CDN → 刷新缓存）、**所有 Java 后端**（构建 Jar → 上传服务器 → 宝塔反代 → 配置 HTTPS），以及 **CodeArts CI/CD**（把同样的命令固化成流水线）。换项目时主要改的是域名、桶名、端口和路径，流程不用重学一遍。
```

## 8.2 OBS+CDN 前端上线配置

web-pay 有两个前端：收银台给用户付款用，运营平台给你查订单和管理应用用。两个前端都按同一套流程上线：确认生产接口地址 → 构建 `dist` → 上传 OBS → 绑定 CDN → 配置 HTTPS → 刷新缓存。

第一次操作时建议先只做 `pay.example.com` 收银台，跑通后再照着做 `paymanager.example.com` 运营平台。这样遇到 DNS、证书或 CDN 缓存问题时，排查范围会小很多。

![web-pay 前端 OBS/CDN 上线链路](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-01-082-obs-cdn-flow.png)

```{important}
🎯 **前端上线先验“容器”,再验“内容”。** 8.2 先把 OBS、CDN、DNS、HTTPS 配好;真正的页面文件会在 8.3 通过 CodeArts 上传。这个顺序能把域名问题和构建上传问题分开排查。
```

### 8.2.1 配置收银台前端 `pay.example.com`

下面以收银台为例说明。运营平台只需要把域名、桶名和上传目录换成 `paymanager` 那一组。

```{tip}
📌 下文步骤标题中的 **【OBS】**、**【CDN】**、**【DNS】**、**【云证书】** 表示当前要在对应云服务控制台操作。看到哪个标签，就切换到该产品的控制台（对象存储 / CDN / 域名解析 / SSL 证书）；华为云、腾讯云、阿里云等入口名称可能不同，但按标签对应即可。
```

![收银台前端域名配置顺序](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-08-082-cashier-frontend-setup.png)

**1. 【OBS】创建独立 OBS 桶**

建议桶名和域名一致，例如 `pay.example`。区域尽量选择和云服务器、RDS 相同或相近的区域，后续管理起来更清楚。

![创建 OBS 桶](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-01.png)

**2. 【OBS】开启静态网站托管和公共读策略**

静态网站托管里建议这样填：


| 配置项        | 建议值       |
| --------------- | -------------- |
| 默认首页      | `index.html` |
| 默认 404 页面 | `index.html` |

`404` 也指向 `index.html` 是因为收银台、运营平台都是前端路由应用。用户刷新 `/cashier/...` 这类页面时，OBS 要先返回 `index.html`，再让前端路由接管。

公共读策略只用于公开访问前端静态文件。不要把后端配置、密钥、证书私钥或支付平台敏感参数上传到这个桶。

```{danger}
🔐 **OBS 前端桶是公开访问位置。** 这里只能放构建后的 `index.html`、JS、CSS、图片等静态资源;数据库密码、SSH 密码、AppSecret、支付密钥、微信证书私钥都不能放进这个桶。
```

![开启静态网站托管](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-02.png)
![配置公共读策略](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-03.png)

**3. 【OBS】开启 CDN 域名加速**

给收银台前端添加 CDN 加速域名：


| 配置项   | 建议值                           |
| ---------- | ---------------------------------- |
| 加速域名 | `pay.example.com`                |
| 源站类型 | 对应的 OBS 桶或 OBS 静态网站域名 |
| 业务类型 | 网站加速 / 静态资源加速          |

![开启 CDN 域名加速](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-05.png)
![配置 CDN 源站](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-04.png)

**4. 【DNS】解析 CDN CNAME**

如果你在备案通过后，**还没有**给云服务器公网 IP 配置解析，则可按照下图配置参照下图添加记录即可（华为云、腾讯云、阿里云等界面字段名略有不同，但都是「主机记录 + 类型 + 记录值」）：

![添加 CDN CNAME 解析](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-06.png)

CDN 创建完成后，控制台会给出一个 CNAME 接入域名。按上图添加解析：


| 主机记录 | 类型  | 记录值                 |
| ---------- | ------- | ------------------------ |
| `pay`    | CNAME | CDN 控制台分配的 CNAME |

![确认 CDN 解析生效](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-07.png)

```{tip}
DNS 生效有延迟。刚添加 CNAME 后如果访问不到,先等几分钟再查;不要同时改多条记录,否则很难判断是哪一步生效了。
```

**5. 【云证书】为域名申请独立 SSL 证书**

**为什么要申请 SSL？** SSL 证书的作用，是让 `pay.example.com` 能用 **HTTPS**（地址以 `https://` 开头）对外提供服务。用户打开收银台时，浏览器和 CDN 之间传输的页面、脚本会被加密；地址栏会显示锁标或「连接是安全的」，而不是「不安全」。

对本项目来说，这一步不是可选项：

- 本章过关标准要求四个域名 **HTTPS 均已生效**（见本章开头清单）。
- 收银台是用户付款页，若只有 HTTP，浏览器会明显提示「连接不安全」，直接影响信任感。
- 后续 SaaS、H5、短信链接跳转到收银台时，线上地址通常也写成 `https://pay.example.com`。

**申请 SSL 和「不申请」有什么不同？**


| 情况                                         | 用户访问`pay.example.com` 时的效果                                                                       |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| **已申请并部署到 CDN**（完成本步及 8、9 步） | 可用`https://` 打开，传输加密，浏览器一般不拦截，符合线上收款页预期                                      |
| **未申请或未部署**                           | 多数情况下只能`http://` 访问；浏览器提示不安全，部分跳转场景可能被限制；无法满足本章「HTTPS 生效」的验收 |

为 `pay.example.com` 申请 SSL 证书。免费证书通常有有效期，到期前需要续签并重新部署到 CDN。

申请证书时如果选择 DNS 验证，证书控制台会给出一条 TXT 或 CNAME 校验记录。把它添加到 DNS 控制台，等待证书签发通过。

![申请 SSL 证书](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-08.png)
![填写证书域名](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-09.png)
![等待证书签发](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-10.png)

**6. 【DNS】解析 SSL 证书校验记录**

按证书控制台提示添加校验记录。添加后不要立刻重复申请，先等 DNS 生效；多数情况下几分钟内会通过。

![添加证书 DNS 校验记录](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-11.png)

**7. 【CDN】部署 SSL 证书并开启 HTTPS 强制跳转**

证书签发后，把证书部署到 `pay.example.com` 对应的 CDN 域名，并开启 HTTPS。建议同时开启 HTTP 强制跳转 HTTPS，避免用户访问 `http://pay.example.com` 时出现不安全提示。

![部署 SSL 证书到 CDN](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-12.png)
![开启 HTTPS 强制跳转](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-13.png)

**8. 【CDN】配置回源 HOST 并刷新 CDN 缓存**

回源 HOST 保持为 CDN 控制台推荐的 OBS 源站域名或桶域名。配置完成后刷新 CDN 缓存。
![配置回源 HOST 并刷新 CDN 缓存](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-14.png)
![配置回源 HOST 并刷新 CDN 缓存](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/Online-15.png)

### 8.2.2 照同样步骤配置运营平台

收银台跑通后，再按同样流程配置运营平台。需要替换的地方主要是：


| 项目     | 收银台            | 运营平台                 |
| ---------- | ------------------- | -------------------------- |
| 前端域名 | `pay.example.com` | `paymanager.example.com` |
| OBS 桶   | 收银台独立桶      | 运营平台独立桶           |
| CDN 域名 | 收银台 CDN        | 运营平台 CDN             |
| SSL 证书 | `pay.example.com` | `paymanager.example.com` |

![运营平台复用收银台前端上线流程](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-09-082-manager-frontend-copy.png)

```{warning}
收银台和运营平台建议使用两个独立 OBS 桶、两个独立 CDN 域名。不要把两个前端的 `dist` 混传到同一个目录里,否则刷新缓存和排查旧文件时会很乱。
```

### 8.2.3 前端上线验收

两个前端都配置完成后，分别访问：

```text
https://pay.example.com
https://paymanager.example.com
```

![前端上线五步检查](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-02-082-frontend-checklist.png)

```{warning}
⚠️ **此时访问域名出现 404 或空白页，通常是正常的。** 8.2 已经把前端的「容器」搭好了——OBS 桶、CDN、DNS、HTTPS 都已指向正确位置，但桶里往往还 **没有** 上传 `dist` 里的 `index.html` 和静态资源。用户打开 `https://pay.example.com` 时，CDN 回源到空桶，就会看到 404 或对象存储默认错误页。
**8.3 的 CI/CD自动化**，就是为了把编译好的前端 `dist`、后端 Jar **自动放进这些对应位置**，让域名真正对外提供页面和接口。
```

## 8.3 CI/CD 自动化

8.2 已经把 OBS 桶、CDN、DNS、HTTPS 等「容器」搭好。若此时访问前端域名仍是 404 或空白页，通常是因为桶里还没有 `dist` 静态文件。本节用 **CodeArts** 把编译好的前端 `dist`、后端 Jar **自动放进 8.2 对应位置**，让域名真正对外提供页面；后端进程启动与 API 反代仍在 **8.4** 完成。

```mermaid
flowchart LR
  GitPush[git_push_main] --> Pipeline[CodeArts_pipeline]
  Pipeline --> FETask[frontend_build_task]
  Pipeline --> BETask[backend_build_task]
  FETask --> OBSPay[pay_OBS_bucket]
  FETask --> OBSMgr[paymanager_OBS_bucket]
  BETask --> ServerJar["server_Jar_dirs"]
  OBSPay -.->|manual_CDN_refresh| CDN[CDN_cache]
  OBSMgr -.->|manual_CDN_refresh| CDN
  ServerJar -.->|manual_restart_see_8_4| JavaProc[Java_9216_9217]
```

![CodeArts 构建上传与手动生效动作](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-03-083-codearts-cicd.png)

```{important}
🧰 **CI/CD 负责“构建和上传”,不等于所有线上动作都已生效。** 前端上传后仍要刷新 CDN;后端 Jar 上传后仍要重启 Java 进程;API 域名反代和 HTTPS 仍在宝塔里完成。
```

### 8.3.1 CI/CD 是什么？为什么需要？

**CI/CD** 是 _Continuous Integration / Continuous Deployment_（持续集成 / 持续部署）的缩写。用大白话说：


| 概念               | 在本教程里指什么                                                                                                   |
| -------------------- | -------------------------------------------------------------------------------------------------------------------- |
| **持续集成（CI）** | 向 Git 仓库提交代码后，流水线自动拉代码，并执行与`build-prod-frontend.sh` / `build-prod-backend.sh` 等价的构建命令 |
| **持续部署（CD）** | 构建成功后，把产物放到 8.2 已搭好的线上位置：前端`dist` 上传到两个 OBS 桶；后端 Jar 上传到云服务器目录             |

**CodeArts 在本项目里实际自动完成与仍需你手动完成的分工：**


| 环节     | CodeArts 流水线内                                              | 需你在云服务/服务器上额外做                                             |
| ---------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------- |
| 前端构建 | 执行`build-prod-frontend.sh` 等价命令，生成两个 `dist`         | —                                                                      |
| 前端发布 | 上传到收银台、运营平台 OBS 桶                                  | **【CDN】** 手动刷新两个前端域名缓存（见 8.2 第 8 步）                  |
| 后端构建 | 执行`build-prod-backend.sh` 等价 Maven 打包                    | —                                                                      |
| 后端发布 | 执行`upload-zhcpay-backend-jars.sh` 等价逻辑，scp 到服务器目录 | **8.4** 停止旧进程并 `nohup java -jar` 重启（上传成功不等于进程已切换） |

![CI/CD 自动构建上传与人工生效边界](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-10-083-cicd-role.png)

**为什么需要？** 每次改代码或改 `.env` 都要记住：构建 → 上传 OBS → 刷 CDN / 上传 Jar → 重启服务。步骤一多就容易漏（只改了配置没 rebuild、上传了旧目录、忘了刷 CDN）。CI/CD 把 **构建与上传** 固化成 CodeArts 流水线，每次 `main` 分支发布走同一条路径，减少人为失误。

**配置完成后，日常操作可以简化为：**

```text
本地改代码 → git commit → git push 到 main → 流水线自动构建并上传产物
→ 【CDN】刷新前端缓存（每次前端发布后）
→ 若含后端变更：按 8.4 重启 Java 进程
```

本章以华为云 **CodeArts** 为例；GitHub Actions、GitLab CI 等思路相同，只是界面与凭据配置不同。

### 8.3.2 配置前检查

进 CodeArts 前，先确认下面几项已就绪，避免流水线跑绿但线上不对：


| 检查项                | 说明                                                  | 去哪里核对                                                              |
| ----------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------- |
| 8.2 已完成            | 两个 OBS 桶、CDN、DNS、SSL 均已配置                   | 本章 8.2                                                                |
| 生产前端`.env`        | `VUE_APP_API_BASE_URL` 等已指向线上 API 域名          | `zhcpay-ui/zhcpay-ui-cashier/.env`、`zhcpay-ui/zhcpay-ui-manager/.env`  |
| 后端`application.yml` | RDS 内网地址、ActiveMQ 等生产配置已写好（会打进 Jar） | `zhcpay/zhcpay-payment/src/main/resources/application.yml` 等；详见 8.4 |
| SSH 上传参数          | `SSH_HOST`、`SSH_USER`、`SSH_PASSWORD` 与远端目录正确 | `env-scripts/upload-zhcpay-backend-jars.sh`；第 3 章 SSH 与密码安全     |
| 私有代码仓            | CodeArts 能拉取 web-pay 源码                          | 第 3 章 CodeArts 准备                                                   |

![进入 CodeArts 前的配置检查](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-11-083-preflight-check.png)

```{tip}
📌 复制进 CodeArts 构建步骤的命令，以**当前仓库**里的 `env-scripts/build-prod-frontend.sh`、`build-prod-backend.sh`、`upload-zhcpay-backend-jars.sh` 为准。
```

```{danger}
🔐 **不要把含生产密码的脚本暴露到公开仓库。** 如果 `upload-zhcpay-backend-jars.sh` 里写入了 `SSH_PASSWORD`,仓库必须保持私有;更稳妥的做法是在 CI/CD 平台使用安全变量或凭据管理。
```

**整体要配三块：** 两个「编译构建」任务（前端、后端）+ 一个「流水线」把二者串起来并在 `main` 分支 push 时触发。构建任务可先单独「保存并执行」调试；调通后再接入流水线。

### 8.3.3 在 CodeArts 创建项目并接入代码仓

![CodeArts 项目接入代码仓与 main 分支](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-12-083-codearts-repo.png)

1. **【CodeArts】** 登录后进入「所有项目」，新建或打开 web-pay 对应项目（示例名可为「收银台」）。

![新建或进入 CodeArts 项目](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-frontend-obs-0.png)

2. **【CodeArts】** 左侧进入 **编译构建 → 代码**，把私有 Git 仓库接入本项目（仓库名、分支以你实际为准，示例为 `main`）。
3. 流水线配置时，在 **持续交付 → 流水线** 里为流水线源选择同一代码仓与默认分支（见 8.3.6）。

![为流水线绑定 Git 仓库与 main 分支](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-pipeline-2.png)

### 8.3.4 构建任务一：收银台双前端构建 + OBS 上传

在 **编译构建 → 构建列表** 中 **新建任务**，任务名建议：**收银台双前端构建**。构建步骤按下面顺序配置（与截图一致）。

![前端构建并上传两个 OBS 桶](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-13-083-frontend-build-upload.png)

**步骤 1：进入构建任务列表并新建**

![编译构建列表中新建前端任务](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-frontend-obs-3.png)

**步骤 2：Npm 构建**


| 配置项         | 建议值                                                          |
| ---------------- | ----------------------------------------------------------------- |
| 工具版本       | `nodejs22`                                                      |
| 命令           | 将仓库`env-scripts/build-prod-frontend.sh` **全文**粘贴到命令框 |
| 失败后是否继续 | 否                                                              |

构建完成后产物路径：

- 收银台：`zhcpay-ui/zhcpay-ui-cashier/dist`
- 运营平台：`zhcpay-ui/zhcpay-ui-manager/dist`

![Npm 构建步骤：粘贴 build-prod-frontend.sh](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-frontend-obs-4.png)

**步骤 3：上传到收银台 OBS 桶**

在 Npm 构建后 **添加步骤 → 上传到 OBS**（第一个桶，对应 `pay.example.com`）：


| 配置项         | 建议值                                                                     |
| ---------------- | ---------------------------------------------------------------------------- |
| 构建产物路径   | `zhcpay-ui/zhcpay-ui-cashier/dist/**`                                      |
| 桶名           | 8.2 为收银台创建的 OBS 桶（如与域名一致的`pay.example`）                   |
| OBS 存储目录   | `/` 或 `./`（桶根目录）                                                    |
| 是否上传文件夹 | 是                                                                         |
| 忽略文件夹路径 | `zhcpay-ui/zhcpay-ui-cashier/dist`（只上传 `dist` 内文件，避免多一层目录） |
| 失败后是否继续 | 否                                                                         |

![上传到 pay 桶 OBS](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-frontend-obs-2.png)

**步骤 4：上传到运营平台 OBS 桶**

再添加第二个 **上传到 OBS** 步骤（对应 `paymanager.example.com`）：


| 配置项         | 建议值                                |
| ---------------- | --------------------------------------- |
| 构建产物路径   | `zhcpay-ui/zhcpay-ui-manager/dist/**` |
| 桶名           | 8.2 运营平台独立 OBS 桶               |
| 是否上传文件夹 | 是                                    |
| 忽略文件夹路径 | `zhcpay-ui/zhcpay-ui-manager/dist`    |
| 失败后是否继续 | 否                                    |

![上传到 paymanager 桶 OBS](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-frontend-obs-1.png)

保存任务后，可先 **保存并执行** 一次，确认 OBS 桶内出现 `index.html` 与静态资源。

```{important}
⚠️ **【CDN】不会随 OBS 上传自动刷新。** 每次前端构建任务成功上传后，需到 CDN 控制台对 `pay.example.com`、`paymanager.example.com` 分别执行缓存刷新（操作位置见 8.2 第 8 步）。否则浏览器可能仍看到旧页面或 404。
```

### 8.3.5 构建任务二：双后端构建 + 上传云服务器

再 **新建** 一个编译构建任务，任务名建议：**构建双后端后上传后端到云服务器**。

![后端 Maven 打包并上传服务器目录](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-14-083-backend-build-upload.png)

**步骤 1：Maven 构建**


| 配置项         | 建议值                                                                                                                                                                              |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 工具版本       | `maven3.8.5-jdk17`                                                                                                                                                                  |
| 命令           | 将仓库`env-scripts/build-prod-backend.sh` **全文**粘贴到命令框（等价于在 `zhcpay` 目录执行 `mvn -B -U clean package -Dmaven.test.skip=true -pl zhcpay-payment,zhcpay-manager -am`） |
| 失败后是否继续 | 否                                                                                                                                                                                  |

![Maven 构建：粘贴 build-prod-backend.sh](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-backend-upload-1.png)

**步骤 2：上传后端到云服务器**

添加 **Shell 命令** 步骤：


| 配置项         | 建议值                                                                 |
| ---------------- | ------------------------------------------------------------------------ |
| 工具版本       | 与 CodeArts 提供的 shell 环境一致（如带 git 的 shell 镜像）            |
| 命令           | 将仓库`env-scripts/upload-zhcpay-backend-jars.sh` **全文**粘贴到命令框 |
| 失败后是否继续 | 否                                                                     |

脚本默认上传到：


| 服务         | 远端目录                   | 本地 Jar                                          |
| -------------- | ---------------------------- | --------------------------------------------------- |
| 支付网关     | `/www/wwwroot/pay/payment` | `zhcpay/zhcpay-payment/target/zhcpay-payment.jar` |
| 运营平台后端 | `/www/wwwroot/pay/manager` | `zhcpay/zhcpay-manager/target/zhcpay-manager.jar` |

`SSH_HOST`、`SSH_USER`、`SSH_PASSWORD` 等应在第 5 章执行 `rename-saas-service.sh` 时已写入该脚本；勿把含密码的脚本提交到公开仓库。

```{warning}
后端上传任务会把 Jar 覆盖到服务器目录。首次配置时建议先单独执行一次并核对远端文件修改时间,确认目标目录正确后再接入完整流水线。
```

![Shell 上传：粘贴 upload-zhcpay-backend-jars.sh](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-backend-upload-2.png)

```{warning}
⚠️ 上传 Jar **成功** 只表示服务器目录里已是新文件，**不等于** `9216` / `9217` 进程已在跑新版本。每次后端发布上传完成后，需按 **8.4** 在服务器上停止旧进程并重新 `nohup java -jar` 启动。
```

### 8.3.6 流水线：串联任务并配置自动触发

![CodeArts 流水线串联阶段与 main 触发](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-15-083-pipeline-trigger.png)

1. **【CodeArts】** 左侧 **持续交付 → 流水线**，点击 **新建流水线**（示例名：**全自动 CI**）。

![流水线列表与新建入口](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-pipeline-1.png)

2. **任务编排**：建议两阶段串联——

   - **阶段 1**：调用构建任务「收银台双前端构建」（Npm 构建 + 两个 OBS 上传）。
   - **阶段 2**：调用构建任务「构建双后端后上传后端到云服务器」（Maven 构建 + Shell 上传）。

   也可先只编排前端阶段，调通后再加入后端阶段。
3. **触发设置**：打开 **代码提交事件**；**分支过滤** 设为「包含 `main`」，避免 feature 分支误触发上线。合并请求事件可按需关闭。

![流水线触发：main 分支代码提交](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/codearts-pipeline-3.png)

4. **首次验证**：保存流水线并手动执行一次，确认两个阶段均为成功（绿色）。之后日常只需 `git push` 到 `main`，由流水线自动构建并上传。

### 8.3.7 流水线成功后的必做与验收

**每次完整发布后，CodeArts 之外还要做：**


| 动作                                | 在哪里做                                                    | 不做会怎样                     |
| ------------------------------------- | ------------------------------------------------------------- | -------------------------------- |
| **【CDN】** 刷新两个前端域名缓存    | CDN 控制台                                                  | 页面仍是旧版，或误以为上传失败 |
| 服务器重启 Java（本次含后端变更时） | SSH，按 8.4 启动命令                                        | 接口仍跑旧 Jar                 |
| 浏览器打开验证                      | `https://pay.example.com`、`https://paymanager.example.com` | 无法确认用户侧效果             |

![流水线成功后的线上生效动作](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-16-083-after-pipeline-check.png)

**8.3 过关清单：**

- [ ] 前端构建任务单独执行成功，OBS 桶内有最新 `index.html` 与静态资源
- [ ] 后端构建 + 上传任务单独执行成功，服务器目录内有新 Jar
- [ ] 流水线在向 `main` push 后能自动跑通
- [ ] 已 **【CDN】** 刷新两个前端域名，页面可打开且为本次构建版本
- [ ] （若本次含后端变更）已按 8.4 重启 `9216` / `9217` 对应进程

#### 建议分两步：先验证前端 CI/CD，再完成后端上线

若你**尚未按 8.4 配置过后端**（云服务器上还没有跑起来的 `9216` / `9217`，宝塔也还没把 `pay-api`、`paymanager-api` 反代到本机端口），**现阶段不必急着跑完整流水线**，也**不必**先执行后端构建任务。先把精力放在「前端能不能自动构建并上传到 OBS」上即可。

![先验证前端再完成后端上线](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-17-083-two-step-rollout.png)

**第一步：只跑前端构建任务，验证 CI/CD 是否有效**

1. 在 CodeArts **编译构建** 里，只对任务 **「收银台双前端构建」** 点击 **保存并执行**（无需触发整条流水线，也无需跑「构建双后端后上传后端到云服务器」）。
2. 构建日志为绿色后，到 **【OBS】** 控制台检查两个桶：应能看到 `index.html` 以及 `js`、`css` 等静态资源。
3. 到 **【CDN】** 控制台刷新 `pay.example.com`、`paymanager.example.com` 的缓存（见 8.2 第 8 步）。
4. 浏览器访问 `https://pay.example.com`、`https://paymanager.example.com`，确认 8.2.3 提到的 404 / 空白页已消失，页面能正常打开。

此时若打开运营平台登录页后，接口请求失败或 Network 里 API 报错，**通常是正常的**——因为后端进程和 API 域名反代还没在 8.4 做完，前端暂时还连不上 `pay-api` / `paymanager-api`。只要 OBS 里有新产物、CDN 刷新后页面能展示，就说明 **「自动构建前端 → 自动上传到 OBS」** 这条 CI/CD 链路已经跑通。

**第二步：前后端自动化都配好后，完成「后端最后一公里」**

按 8.3.4～8.3.6 把 **前端构建任务、后端构建任务、流水线** 都配置完成后，日常发布在 CodeArts 侧大致是：


| 环节 | CI/CD 自动完成                      | 你仍需手动或按 8.4 完成                                          |
| ------ | ------------------------------------- | ------------------------------------------------------------------ |
| 前端 | 构建两个`dist` 并上传到对应 OBS 桶  | **【CDN】** 刷新两个前端域名缓存                                 |
| 后端 | Maven 打包并把 Jar scp 到服务器目录 | 在服务器**启动 / 重启** Java 进程；宝塔 配置 API 域名 HTTPS 反代 |

也就是说：**前端、后端的「编译 + 上传」** 都可以交给 CodeArts；但让线上服务真正可用，还差 **8.4 的后端上线**——把 CI/CD 已经放到云服务器里的 Jar **在合适目录启动起来**，并通过宝塔让 `https://pay-api.example.com`、`https://paymanager-api.example.com` 指向本机的 `9216`、`9217`。

只有做完 8.4，浏览器里的收银台、运营平台前端才能通过生产 `.env` 里配置的 API 地址，访问到真实的后端服务；第 5 章账号也才能登录 **线上** 运营平台。流水线里若已编排后端阶段，可在前端验证通过后再 **加入或启用** 后端构建阶段，并与 8.4 的首次启动配合使用。

```{tip}
💡 学习顺序小结：**8.2 搭容器 → 8.3 先单独跑通前端构建与 OBS 上传 → 8.4 配置并启动后端 + 宝塔 API 反代 → 8.3 再跑完整流水线（含后端）→ 8.5 整体验收**。不要在前端 CI 还没验证前就同时排查后端构建、上传与进程启动，排查范围会过大。
```

**CodeArts 显示成功但线上没变？** 优先查这三项（详见第 10 章排查表）：

1. **OBS 上传路径或「忽略文件夹路径」填错** — 桶里文件结构不对，CDN 回源异常。
2. **未刷新 CDN** — 桶里已是新文件，浏览器仍命中旧缓存。
3. **未重启 Java** — Jar 已上传，但进程仍加载旧包（仅在后端已上线且本次含后端变更时适用）。

## 8.4 后端上线配置

后端上线这一步，是把 8.3 已经构建并上传到服务器的 Jar 真正跑起来，再用宝塔把公网 HTTPS API 域名转发到服务器本机端口。

```{danger}
🔐 **公网只应该暴露 80 和 443。** `9216`、`9217`、`6379`、`61616` 等内部端口不要在安全组里对公网开放;外部访问统一走宝塔/Nginx 的 HTTPS 反向代理。
```

![后端 API 域名到本机 Java 端口的反向代理链路](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-04-084-backend-proxy.png)

### 8.4.1 【DNS解析】：将后端域名解析到公网 IP 上

在 DNS 控制台里，把后端 API 域名解析到云服务器公网 IP。这里主要配置两个入口：


| 主机记录         | 类型 | 记录值          |
| ------------------ | ------ | ----------------- |
| `pay-api`        | A    | 云服务器公网 IP |
| `paymanager-api` | A    | 云服务器公网 IP |

![后端 API 域名 A 记录解析到公网 IP](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-18-084-api-dns.png)

![DNS 解析后端域名](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-backend-01-dns.png)

```{warning}
⚠️ 支付平台回调要填 `pay-api.example.com` 这类后端 API 域名，不要填收银台前端域名，也不要填 `localhost`。
```

### 8.4.2 【宝塔页面】：安装需要软件

进入宝塔面板的软件商店，确认后端运行和反向代理需要的软件已经安装。重点检查 Java 环境、Nginx，以及后续会用到的运行管理能力。

![后端上线需要的宝塔软件能力](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-19-084-baota-software.png)

![宝塔安装需要软件](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-backend-02-baota-software.png)

### 8.4.3 【宝塔页面】：新建目录，上传 Jar 文件和 yml 配置文件

在服务器上为后端准备独立目录，并上传支付网关、运营平台后端需要的 Jar 与配置文件。建议保持和 8.3 上传脚本一致的目录结构：


| 服务         | 推荐目录                   | 端口   |
| -------------- | ---------------------------- | -------- |
| 支付网关后端 | `/www/wwwroot/pay/payment` | `9216` |
| 运营平台后端 | `/www/wwwroot/pay/manager` | `9217` |

![支付网关与运营后端目录文件关系](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-20-084-jar-yml-directories.png)

![新建目录并上传 Jar 与 yml](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-backend-03-upload-jar-yml.png)

```{tip}
💡 如果 8.3 的 CodeArts 后端上传任务已经跑通，这一步主要是核对服务器目录里是否已有最新 Jar；首次手动上线时，也可以先按截图在宝塔文件管理里上传。
```

### 8.4.4 【宝塔页面】：安装对应的 Java 环境 + 创建站点，进行后端管理

在宝塔里安装对应 Java 环境，并为后端创建站点或 Java 项目管理入口。支付网关和运营平台后端需要分别管理，便于独立启动、停止和查看日志。

![Java 环境与后端站点管理关系](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-21-084-java-site-management.png)

![安装 Java 环境](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-backend-04-java-env.png)

创建后端站点或 Java 项目后，进入对应管理页面确认运行目录、启动文件和端口。

![创建站点并进入管理](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-backend-05-site-manage.png)

```{important}
先确认 Java 进程在服务器本机能监听 `9216` 和 `9217`,再配置公网域名反代。内部端口都不通时,外部 HTTPS 域名一定也不会通。
```

### 8.4.5 【宝塔页面】：为后端添加域名

内部端口通了以后，在宝塔里为后端 API 添加站点域名：

```text
pay-api.example.com
paymanager-api.example.com
```

![为两个后端 API 添加站点域名](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-22-084-api-domains.png)

![为后端添加域名](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-backend-07-add-domain.png)

### 8.4.6 【宝塔页面】： 配置反向代理映射

配置反向代理，把公网 API 域名映射到本机后端端口：

```text
https://pay-api.example.com        -> http://127.0.0.1:9216
https://paymanager-api.example.com -> http://127.0.0.1:9217
```

![后端 API 域名反向代理到本机端口](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-23-084-reverse-proxy.png)

![配置反向代理映射](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-backend-09-reverse-proxy.png)

```{warning}
反向代理目标应使用服务器本机地址 `http://127.0.0.1:9216` 和 `http://127.0.0.1:9217`。不要把目标写成公网域名自身,否则容易形成代理循环或排查不清。
```

### 8.4.7 【宝塔页面】：申请并添加 SSL 证书

最后给两个 API 域名申请并添加 SSL 证书，让外部统一通过 HTTPS 访问后端接口。

![API 域名 HTTPS 与 SSL 依赖关系](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-24-084-api-ssl.png)

![申请并添加 SSL 证书](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-backend-10-ssl-cert.png)

```{important}
API 域名也必须是 HTTPS。支付平台回调、运营平台前端调用后端、浏览器跨域请求都会依赖稳定的 HTTPS API 地址。
```

### 8.4.8 【宝塔页面 - 收银台】：上传微信证书文件

接入微信支付证书，把微信证书文件上传到服务器证书目录：

```text
/www/wwwroot/pay/uploads/private/cert
```

![微信证书只放服务器私有目录](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-25-084-wechat-cert-private.png)

![上传微信证书文件](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-backend-11-wechat-cert-upload.png)

```{danger}
🔐 证书文件属于敏感材料，只放在服务器私有目录里。不要上传到 OBS 前端桶，也不要提交到 Git 仓库。
```

### 8.4.9 【CodeArts / 服务器】：验证 CI/CD 后端 Jar 是否已更新到服务器目录

8.4.1～8.4.8 主要完成 DNS、宝塔站点、反向代理、SSL 和微信证书等「运行环境」配置。本节专门验收 **8.3 后端 CI/CD** 是否把 Maven 构建产物正确 scp 到云服务器目录——与 8.5 的浏览器验收互补：这里只看 **Jar 文件是否已在磁盘上更新**。

**前置条件：**


| 检查项         | 说明                                                                                                           |
| ---------------- | ---------------------------------------------------------------------------------------------------------------- |
| 8.3.5 已配置   | 编译构建任务「构建双后端后上传后端到云服务器」中，Maven 步骤与 Shell 上传步骤均已粘贴对应脚本                  |
| 远端目录已存在 | 8.4.3 中`/www/wwwroot/pay/payment`、`/www/wwwroot/pay/manager` 已创建（或允许上传脚本自动 `mkdir -p`）         |
| SSH 参数正确   | `env-scripts/upload-zhcpay-backend-jars.sh` 里的 `SSH_HOST`、`SSH_USER`、`SSH_PASSWORD` 与第 3 章、第 5 章一致 |

**触发方式（二选一即可）：**


| 方式                   | 适用场景                                      | 操作                                                                            |
| ------------------------ | ----------------------------------------------- | --------------------------------------------------------------------------------- |
| **单独跑后端构建任务** | 首次验证后端上传、或本次只改后端代码          | CodeArts**编译构建** → 打开「构建双后端后上传后端到云服务器」→ **保存并执行** |
| **执行完整流水线**     | 前后端一起发布，且流水线阶段 2 已启用后端任务 | CodeArts**持续交付 → 流水线** → 手动执行一次，或 `git push` 到 `main` 触发    |

![后端 Jar 上传后的服务器落盘检查](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-26-084-jar-updated-check.png)

构建日志为绿色后，Shell 步骤末尾应出现类似输出（与本地执行 `upload-zhcpay-backend-jars.sh` 一致）：

```text
已上传: .../zhcpay-payment/target/zhcpay-payment.jar
已上传: .../zhcpay-manager/target/zhcpay-manager.jar
支付网关远端目录: /www/wwwroot/pay/payment
运营平台远端目录: /www/wwwroot/pay/manager
```

**在服务器上核对 Jar 是否已更新：**

可用 **宝塔 → 文件**查看：

期望结果：


| 目录                       | 应有文件             | 如何判断「已更新」                                               |
| ---------------------------- | ---------------------- | ------------------------------------------------------------------ |
| `/www/wwwroot/pay/payment` | `zhcpay-payment.jar` | 文件存在、大小不为 0；**修改时间**接近本次 CodeArts 任务结束时间 |
| `/www/wwwroot/pay/manager` | `zhcpay-manager.jar` | 同上                                                             |

```{warning}
⚠️ 本节只验证 **Jar 已 scp 到服务器目录**。上传成功 **不等于** `9216` / `9217` 进程已在跑新版本。若本次发布含后端变更，还需在宝塔或 SSH 中停止旧 Java 进程并重新 `nohup java -jar` 启动（见 8.3 与 8.5 过关清单），否则接口仍可能加载旧包。
```

**8.4.9 过关清单：**

- [ ] 单独执行后端构建任务，或完整流水线含后端阶段，日志为成功（绿色）
- [ ] `/www/wwwroot/pay/payment/zhcpay-payment.jar` 存在且修改时间为本次构建之后
- [ ] `/www/wwwroot/pay/manager/zhcpay-manager.jar` 存在且修改时间为本次构建之后
- [ ] （若需让线上接口生效）已按 8.4 重启对应 Java 进程，再继续 8.5 浏览器验收

## 8.5 上线测试

```{important}
🎉 **如果你已经能读到这里，并且按前面步骤把四个域名、OBS/CDN、宝塔后端和 CI/CD 都跑通——恭喜你，教程主线大约已经完成 95%。**

从工程角度看，你此刻已经 **成功上线了两个彼此独立的网站**：

| 线上独立站 | 域名示例 | 实际用途 |
| --- | --- | --- |
| **统一收银台** | `https://pay.example.com` | 用户付款页；独立 OBS 桶 + CDN + HTTPS |
| **运营平台** | `https://paymanager.example.com` | 你自己查商户、应用、订单与通道；另一套独立 OBS 桶 + CDN + HTTPS |

它们各自有前端域名、静态资源托管和 HTTPS，和后面要给你的 SaaS 业务站是 **分开部署的两套站点**。日常里你主要会用 **运营平台** 管理支付中台；**收银台** 一般也不会像产品官网那样发给陌生人随便逛——没有订单 token 时页面不完整是正常现象，真正带付款信息的链接会在 SaaS 创建订单后生成。

**还差哪 5%？** 第 9 章在本机用 `saas-starter` 调用线上 web-pay，跑通一笔完整支付验收（创建订单 → 进入线上收银台 → 支付平台回调线上 web-pay → 本机 SaaS 业务订单更新）。那一章做完，本教程 **基础主线就是 100%**。

**你的 SaaS 独立站什么时候上线？** 可以在业务页面、套餐、权限都完善后，直接回看本章同一套方法（OBS/CDN 前端 + 云服务器后端 + CodeArts）去配。第 9 章完成后已经证明支付能力可用，不必为了「先把 SaaS 也放上公网」而打乱当前验收。
```

![web-pay 上线验收顺序](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-05-085-launch-checks.png)

### 8.5.1 本节验收范围

| 本节要确认 | 本节暂不做 |
| --- | --- |
| 四个 web-pay 域名 DNS、HTTPS 可用 | SaaS 创建订单、真实付款 |
| 两个前端 OBS/CDN 能打开且为最新构建 | 线上收银台展示带订单的完整付款页 |
| 两个后端 `9216` / `9217` 在线，API 域名反代正确 | 业务订阅状态是否在 SaaS 里更新 |
| 能用第 5 章账号登录 **线上** 运营平台 | 把 `saas-starter` 当作正式产品对外运营 |
| CodeArts 前端、后端发布链路可用（含 8.4.9 Jar 落盘） | — |

![8.5 本节验收范围与暂不做事项](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-27-085-acceptance-scope.png)

建议按 **「基础设施 → API → 运营平台 → 收银台 → CI/CD」** 自下而上验收；某一步失败时，先别急着测登录或付款，回到对应小节（8.2 / 8.3 / 8.4）排查。

### 8.5.2 四个域名与 HTTPS 快查

在浏览器或用 `curl -I` 快速确认四个入口都能通过 HTTPS 访问（API 域名可能返回 404 JSON，只要 **证书有效、能连上 Nginx** 即可）：


| 域名 | 类型 | 过关表现 |
| --- | --- | --- |
| `pay.example.com` | 收银台前端 | 能打开页面（可能无完整付款 UI，见 8.5.4） |
| `paymanager.example.com` | 运营平台前端 | 能打开登录页或已登录后台 |
| `pay-api.example.com` | 支付网关 API | HTTPS 正常；反代到本机 `9216` |
| `paymanager-api.example.com` | 运营平台 API | HTTPS 正常；反代到本机 `9217` |

![四个域名与 HTTPS 快查](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-28-085-four-domain-https.png)

```{tip}
✅ 四个域名都显示锁标、无「不安全」提示，说明 8.2 的 CDN/证书与 8.4 的宝塔反代基本就绪。若只有前端能开、登录报网络错误，优先查 8.4 后端进程与 API 反代，而不是 OBS。
```

### 8.5.3 运营平台：你每天会用的「管理后台」

运营平台是你 **自己管理 web-pay** 的主入口：查商户、应用、支付通道、订单和回调记录。上线后不必把后台链接广发给最终用户——它和收银台一样，属于 **中台能力**，不是面向消费者的 SaaS 产品页。

![运营平台前端到后端 API 的验收链路](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-29-085-manager-check.png)

**操作步骤：**

1. 浏览器打开：

```text
https://paymanager.example.com
```

2. 使用第 5 章创建的运营平台账号登录。能进入首页/数据看板，说明 **运营平台前端 CDN → `paymanager-api` → 后端 `9217`** 链路基本畅通。

![运营平台首页](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/manager-dashboard.png)

3. 进入 **支付订单**（或同类菜单），确认列表页能加载。第 9 章在本地跑通支付后，也会在这里核对订单状态；本章只要页面不报错、接口能返回即可（列表为空也正常）。

![运营平台订单页面](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/manager-orders.png)

```{warning}
⚠️ 登录失败时，在浏览器开发者工具 **Network** 里看请求是否打到 `https://paymanager-api.example.com`。若仍指向 `localhost` 或内网地址，说明生产 `.env` 未更新、未重新构建前端，或 CDN 缓存仍是旧包——回到 8.2 / 8.3 处理，不要先怀疑账号密码。
```

### 8.5.4 收银台：第二个独立站，通常不单独「分享首页」

收银台是第二个已上线的独立网站，技术栈与运营平台相同（Vue 静态站 + OBS/CDN），但 **产品角色不同**：它承接的是 **带订单信息的付款流程**，不是给路人随便浏览的营销页。

```text
https://pay.example.com
```

**预期现象：**

| 访问方式 | 是否正常 | 说明 |
| --- | --- | --- |
| 直接在浏览器打开根域名 | 可能空白、提示缺少参数或没有完整付款页 | **正常**；没有 SaaS 下发的 `token` 时，收银台不知道付哪一笔 |
| 第 9 章本地 SaaS 创建订单后跳转的链接 | 应出现选微信/支付宝等付款界面 | 在 **本地** 先验证整条支付链；线上收银台域名届时由 SaaS 配置里的 `cashier-base-url` 指向 |

![收银台直接访问与订单链接访问的区别](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-30-085-cashier-role.png)

因此，本章验收收银台时，**只要 HTTPS 能打开、静态资源加载、控制台无大面积 404 即可**；不必强求此刻就出现完整付款 UI。真正「付钱成功」的闭环放在第 9 章。

### 8.5.5 后端与 CI/CD 最后确认

在进 8.5 浏览器验收前，建议已做完 **8.4.9**（Jar 已落到服务器目录）并在宝塔或 SSH 中确认 Java 进程在跑：

| 检查项 | 如何确认 |
| --- | --- |
| 支付网关 `9216` | 宝塔 Java 项目运行中，或 `curl -I https://pay-api.example.com` 有响应 |
| 运营平台 `9217` | 同上，对应 `paymanager-api` |
| Jar 为本次构建 | 服务器 `/www/wwwroot/pay/payment`、`/manager` 下 Jar 修改时间正确（见 8.4.9） |
| CodeArts | 前端构建任务、后端构建任务或完整流水线至少各成功执行过一次 |

![后端与 CI/CD 最后确认](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-31-085-backend-cicd-final.png)

若本次发布含后端变更，务必在 Jar 上传后 **重启** 对应 Java 进程，再刷新浏览器做 8.5.3 登录测试。

### 8.5.6 本章完成标准

按层勾选，全部打勾即表示 **web-pay 线上环境已就绪**（教程主线约 95%）：


**域名与证书**

- [ ] `pay.example.com`、`pay-api.example.com`、`paymanager.example.com`、`paymanager-api.example.com` DNS 已生效
- [ ] 四个域名均可通过 HTTPS 访问，浏览器显示安全连接

**前端（两个独立站）**

- [ ] 收银台、运营平台 `dist` 已上传对应 OBS 桶
- [ ] 【CDN】已刷新，页面为本次构建版本（非 8.2 阶段的 404/空白）
- [ ] `https://paymanager.example.com` 可登录运营平台并进入后台
- [ ] `https://pay.example.com` 可打开（不要求此刻出现完整付款页）

**后端与反代**

- [ ] 支付网关后端 `9216`、运营平台后端 `9217` 已在线运行
- [ ] 宝塔反向代理：`pay-api` → `9216`，`paymanager-api` → `9217`
- [ ] 8.4.9：服务器目录内两个 Jar 已为最新构建产物

**自动化发布**

- [ ] CodeArts 前端构建（或流水线阶段 1）可成功执行
- [ ] CodeArts 后端构建 + 上传（或流水线阶段 2）可成功执行

![web-pay 线上环境完成标准](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-32-085-completion-standard.png)

### 8.5.7 接下来做什么：第 9 章收尾

```mermaid
flowchart LR
  Ch8[第8章_web-pay线上] --> Ch9[第9章_本地SaaS支付验收]
  Ch9 --> Done[基础教程100%]
```

| 阶段 | 你要做的事 | 完成度 |
| --- | --- | --- |
| **现在（第 8 章末）** | 两个 web-pay 独立站已上线，运营平台可管理，收银台容器就绪 | 约 **95%** |
| **第 9 章** | 本机启动 `saas-starter`，调用线上 web-pay 跑通创建订单、收银台付款、回调、业务状态更新 | **100%**（基础主线） |
| **后续** | 等业务成熟后，把 SaaS H5/API 按本章同样步骤放上公网；web-pay 线上地址已配好，一般不用重做 | 产品化上线 |

![第 8 章到第 9 章的验收路线](https://image-osb.obs.cn-east-3.myhuaweicloud.com/OPC%E5%9B%BE%E5%BA%93/webpay-online-33-085-ch9-next.png)

```{seealso}
➡️ **下一章（第 9 章）** 回到本机：用 `saas-starter` 创建订单 → 进入线上收银台付款 → 验证支付平台回调、线上 web-pay 入账与本机 SaaS 业务订单更新。那一章不强制你把 SaaS 立刻上线公网；支付验收跑通，就证明「业务系统 + 统一收款中台」整条能力链是通的。

当你准备把真实 SaaS 产品长期放到线上时，复用本章的 OBS/CDN、宝塔后端与 CodeArts 思路即可；也可以先专注打磨产品，暂缓 SaaS 公网部署——web-pay 中台已经在线，不会耽误你继续开发。
```