re:Invent2023 「BWP201 | Composable ecommerce: Build using Buy with Prime & MACH」ワークショップ体験レポート

記事タイトルとURLをコピーする

こんにちは!サービス開発部の布施です。
先週までre:Inventに参加していました。
ラスベガスでは4日間で53.7km歩きました。

re:InventではWorkshopを中心に回っていたのですが、 今回は参加した中でも一風変わった内容の「BWP201 | Composable ecommerce: Build using Buy with Prime & MACH」について紹介します。

ワークショップの概要

ざっくりまとめると 「ECサイトのバックエンドで使われるBuy with PrimeとCommercetoolsをAWSを使って簡単に連携しよう」という内容です。

Buy with PrimeとCommercetoolsは聞き馴染みのないサービスだったのですが、それぞれ

  • Buy with Prime
    • 独自のECサイトでAmazon Primeの特典を利用できるようにする機能
    • ECサイトのユーザーはAmazon Prime会員であれば、配送料が無料になったりAmazonのカスタマーサポートを無料で受けることができる
    • 日本では2023年12月時点で導入されておらずアメリカに限定された機能
  • Commercetools
    • ECサイトの裏側の処理(ex. 注文管理, 商品管理, 決済処理, メール送信...etc)をAPIで提供しているサービス
    • ヘッドレスなサービスなので、フロント画面は提供されていない

といったサービスです。 Workshopではこれらのサービスを含んだ以下の構成でハンズオンを行いました。

ハンズオンの内容はフロント側のコードを修正して商品にBuy with Primeのタグが付与されるようにしたり、 LambdaのテストからBuy with Primeのサンドボックス環境を叩いて、購入確認のメールが飛ぶことの確認するといったものでした。

WorkshopではフロントエンドのテンプレートとAWS SAMのテンプレートが配布されていたので、主目的のBuy with PrimeとCommercetoolsがECサイトでどんな役割を担っているのかを理解することに注力することができるようになっています。

Workshopの公式に出されている概要と和訳はこちら。

Looking to expedite your time to market with a cloud-native, component-based, and tech-agnostic solution? Join this hands-on workshop as we dive into building an ecommerce solution that is tailored to your needs, using MACH principles and Buy with Prime APIs. Use JavaScript, AWS Cloud9, Amazon S3, AWS AppSync, and AWS Secrets Manager to create your composable ecommerce solution. Gain the skills to develop and deploy a robust application that combines the power of Buy with Prime and AWS, enabling you to create, iterate, and scale a dynamic ecommerce platform tailored to your vision.

クラウドネイティブ、コンポーネントベース、技術にとらわれないソリューションで市場投入までの時間を短縮したいとお考えですか?このハンズオンワークショップに参加して、MACHの原則とBuy with Prime APIを使用して、ニーズに合わせたeコマースソリューションを構築しましょう。JavaScript、AWS Cloud9、Amazon S3、AWS AppSync、AWS Secrets Managerを使用して、コンポーザブルなeコマースソリューションを作成します。Buy with PrimeとAWSのパワーを組み合わせた堅牢なアプリケーションを開発およびデプロイするスキルを習得し、あなたのビジョンに合わせたダイナミックなeコマースプラットフォームを作成、反復、拡張できるようにします。

会場の様子

せっかくなので会場の様子をお見せします。

workshop会場

会場にはホテルのコンベンションセンターが使用されており、re:Invent全体で数えきれないほどの部屋が用意されていました。
基本的にどの部屋もre:Invent用のwi-fiが備わっているので回線も気に必要はありません。 Workshopでは写真のサイズ感の部屋を使用することが多かったです。 どの部屋も綺麗でした。

MACH Architecture

ところで今回の構成は「MACH Architecture」という設計思想を乗っ取っています。
MACHはそれぞれ頭文字をとったもので、

  • Microservices: 小さいサービス同士を組み合わせて大きなソフトウェアを構成すること
  • API-first: 各サービスがAPIによって連携されていること
  • Cloud-native Saas: システムのデプロイや管理にクラウドコンピューティングが使用されていること
  • Headless: フロントエンドがバックエンドから切り離されていること

の4つです。

個人的にヘッドレスについてはあまりピンとこなかったので調べてみると、フロントエンドとバックエンドが分離されていることで開発や保守をしやすくするメリットがあるみたいです。

例えば、ECサイトの商品一覧ページで、1ページ目に商品が「10」個表示されているとします。 これを「15個」の商品が表示されるように修正するとしましょう。

この時、ヘッドフルな構成では
フロントエンド: 商品が15個表示されるように修正
バックエンド: 10個分の商品情報をデータベースから取得する動きから15個分取得するように修正
とフロントエンドとバックエンドに依存関係があるため両者で修正が必要になります。

しかし、ヘッドレスな構成が取られている場合、バックエンドではフロントエンドから送られてくるAPIに応じてデータベースへのクエリを作成するように処理を記述しておけば良いので、仮に商品一覧ページが15個でも20個でも1000個になったとしてもフロントエンドの修正のみで済むわけです。
もっと言うと、webアプリ版だけから新しくスマホアプリ版も提供することになったとしても、ヘッドレスなサービスではフロントエンドとバックエンドが分離されているのでフロントの画面を開発だけで済むという体制を取れます。

※厳密にはヘッドフルな構成でも商品の個数に応じてクエリを発行することは可能なので、あくまでこの例ではフロントエンドとバックエンドが分離されており、フロントエンドの修正のみで済む、ということを理解していただければ良いと思います。

MACH Architectureは抽象的な概念であり、完全に理解しようとすると奥が深そうだなと思いつつ、「ほほー、こんな設計思想があるのか〜」と0→1の知見を得る良い機会でした。

おまけ

Workshopによっては、対象となるAWSサービスのシールを配布しているものもあります。 本workshopではBuy with Primeシールをいただきました。しかも2個、嬉しい。

ふせ ゆきひろ(執筆記事の一覧)

サービス開発部 2022年新卒入社

好きな散歩エリアは谷中銀座です。