HydrogenをCloudflareにデプロイ

日本語 ディスカッション 技術的なQ＆A

Topic summary

開発者がHydrogenアプリケーションをCloudflare Workersにデプロイしようとしているが、アクセス時に「Oxygen is not defined」エラーが発生している。

実行した手順:

  • @cloudflare/kv-asset-handlerをインストール
  • wrangler.tomlの設定(account_id、compatibility_date、main等)
  • package.jsonでビルドコマンドを設定
  • ローカル環境(localhost:3000)では正常に動作確認済み

問題の核心:
HydrogenはShopifyのOxygenランタイム向けに設計されているため、Cloudflare Workers環境では「Oxygen」が未定義となっている。コード内の一部が逆順で表示されており、設定ファイルの詳細が不完全。

現状:
解決方法を求めている段階で、具体的な回答はまだ投稿されていない。HydrogenをCloudflare環境で動作させるには、ランタイムの互換性問題への対処が必要と思われる。

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

私はhydrogenを開発環境でビルドしてCloudflareのworkerにデプロイしました。
しかし、アクセスすると"Oxygen is not defined"と表示されます。

開発環境では
localhost:3000
でチェックしました。

どうしたら解決できますでしょうか？

実行したことは以下になります。

npm install @cloudflare/kv-asset-handler

wrangler.toml

wrangler.toml
account_id = ""
compatibility_date = "2022-11-22"
compatibility_flags = ["streams_enable_constructors"]
#main = "dist/worker/index.js"
main = "./worker.js"
name = "hydrogen-app"
route = ""
workers_dev = true
type = "javascript"
zone_id = ""

[site]
bucket = "dist/client"
entry-point = "dist/worker"

[build]
upload.format = "service-worker"
command = "yarn && yarn build"

packge.json

"build": "shopify hydrogen build --entry worker",

worker.js

https://shopify.dev/custom-storefronts/hydrogen/deployment

CF_ACCOUNT_ID=<CF_ACCOUNT_ID> wrangler publish
1 Like