Shopifyアプリの作り方

Shopify App のテンプレート(npm init @shopify/app@latest でできるやつ) を動かしてみてわかったこと

• テンプレートのアプリは Remix で書かれていて、NodeJS + React で動くウェブアプリケーションで、Next.js アプリとかと似た形。
• ウェブアプリを iframe で Shopify 管理画面に埋め込む形で利用しているので、原理的には Remix でも Next.js でも Rails でも何でもいいはず。
• ただ node, React, Remix 向けに Shopify が開発キットを用意してくれてるのでそれを使うのが楽そう。 (@shopify/shopify-app-remix とかあるので)
  • (昔は Next.js だったらしいが)
• アプリのホスティングは自前。公式ドキュメントでは fly.io と Heroku を挙げてた。最低限ログインセッションを保存するのにデータストアは必要なので RDB も提供してる SaaS が良さそう。
• 作るのは大抵管理画面系アプリなので rps はすごく少ないはずで、DB もサーバレスが良いかも。Remix + Postgres が動かせてアプリも DB もサーバレスでメンテコストも低くあってほしいと思うと Vercel が良さそう。
• Vercel + Vercel Postgres 環境に実際にアプリをデプロイしてみたら動かせた
• もちろん AWS (Fargate) とか GCP (Cloud Run) とかの選択肢もあるけど、構築・メンテコスト大変だしデータストアが必要なことを考えると別にお安くない気もする

• ウェブアプリを iframe で Shopify 管理画面に埋め込む形で利用している

Embedded App Home というのっぽい。Shopify アプリのコンポーネントは他にもある。

Theme app extensions を作ることで、テーマエディタで扱う UI コンポーネントを提供できるっぽい。

Shopify 公式アプリの Product Reviews だと商品ページに載せるレビューのコンポーネントがそう。このアプリは Embedded App Home も提供していて管理画面がある。

レビュー情報は Shopify 商品のメタフィールドとして保存してるのかと思ったが、メタフィールドにはレビュー本文などは保存されていなかったため、アプリ用にデータベースを用意してそこに保存していそうだった(知らんけど)

アプリ作れた https://apps.shopify.com/shopify-application-400?locale=ja

いろいろ知見が貯まったけど書くの大変なので知りたい人は聞いてください。