当社では先日、自社サービスである、yori.so gallery & labelをShopify Hydrogenに移行しました。

Hydrogenでてきているサイトがどんな感じか気になる方はぜひ、こちらより、遊びに来てくださいね。

技術スタック

ホスティング

本来であればShopifyが用意してくれている公式ホスティング環境のOxygenを使いたかったのですが、移行を決めた時点ではShopifyのエンタープライズ向けプランであるPLUSのみでしか利用できなかったので、Oxygen以外のPaaSを検討しました。

具体的にはCloudflare、Netlify、Vercelを検討したのですが、どのPaaSも日本語の一部が文字化けするという事象が起こり、不採用になりました。
最終的にはDockerを使ってローカル環境とまったく同じ環境をリモート環境に再現する方式で、fly.ioというPaaSにデプロイしています。
2023年2月10日現在、OxygenがBasicプラン以上のプラン全てで利用できるようになったので、Oxygenも試せたらいいなと思ってます。

バックエンド

ECのバックエンドにShopifyを、CMSのバックエンドにContentfulを使用しています。
Contentfulについては何か連携のためのツールが用意されているわけではなかったので、GraphQLでリクエストを叩いて返ってきたレスポンスを自力でパースしています。

Hydrogenを導入しての感想

今回はGatsbyJSでできたヘッドレスコマースサイトをHydrogenに移植するプロジェクトでした。
今まではGatsbyJSでSSG(静的サイト生成)をしていたので、サイト更新のたびにビルド時間がかかっていたのですが、Hydrogenになってそれがなくなったのはやはり便利だと思います。
またShopifyとの連携機能があらかじめ用意されているので、Shopifyでヘッドレスコマースをしたい場合、基本Hydrogenを採用するということで良いと思います。

「早く行きたければLiquidでいけ、遠くへ行きたければHydrogenでゆけ」
と社内で言ってますが、ミニマムスタートをするのにLiquidは非常に便利ですし、ECビジネスが順調に成長していけばいくほど、サイトの動作が高速で結果としてコンバージョン率の改善につながり、様々なバックエンドの仕組みと連得しやすく、チーム開発効率の良いHydrogenの恩恵があると思います。

ヘッドレスコマースについてはこちらの動画もぜひご覧ください。

続いて弊社のHydrogen開発マニュアルを公開したいと思っていますので、ぜひお楽しみに！