Shopify Oxygen 部署 Hydrogen,不是简单把代码上传到一个服务器。项目要定义构建环境、环境变量、Storefront API 权限、域名、缓存、日志、预览、回滚和市场路径。边缘运行可以改善某些请求的延迟,但速度、SEO 和稳定性仍需用真实页面与流量测试证明。
版本边界(2026-10):当前 Hydrogen 文档把它定义为可组合的商业工具集;路由、渲染、数据加载与构建由所选框架负责。2026-04 及更早版本应按 legacy 文档理解。若从旧版 React Router 项目升级,请对照迁移指南:该路径改用应用自身的 Vite/React Router 开发与构建流程,不应直接照搬旧版 shopify hydrogen dev、shopify hydrogen build 或 hydrogen() Vite 插件配置;这不是所有框架通用的命令替换表。
部署与缓存边界
把开发、预览和生产环境分开,禁止把客户或支付密钥写入前端。为商品、库存、价格和市场定义缓存时间与失效事件;发布后检查构建日志、错误页、重定向、canonical、结构化数据和结账。准备 API 超时、构建失败、缓存旧数据和第三方不可用的降级方案。
| 层 | 要定义 | 验收 |
|---|---|---|
| 构建 | 版本、依赖、环境变量 | 构建日志 |
| 数据 | API 权限、缓存、失效 | API 与时间戳 |
| 页面 | 渲染、URL、结构化数据 | 抓取样本 |
| 运维 | 监控、回滚、告警 | 演练记录 |
Oxygen 环境变量随部署快照保存,部署后不能原地改写;调整变量需要重新部署,回滚也会恢复旧部署的变量值。当前环境文档还区分私有预览与公开环境及套餐条件。验收时应记录访问权限、实际部署版本和变量版本,不能把预览成功等同于生产配置已生效。
市场与缓存需要共同验收。按Markets 指南由应用在服务端确定请求的国家和语言,并把一致的上下文传给查询和页面;Hydrogen 不会替应用自动选择市场。按当前缓存文档,服务端子请求缓存须提供缓存实例并为查询选择策略;未选策略的查询不缓存,mutation 和错误不缓存。缓存键依赖查询与变量,stale-while-revalidate 仍可能返回旧值;框架自己的缓存还需单独核对。定义失效事件是项目责任,不能把它当成平台已经自动执行的动作。
SEO 与 GEO
部署后,应抽查不同市场的商品页与内容页,对比初始响应、脚本执行后的可见内容和结构化数据,确认正文、价格、币种与链接表达一致。另核对抓取访问、重定向与 canonical 是否指向预期页面,并在缓存更新和回滚后重复抽查;边缘节点能响应请求,不代表页面已可正确抓取或事实仍然新鲜。速度改善应以实际页面与设备的测量为依据,不能把“全球边缘”当作排名或 AI 引用保证。
FAQ
Oxygen 会自动让网站更快吗?
不会,需要测量渲染、数据、缓存、脚本和真实设备。
API 密钥能放在前端吗?
不应。敏感权限留在服务端并按环境管理。
缓存价格和库存要注意什么?
定义时效、失效事件和结账前重新校验。
部署文章怎样支持 GEO?
写清环境、数据、缓存、错误、监控和回滚证据。