【Shopify】Shopifyアプリの開発基盤を構築した話
はじめまして。フラクタのテクニカルディビジョン所属エンジニアのSho-Gunです。
弊社では、スタートアップ〜成長期のブランド様向けのソリューションとして、Shopifyをご提案させて頂くことが増えてきております。
シンプルで使いやすく、世界で60万店舗展開している実績に裏付けられたシステムの安定性などの特徴があり、ブランドにとって「より自分たちのビジネスに集中できる」点が日本でも徐々に受け入れられ浸透してきていることを感じます。
※Shopifyの特徴についてはこちらの記事もご覧ください。
そんなShopifyですが、アプリでシステムの拡張ができるもののカナダ発のECプラットフォームのため日本との商習慣の違いを感じることもあり、
「日本ではこういうオペレーションしたいけどどうやるんだろう。。」
「アプリ管理画面＆マニュアルが英語で使い方がわからない。。」
なんて悩みも。。
そんな問題を解決すべく、Shopifyアプリの開発に乗り出しました。
この記事では、その中で開発基盤を整えた話をしたいと思います。
Shopifyを拡張したいブランドEC担当者の方や、ブランドパートナーの方の参考となりましたら幸いです。
システム構成
言語：Ruby
アプリケーションフレームワーク：Ruby on Rails
フロントエンドフレームワーク：React
フロントエンドコンポーネント：Shopify Polaris
プラットフォーム：Heroku
ソースコード管理：Github
ローカル開発環境：Vagrant
アプリケーションフレームワークには、ShopifyによりShopifyアプリ用のエンジンが開発＆公開されていること、また相対的に情報が多かったRuby on Railsをとして採用しました。
また、インフラプラットフォームとしては、アプリの特性としてShopify向けのマイクロサービスになることが想定されるので、小さいサービスを高速に立ち上げたい、なるべくアプリ開発に専念したいという思いからPaaSであるHerokuを採用しました。
フロントエンドにShopify Polarisを採用することで、デザインパーツにかける工数を少なく、ShopifyライクなWEBデザインが容易に実現可能になるということもあり採用しました。
※情報量の多い構成なので、割と一般的な構成になっているのかなと思います。
開発環境
開発環境を用意するにあたって、以下を実現できる構成を考えました。
・複数アプリを作っていることが想定されるので、管理やノウハウ共有を効率化できるように、環境を統一したい
・構成のバージョンアップも複数アプリに容易に適用できるようにしたい
・新メンバー参画時に素早く開発環境を立ち上げられるようにした
そこで、仮想環境管理ソフトのVagrantのプロビジョニング用のコードと、アプリケーション用のコードをそれぞれ別のGitリポジトリで管理することにしました。
プロビジョニング用のコードはmasterブランチを構成のベースとし、各Shopifiyアプリ用にブランチを作成し、そこでShopifyアプリのAPI KeyとSecretを記入して保存する形としました。
これにより、構成のバージョンアップする際に、masterブランチに変更を適用した後、各アプリがそれぞれの都合に合わせて、masterからプルして際プロビジョニングするだけで、バージョンアップが完了するようになります。
また、構成がコード管理されており、それを利用することで、同じ環境をプロビジョニングするだけで開発環境が立ち上がります。
開発フロー
開発環境としては、本番環境とリリース前の最終確認をする検証環境、開発者のローカル開発環境の３つを用意しました。
上記３環境用のWebサーバーを用意し、Shopifyアプリの登録を行います。
GitブランチモデルとしてはGithub flowを念頭に、Gitのアクションとデプロイを連動させるためにHerokuのPipelineを利用しています。
構成をまとめると以下のような形です。
※HerokuではRAILS_ENVをProductionで使うことを推奨しているため、ShopifyアプリのAPI Key/Secretは環境変数として別途保存しています。
※また、ローカル環境に関しては、正規SSLの発行が必要だったり、アプリ登録の際のURLを固定化する必要があったので、localhostでの確認とし、shopify管理画面へのiframe読み込みではない状態での確認としました。
こうした構成のもとで、開発者はローカルで開発をし、テストが完了したらmasterブランチへのプルリクエストを作成します。
コードレビューを通ったらmasterブランチへのマージを行い、CIツールの検証が通ればマージが完了とともに検証環境へ自動でデプロイされます。
検証環境での最終確認を経て、本番環境へのデプロイを行います。
HerokuにはSlackアプリも出ているので、これを駆使してChatOps環境を整えることも用意です。
まとめ
これらを用意したことで、アプリ開発者はインフラやフローの検討、構成の設計をスキップして、アプリケーションの設計＆開発からスタートできるようになりました。
また、アプリケーションのコードは異なるものの、ベースが共通のため、ノウハウの共有もスムーズです。
何より、技術スタックとして、以下が揃っていればアプリ開発が可能となります。
何より、以下の技術スタックが揃っていれば、すぐにShopifyアプリの開発が進められるので、体制の作り方も柔軟に行えるようになったのが嬉しいところです。
・Ruby on Rails
・React
・Shopify
・Shopify API
・Shopify Polaris
あくまで、開発を始めた段階での構成＆フローですが、Shopifyをより良く使っていくための参考となりましたら幸いです。
もし、自社でShopifyアプリを作りたいのだけど、詳しく話を聞かせてもらえないかなどのご希望がございましたら、上記の環境構築、フロー整備、開発支援なども行えますので、お気軽にページ下部のお問い合わせフォームよりご連絡ください。
参考
・Shopifyアプリの作り方について
その他お役立ち情報
・Shopify APIドキュメント
・Shopify Polarisドキュメント
・Shopifyが開発＆公開しているオープンソースプロジェクト一覧
Shopifyを無料で試す
Shopifyは、今なら14日間無料でお試しいただくことができます。
この機会に、あなたもShopifyでECサイトを開設してみませんか？
Shopify ECサイトでのブランド運用をお考えの方
フラクタでは、Shopifyを利用したECサイト構築サービスやコンサルティングを行なっております。一度話をしてみたいというご希望がございましたら、弊社サイトよりお気兼ねなくお問い合わせくださいませ。