Hydrogen / Oxygen : 開発者向け更新

Oxygen が開発ストアで使えるようになった
Hydrogen の検証に有料プランが要らない

これまで Oxygen ホスティングは有料プランが前提だった。今後は development store から Hydrogen ストアフロントを Oxygen にデプロイできる。ただし開発ストアには public environment が無いため、デプロイ URL の閲覧には必ずストアログインが必要。

このページの構成
  1. 30秒で理解 : 何が変わったのか
  2. 仕組み図解 : 開発ストアからのデプロイの流れ
  3. Before / After 比較
  4. 唯一にして最大の制約 : public environment が無い
  5. 記事に「書かれていないこと」
  6. 技術者が押さえるべき5つのポイント
  7. 業務に活かせる3つのユースケース
  8. 提案で使える1行サマリ

130秒で理解 : 何が変わったのか

Hydrogen ストアフロントを Oxygen にデプロイするのに、これまでは有料プランが必要だった。
今回、development store(開発ストア)からも Oxygen にデプロイできるようになった。

これまで : 有料プラン必須

Oxygen ホスティングを使うには有料プランが前提。開発ストアだけでは Hydrogen の本番相当ホスティングを試せなかった。

これから : 開発ストアで OK

development store から Oxygen へデプロイ可能。プラン契約前に実環境ホスティングまで通して検証できる。

ただし条件がひとつ。開発ストアには public environment(公開環境)が含まれないため、生成されるデプロイ URL は常にストアへのログインが必要。誰でも見られる URL にはならない。

2仕組み図解 : 開発ストアからのデプロイの流れ

Hydrogen ストアフロントのコード Development Store ★ 今回ここが新しく対象に deploy Oxygen Shopify のホスティング https://….oxygen…/  デプロイ URL ストアログインが必須 public environment が無いため
用語整理Hydrogen = Shopify 製のヘッドレスストアフロント用フレームワーク。Oxygen = その Hydrogen をホスティングする Shopify 側のランタイム。development store = パートナー等が無料で作れる検証用ストア。
今回のアップデートは「Hydrogen をどこに載せるか」のホスティング側の入口が広がった話。

3Before / After 比較

項目これまで今回のアップデート後
Oxygen へのデプロイ 有料プランが必要 開発ストアからも可能
検証に必要なもの 課金済みストア development store
public environment —(記事に記載なし) 開発ストアには含まれない
デプロイ URL の閲覧 —(記事に記載なし) 開発ストアでは常にストアログインが必要
対応プランの詳細 「supported plans」ページを参照するよう案内あり。具体的なプラン名は本文に記載なし

4唯一にして最大の制約 : public environment が無い

public environment(有料プラン側)

ログイン無しで誰でも開ける公開 URL。クライアントや社外レビュアーにリンクを渡すだけで見てもらえる。記事では開発ストアに「含まれない」と対比で言及

開発ストア : ログイン必須の URL のみ

デプロイ URL は生成されるが、開くたびにストアへのログインが要る。共有相手がストアにアクセス権を持っている前提になる。

実務インパクト : 「開発ストアで作った Oxygen デプロイの URL を、そのままクライアントや社外メンバーに投げる」運用は成立しない。ログイン導線をどう用意するかを、共有フローの設計時にあらかじめ決めておく必要がある。

5記事に「書かれていないこと」

短い changelog なので、実務判断に必要な情報のうち本文に無いものを明示しておく。以下は推測せず、公式ドキュメントで確認すべき項目

記載なし

対応プランの具体名

「supported plans を参照」との案内のみ。どのプランが対象かは本文に無い。

記載なし

リソース上限・帯域・課金

開発ストアでの Oxygen 利用に制限があるかどうかへの言及なし。

記載なし

本番ストアへの移行手順

開発ストアから有料プランのストアへ切り替える際の作業についての説明なし。

記載なし

CLI / CI からの操作差分

Hydrogen CLI や GitHub 連携デプロイでの挙動差については触れられていない。

記載なし

カスタムドメインの可否

開発ストアのデプロイに独自ドメインを当てられるかへの言及なし。

記載なし

既存の開発ストアへの適用時期

すでに作成済みの開発ストアで即使えるかどうかは書かれていない。

6技術者が押さえるべき5つのポイント

FREE

1. PoC の初期コストが下がる

Hydrogen + Oxygen の構成検証に、これまで必要だった有料プラン契約が不要になった。技術検証フェーズと契約フェーズを分離できる。

2. 共有 URL の性質が違う

開発ストアのデプロイ URL は常にログインが必要。public environment を前提にしたレビュー運用・自動チェックはそのまま持ち込めない。

plans

3. 対象プランは必ず一次情報で確認

本文は「supported plans を参照」とだけ案内している。具体的なプラン条件は記載なし。見積り前に公式ドキュメントで裏を取ること。

4. 「ホスティングまで含めた」再現性が上がる

ローカル dev サーバではなく、実際の Oxygen 上の挙動を開発ストアで確かめられる。ローカルと本番の差分に起因する事故を前倒しで潰せる。

5. 「無料で本番相当が全部できる」とは書かれていない

changelog が明言しているのは「開発ストアからデプロイできる」ことと「public environment が無い」ことの 2 点だけ。リソース上限・課金・カスタムドメイン・本番移行手順はいずれも記載なし。提案資料に書く前に確認が要る。

7業務に活かせる3つのユースケース

PoC 契約前に 技術判断できる
USE CASE 1

ヘッドレス案件の技術検証を「契約前」に完了させる

課題
Hydrogen + Oxygen 構成を提案したいが、実際のホスティング挙動を確かめるには有料プランの契約が先に必要で、検証と発注の順番が逆転していた。
打ち手
development store で Hydrogen を組み、Oxygen へデプロイして実挙動(ビルド・配信・レンダリング)を確認 → その結果を持って提案・見積りに進む。
効果
「契約してみないと分からない」領域が減り、要件と工数の精度が上がる。実物を見せながら合意形成できる。
技術メモ
対応プランの条件は本文に記載なし(supported plans を参照との案内のみ)。検証開始前に公式ドキュメントで対象を確認しておく。
USE CASE 2

社内レビュー環境を Oxygen 上に用意する(社外共有は別設計)

課題
ローカル dev サーバのスクショだけでレビューしており、実際のホスティング環境での見え方・挙動をチーム内で共有できていない。
打ち手
開発ストアの Oxygen デプロイをレビュー用の共通環境として使う。ストアにアクセス権のあるメンバーがログインして実機確認する運用にする。
効果
「自分の環境では動いた」問題の削減。実際に配信された状態でのレビューが標準になる。
技術メモ
開発ストアには public environment が無く、デプロイ URL は常にログイン必須。ログイン権限を持たない社外レビュアーへの共有には使えないため、共有経路は分けて設計する。
研修 / オンボーディング
USE CASE 3

Hydrogen 人材の育成・オンボーディングを内製化する

課題
Hydrogen を扱えるメンバーを増やしたいが、練習用に有料ストアを人数分用意するのは現実的でなく、実デプロイまで経験させられない。
打ち手
メンバーごとに開発ストアを用意し、Hydrogen 実装 → Oxygen デプロイまでを一連の課題として通してもらう。
効果
「ローカルで動かしただけ」で終わらず、デプロイまで含めた工程を全員が経験できる。案件アサイン時の立ち上がりが早くなる。
技術メモ
成果物 URL はログイン必須のため、発表・共有時はストアのアクセス権付与か画面共有を前提にする。開発ストア利用時のリソース上限の有無は記載なし。

8提案で使える1行サマリ

「Hydrogen + Oxygen の検証が、有料プラン契約なしで開発ストアだけで完結できるようになった。
ヘッドレス案件の技術検証を契約前に前倒しできる。
ただしデプロイ URL は常にストアログインが必要なので、社外共有の導線だけは別途設計が要る。」