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

重要

🎯 本章目标： 只上线 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 承接前端静态文件

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

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

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

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

不同前端形态的上线位置

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

小技巧

💡 本教程的 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 四个线上入口

域名 指向 作用
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，供运营前端调用

小技巧

💡 小技巧：从 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 上线链路

重要

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

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

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

小技巧

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

收银台前端域名配置顺序

1. 【OBS】创建独立 OBS 桶

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

创建 OBS 桶

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

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

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

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

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

危险

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

开启静态网站托管 配置公共读策略

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

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

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

开启 CDN 域名加速 配置 CDN 源站

4. 【DNS】解析 CDN CNAME

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

添加 CDN CNAME 解析

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

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

确认 CDN 解析生效

小技巧

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 证书 填写证书域名 等待证书签发

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

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

添加证书 DNS 校验记录

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

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

部署 SSL 证书到 CDN 开启 HTTPS 强制跳转

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

回源 HOST 保持为 CDN 控制台推荐的 OBS 源站域名或桶域名。配置完成后刷新 CDN 缓存。 配置回源 HOST 并刷新 CDN 缓存 配置回源 HOST 并刷新 CDN 缓存

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

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

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

运营平台复用收银台前端上线流程

警告

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

8.2.3 前端上线验收

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

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

前端上线五步检查

警告

⚠️ 此时访问域名出现 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 完成。

        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 构建上传与手动生效动作

重要

🧰 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 自动构建上传与人工生效边界

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

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

本地改代码 → 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 前的配置检查

小技巧

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

危险

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

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

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

CodeArts 项目接入代码仓与 main 分支

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

新建或进入 CodeArts 项目

  1. 【CodeArts】 左侧进入 编译构建 → 代码，把私有 Git 仓库接入本项目（仓库名、分支以你实际为准，示例为 main）。

  2. 流水线配置时，在 持续交付 → 流水线 里为流水线源选择同一代码仓与默认分支（见 8.3.6）。

为流水线绑定 Git 仓库与 main 分支

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

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

前端构建并上传两个 OBS 桶

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

编译构建列表中新建前端任务

步骤 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

步骤 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

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

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

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

上传到 paymanager 桶 OBS

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

重要

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

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

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

后端 Maven 打包并上传服务器目录

步骤 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

步骤 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 时已写入该脚本；勿把含密码的脚本提交到公开仓库。

警告

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

Shell 上传：粘贴 upload-zhcpay-backend-jars.sh

警告

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

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

CodeArts 流水线串联阶段与 main 触发

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

流水线列表与新建入口

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

    • 阶段 1：调用构建任务「收银台双前端构建」（Npm 构建 + 两个 OBS 上传）。

    • 阶段 2：调用构建任务「构建双后端后上传后端到云服务器」（Maven 构建 + Shell 上传）。

    也可先只编排前端阶段，调通后再加入后端阶段。

  2. 触发设置：打开 代码提交事件；分支过滤 设为「包含 main」，避免 feature 分支误触发上线。合并请求事件可按需关闭。

流水线触发：main 分支代码提交

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

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

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

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

流水线成功后的线上生效动作

8.3 过关清单：

  • 前端构建任务单独执行成功，OBS 桶内有最新 index.html 与静态资源

  • 后端构建 + 上传任务单独执行成功，服务器目录内有新 Jar

  • 流水线在向 main push 后能自动跑通

  • 已 【CDN】 刷新两个前端域名，页面可打开且为本次构建版本

  • （若本次含后端变更）已按 8.4 重启 9216 / 9217 对应进程

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

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

先验证前端再完成后端上线

第一步：只跑前端构建任务，验证 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 的首次启动配合使用。

小技巧

💡 学习顺序小结：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 域名转发到服务器本机端口。

危险

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

后端 API 域名到本机 Java 端口的反向代理链路

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

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

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

后端 API 域名 A 记录解析到公网 IP

DNS 解析后端域名

警告

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

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

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

后端上线需要的宝塔软件能力

宝塔安装需要软件

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

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

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

支付网关与运营后端目录文件关系

新建目录并上传 Jar 与 yml

小技巧

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

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

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

Java 环境与后端站点管理关系

安装 Java 环境

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

创建站点并进入管理

重要

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

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

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

pay-api.example.com
paymanager-api.example.com

为两个后端 API 添加站点域名

为后端添加域名

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

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

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

后端 API 域名反向代理到本机端口

配置反向代理映射

警告

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

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

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

API 域名 HTTPS 与 SSL 依赖关系

申请并添加 SSL 证书

重要

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

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

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

/www/wwwroot/pay/uploads/private/cert

微信证书只放服务器私有目录

上传微信证书文件

危险

🔐 证书文件属于敏感材料，只放在服务器私有目录里。不要上传到 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 上传后的服务器落盘检查

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

已上传: .../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 同上

警告

⚠️ 本节只验证 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 上线测试

重要

🎉 如果你已经能读到这里，并且按前面步骤把四个域名、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 上线验收顺序

8.5.1 本节验收范围

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

8.5 本节验收范围与暂不做事项

建议按 「基础设施 → 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 快查

小技巧

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

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

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

运营平台前端到后端 API 的验收链路

操作步骤：

  1. 浏览器打开：

https://paymanager.example.com

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

运营平台首页

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

运营平台订单页面

警告

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

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

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

https://pay.example.com

预期现象：

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

收银台直接访问与订单链接访问的区别

因此，本章验收收银台时，只要 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 最后确认

若本次发布含后端变更，务必在 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 线上环境完成标准

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

        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 章的验收路线

参见

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

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