自社サイトでShopifyを利用しなくなったタイミングで、SPAのページをダイナミックレンダリングしてみたという記事です。

1. Date :
Presenter
:
ECSaaSからの脱却録〜ダイナミックレンダリング
やってみた〜
Naoya Tabakomori

2. アジェンダ
1.自己紹介/会社紹介
2.システムの概要
3.EC SaaS卒業までの経緯
4.新システムの構成の検討と運用

3. 1.自己紹介/会社紹介

4. 自己紹介
名前：煙草森直也 (たばこもり なおや)
各種アカウント：@sugaret
所属：ベースフード株式会社（ VPoE）
ブログ：https://sugaret.hatenablog.com/
趣味：料理

5. 会社紹介
ベースフード株式会社
「主食をイノベーションし、健康をあたりまえに」のミッションのもと、「完全栄養の主食」の開発・生産・販売
しています。現在はパスタ、パン、クッキーのバリエーションが存在しており、 2021年8月で累計1000万食
の販売を突破しました。

6. 2.システムの概要

7. Appで利用している技術要素について
・PHP 7.4 / Laravel 6.2
・Nuxt.js 2.8
・MySQL 5.7
・Shopify

8. システム構成図
アプリケーションの一部を Shopifyに依存
・shop.basefood.co.jp で shopify
・payse.basefood.co.jp で 弊社app

9. システム構成図（コンテナまわり）
・リクエストを受けるサービスと、ワーカー
のサービスが立っている

10. deployのフロー

11. 3.EC SaaS卒業までの経緯

12. どのようにShopifyを利用していたか
Shopifyを利用していたもの ・商品の紹介
・商品の選択
・商品登録
・注文管理（返金・キャンセルなど）
・配送システムとの連携
自社Appで解決していたもの ・選択された商品の金額計算
（クーポンや各種割引を含む）
・各種決済サービスとのつなぎ込み
・サブスク関連の機能

13. 急転直下の規約変更
・外部アプリケーションを経由した決済を禁
止するお触れが出る
・弊社のAppは定期購買を行うために直接決
済代行サービスと連携を行っていた
・困った。。。

14. 考えられうる３つの選択肢
選択肢 詳細
1.Shopifyが提供するサブスクへ
の移行
・規約変更の理由の大きいところは Shopifyが公式対応したから、
とのことだった。
・ただし、弊社の提供していた AmazonPayがサブスクだと使えな
いことが判明。NG。
2.Shopify以外のカートシステムへ
の移行
・いくつか話を聞いたが、 Shopifyレベルの自由度でやれるシステ
ムは見つけられなかった。加えて、かなりロックインされてしまう印
象があったため、微妙。。
3.自社Appですべてのシステムを
提供するように開発
・作る必要があるものはそこそこの量になるが、最終的には一番
システム改修の速度が上がるはず。柔軟な企画を実現するシステ
ム開発力を競争優位にできると考えて 採用した

15. （余談）Shopifyを利用するpros/cons
ありがたみ
・表示速度など、「ECサイト」として必要なポイントがしっかりチューンナップされていた
・さまざまなプラグインが存在しており、システム開発をせずとも利用できるものも多かった
つらみ
・基本的に海外製だったこともあり、プラグインも日本ローカライズなどを考えると自前で作る必要があるこ
とも多かった
・APIのレスポンスでエラーが帰ってくることがしばしばあり、レスポンスの内容だけでは原因を突き止めら
れず「時々落ちるもの」として利用する必要があった
・問い合わせは基本的に「フォーラムに書き込んでみんなで解決してね！」というスタンスで、技術者と相
談することができなかった

16. 4.新システムの構成の検討と運用

17. （再掲）shopifyをどのように使っていたか
Shopifyを利用していたもの ・商品の紹介
・商品の選択
・商品登録
・注文管理（返金・キャンセルなど）
・配送システムとの連携
自社Appで解決していたもの ・選択された商品の金額計算
（クーポンや各種割引を含む）
・各種決済サービスとのつなぎ込み
・サブスク関連の機能

18. 既存Appの拡張で作ろうとするも...
・自社AppはNuxt.jsをSPAモードで利用
・そのAppの延長として、商品の紹介／選択する箇所を開発しようとした
・が、SNSのbotはSPAを読んでくれない
- Google botは読んでくれるという説もあるっぽい？
・なんらか対応しないと。。

19. botがSPA読んでくれない問題

20. 対応策を検討
選択肢 詳細
別Appに切り出す いちからAppを作るのも色々考えることがあるうえ、現状ある App
との連携、deployのフローを改修するなどがしんどそう
SSG、SSRのモードに切り替える Node.jsが動く環境を用意して、インフラまわりを大きく改修する必
要がある上、spaモード向けに書いた Nuxt.jsがそのまま動くとも思
えず。。かなりしんどそう
Dynamic Renderingする 現状のAppに手を加えず、botのためだけにいい感じに HTMLを返
せそう。ということで採用した

21. Dynamic Renderingってなに
・webサーバーがbot／クローラを判定し、クローラーに適したバージョンのコンテンツを配信すること。
・SPAをレンダリングした後の HTMLをcacheしておいて、それを返すなど。
・ブラウザの挙動をエミュレーションしてくれるダイナミックレンダラが存在する。
・今回はドキュメントも豊富だった Rendertronを採用
Rendertron

22. 弊社でのつかいかた
・こちらで指定のbotに対してcacheしたHTMLを返すように
・cacheの対象のページもこちらで指定
- このあたりはnginx.confで指定
・cacheの有効期限はなし
・cache clearはdeployごとに行う
- invalidationのURLを叩きに行くscriptを実行

23. システム構成図（新）
・Shopifyの利用を停止
・Rendertronのserviceが追加され、botの
アクセスはそちらに流すように

24. deployのフロー（新）
・Rendertronのキャッシュを削除するフ
ローが追加された

25. ということで表示された！

26. 気になりポイント
・cacheされていてもまだrenderingが遅いような気がする。。
・結局SEOスコアって落ちてないの？
- そもそもlight house scoreが全然高くない状態から、引き続き低いので判断つかず。。
- ただし、流入やCVRは特に変化がないので最悪の状態は避けられていると判断
- 速度改善は引き続きやっていく

27. 以上です