部署 Shopify Hydrogen
Shopify 的 React 店面框架，Oxygen 运行时，部署到 Shopify Oxygen 或 Node。
平台高级
为什么
Hydrogen 是 Shopify 基于 Remix 的无头店面框架，集成 Storefront API。Oxygen 是其针对电商优化的全球边缘运行时，缓存商品数据。
平台即服务采用率 2024 年增长 24%，团队从虚拟机管理转向 git push 部署。the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research)，PaaS 层捕获了大多数新工作负载。
何时使用
Shopify 支持的店面且需自定义 UX 和边缘性能用 Hydrogen。非 Shopify 避免 — 直接用 Remix/Next。
如何做
1. 构建 — npm run build 生成 dist/
2. Oxygen — npx shopify hydrogen deploy，运行于 Shopify 边缘
3. Node — npm run build && node dist/server.js
4. Storefront API — 设 PUBLIC_STOREFRONT_API_TOKEN
5. 缓存 — Hydrogen 边缘自动缓存商品数据
示例
// hydrogen.config.ts
import { defineConfig } from "@shopify/hydrogen/config";
export default defineConfig({
shopify: { storeDomain: "https://mystore.myshopify.com", storefrontToken: process.env.PUBLIC_STOREFRONT_API_TOKEN },
});
// 部署：npx shopify hydrogen deploy
常见问题
- ⚠Storefront API token 缺失 — 商品查询 401
- ⚠Oxygen 部署自定义服务器失败 — Oxygen 仅支持 Hydrogen 服务器入口
- ⚠环境间配置漂移 — 使用基础设施即代码（Terraform/Pulumi）保持 dev/staging/prod 一致
最佳实践
- ✓生产用 Oxygen — Shopify 优化缓存的全球边缘
- ✓用 createWithCache 缓存商品集合实现亚 100ms 加载
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求