Amazon Location Service を使ったサーバーレス店舗検索サイトの構築

小売業では常に、実店舗へのアクセスや人通りを増やすことを目指しています。そのためには、潜在顧客が最も便利な店舗を正確に特定できなければなりません。最もアクセスしやすい店舗に関する情報を、便利な Web/Mobile アプリケーションを通じて潜在顧客に提供することで、小売企業は来店を増やし、顧客体験を向上させることができます。何千もの店舗を持つ全国規模の小売業者も、数店舗しかない地元の小さな金物屋も、小売店舗を顧客にとってよりアクセスしやすくすることで、利益を得ることができます。

Amazon Location Service は、サーバーレスでフルマネージド位置情報サービスで、開発者は Esri、HERE Technologies、GrabMaps などの信頼できる商用プロバイダーやオープンデータからのデータを使用して、アプリケーションに位置情報機能をコスト効率よく追加することができます。Amazon Location を利用することで、オンラインストアでの体験を位置情報機能で簡単に補強し、顧客を店舗に誘導することができます。

本記事では、Amazon Location の Maps、Places、および Routing API を使用して、営業時間や住所などの適切な店舗情報とともに、顧客にとって最もアクセスしやすい実店舗をリストアップするシンプルな店舗検索 Web ページを実装する方法を紹介します。

2 つのパターンを紹介します。1 つ目のパターンは、イギリスほどの大きさの地域に分散している 20 店舗未満のビジネスを想定しています。2 つ目のパターンは、米国サイズの地理的エリアに分布する 20 以上の店舗を持つビジネスを想定しています。

顧客体験

店舗検索サイトでは、2 つのオプションを提示するシンプルな Web ページが表示されます。

現在地を Web ブラウザと共有することに同意し、出発地点として使用します。これは、顧客が今すぐ店舗を訪れたい場合に便利です。
店舗検索サイトの検索したい場所を説明するテキスト（都市名など）を入力します。その後、顧客は出発地候補のドロップダウンから場所を選ぶことができます。場所が選択されると、この場所は出発位置にジオコーディングされます。これは、顧客が将来ある店舗を訪問する予定がある場合に便利です。

図 1 : 店舗検索のランディングページのナビゲーション

出発地が店舗検索サイトのバックエンドに送信された後、最も近い店舗が、顧客の体験を助ける以下の店舗情報とともに返されます。

推定所要時間と距離
営業時間
住所

図 2 : 最寄りの店舗リストの表示

店舗の位置は地図上のマーカーとして表示されます。

ソリューション概要

このソリューションでは、フロントエンドに Vue.js 3.0のシングルページアプリケーション (SPA) を使用します。この SPA は、AWS Amplify Hosting を使用してホスティングされています。AWS Amplify Hosting は、フロントエンドのWeb および Mobile 開発者が AWS 上でフルスタックアプリケーションを簡単に構築、ホスティングできるフルマネージドサービスです。

バックエンドの AWS サービスは、データストアからストア情報を取得し、Amazon Location Service を使用してルーティングを実行し、関連する結果をフロントエンドに返すための API を提供します。このソリューションは、API をホストするために Amazon API Gateway、ビジネスロジックを実装するために AWS Lambda 関数、そして選択されたパターンに応じて店舗情報を保持するために Amazon DynamoDB または Amazon Aurora Serverless のいずれかを使用します。

コストを最適化するために、このソリューションを作成する際に 2 つのパターンを想定します。

ソリューションパターン	タイプ	店舗数	国
1	小規模	< 20	イギリス
2	中 ~ 大規模	≥ 20	アメリカ

アーキテクチャ図

以下に示すのは、両方のパターンのアーキテクチャ図です。

図 3 : ソリューションのアーキテクチャ図

2 つのパターンでソリューションが異なる部分には、青 (パターン 1) と赤 (パターン 2) の色を使い、違いを強調しています。

ソリューションの仕組み

以下がソリューションの仕組みです。

顧客は、Amplify Hosting がホスティングする店舗検索 Web サイトにアクセスします。この Web サイトは、Vue.js 3フレームワークを使用して構築されており、aws-amplify、maplibre-gl-js-amplify、maplibre-gl JavaScript ライブラリを使用して、Amazon Cognito、Amazon Location Service、およびベクトルタイルやマーカーなどのインタラクティブなマップオブジェクトの実装を容易にします。
顧客は、Amazon Cognito ユーザープールを使用して認証します。aws-amplify ライブラリは、登録と認証のワークフローを処理し、Amazon Cognito ID プールから一時的にスコープダウンされた AWS 認証情報を取得します。認証されたアクセスに関連する AWS Identity and Access Management (IAM)ロールは、Amazon Location Service リソースにアクセスするのに必要な最小限の権限のみを含んでいます。
maplibre-gl JavaScript ライブラリを使用して、 Web ページは、Maps API を使用して Amazon Location からダウンロードされたベクトルタイルを使用してインタラクティブなマップを表示します。マーカーは、結果が返されたときに出発地と目的地の店舗の場所を表示するために使用されます。
顧客が検索フィールドにカスタムテキストを入力すると、Amazon Location のSearchPlacesIndexForSuggestions Places API が呼び出され、提案された場所のリストをドロップダウンとして返します。顧客が選択肢の 1 つを選択すると、ジオコーディングのための GetPlace Places API が、出発地の位置座標を返す選択された PlaceId に対して呼び出されます。オプションとして、顧客は Locate me ボタンを使用してブラウザに現在地を確認させることができます。
選択された出発地は、API Gateway を使用してホストされているソリューションのカスタム API に送信されます。リクエストのペイロードはハッシュ化され、API Gateway は一般的にリクエストされる出発地（例えば、ラスベガスやロンドン）のキャッシュからレスポンスを返すことができます。
このステップは使用するパターンによって異なります。
1. パターン1 – API Gateway API は、DynamoDB のテーブルからすべての店舗位置情報を返す Lambda関数を呼び出します。
2. パターン2 – Lambda 関数は、PostgreSQL の PostGIS 地理空間機能 (ST_DistanceSphere) を使用して、目的地の店舗の候補のサブセットを返すクエリします。この Aurora Serverless PostgreSQL データベースの認証情報は、AWS Secrets Manager に安全に保存されます。
両方のパターンについて、返された目的地店舗のリストは、これらの目的地までの推定距離と時間を確認するために Amazon Location の CalculateRouteMatrix Routes API を使用します。
ターゲット店舗とそのメタデータの控えめなショートリストがフロントエンドに返され、この情報は店舗検索 Web ページ上で顧客に提示される。

店舗の位置情報の想定

このデモのために、以下のデータソースを使用します。

イギリス – Network Rail が管理する鉄道駅（18 箇所）
米国 – 1639 年から 2000 年の間に米国で運営された郵便局（112,000 箇所以上）

店舗データは、提供されたテンプレートによって自動的にデータストアにロードされます。データインポートの仕組みについては、GitHub リポジトリを参照してください。

なぜマトリックス・ルーティングを使うのか？

顧客が訪問する最寄りの店舗を特定する場合、評価されるルートは、顧客が選択した交通手段と、位置情報データプロバイダーが収集した交通網の現在の可用性に基づいていなければなりません。顧客の出発位置と候補店舗との間の大円距離を計算するだけでは、非現実的な結果が得られる可能性があり、不十分です。

以下の例では、カーディフ空港は物理的にイギリスのマインヘッドに近い位置にあります。しかし、間に水域があるため、道路を使用した場合、マインヘッドからよりアクセスしやすい空港は、実際にはブリストル空港です。

図 4 : マトリックス・ルーティングを使用して最寄りを計算する

このソリューションのパターン 2 では、目的地となり得る店舗数が多い場合、Amazon Location の Routing API の使用を最小限にするため、座標間の大円距離に基づいて候補店舗の暫定リストを生成します。マトリックス・ルーティング API を使用する場合、計算されるルート数に対する価格は、出発地の数に目的地の数を掛けた数によって決まるため、多数の店舗を運営するビジネスでは、この方が費用対効果が高くなります。このパターンは、クエリあたりのコストを一定に保ちながら、何十万もの店舗にスケールすることができます。

さらに、どちらのパターンでも、API Gateway 上でキャッシュを有効にし、繰り返しクエリに対するレスポンスがキャッシュから直接返されるようにし、バックエンドのインフラを経由しないようにしてます。これにより、結果取得の待ち時間とコストが削減されます。

チュートリアル

aws-samples の GitHub リポジトリが用意されているので、このソリューションを自分で試すことができます。以下のステップに従うと、サーバーレス店舗検索サイトの両方のパターンについて、フロントエンドとバックエンドのリソースがデプロイされます。

ソリューションをカスタマイズする方法の詳細については、リポジトリを参照してください。

前提条件

このチュートリアルの前提条件は以下の通りです。

AWS アカウント
AWS Serverless Application Model (AWS SAM) を使用して AWS リソースをデプロイするための IAM 権限
AWS SAM Command Line Interface (CLI) のインストール
Vue js 3.0 のインストール

コードのダウンロード

AWS SAM のインストール

公式ドキュメントの手順に従って、オペレーティングシステム用の AWS SAM CLI の最新リリースをインストールします。
sam —version を実行して AWS SAM CLI が正常にインストールされたか確認します。

注: AWS SAM CLI には、選択した AWS アカウントでリソースをプロビジョニングするための適切な権限が必要です。IAM を使用してアクセスキーとシークレットアクセスキーが作成され、aws configure を使用してマシンにローカルに登録されていることを確認する必要があります

両方の API パターンで必要なすべてのフロントエンドコード、バックエンドコード、AWS SAM テンプレートは、serverless-store-finder GitHubリポジトリに格納されています。
以下のコマンドを実行して、すべての必要なファイルをダウンロードします。

git clone https://github.com/aws-samples/serverless-store-finder

ダウンロードしたリポジトリのルートに移動し、JavaScript の依存関係をインストールします。

cd serverless-store-finder 
npm install

.env.local.template ファイルをコピーし、.env.local に名前を変えます。

cp .env.local.template .env.local

env.local.template ファイルには、AWS SAM テンプレートのデプロイからの出力が入力されます。

これで AWS SAM テンプレートをデプロイする準備ができました。

SAM テンプレートのデプロイ

店舗検索サイト

AWS SAM テンプレート Store Finder - Core は、両方のパターンで必要な共有インフラリソース、つまり Amazon Location Map、Place Index、Route Calculator、Amazon Cognito ユーザープールと ID プールをデプロイします。この AWS SAM テンプレートは、空の Amplify Hosting アプリも作成します。

SAM テンプレートのデプロイ

sam/core ディレクトリに移動します。

cd sam/core

アプリケーションをビルドします。

sam build

Build Succeeded メッセージが表示されます。
アプリケーションをデプロイします。

sam deploy --guided

プロンプトが表示されたら、以下のように詳細を入力します。残りの項目はデフォルトのままでかまいません。

Setting default arguments for 'sam deploy'
=========================================
Stack Name [sam-app]: <Your Store Finder "Core" Amazon CloudFormation stack name>
AWS Region [eu-west-1]: <Your AWS Region>
Parameter storeFinderAmplifySubdomain [demo]: <Amplify environment subdomain name used in URL>

この例では、スタック名を myStoreFinder-Core-v1 とし、AWS リージョン eu-west-1 にデプロイしています。

パラメータ storeFinderAmplifySubdomain にどのような名前を選択したかをメモしておいてください。後でアプリケーションを Amplify Hosting にデプロイするときに使用します。今回は、demo としました。

図 5 : AWS SAM テンプレート “Store Finder – Core” のデプロイ

Successfully created/updated stack と表示されることを確認します。

図 6 : AWS SAM テンプレート “Store Finder – Core” のデプロイ成功の確認

.env.local ファイルに不足している Amazon Location と Amazon Cognito の詳細を、デプロイされた CloudFormation スタックから出力された値で入力します。

VITE_AWS_REGION=<Your AWS Region>
VITE_AMAZON_COGNITO_IDENTITY_POOL_NAME=<storeFinderAmazonCognitoIdentityPoolName from the Store Finder "Core" Amazon CloudFormation stack output>
VITE_AMAZON_COGNITO_USER_POOL_NAME=<storeFinderAmazonCognitoUserPoolName from the Store Finder "Core" Amazon CloudFormation stack output>
VITE_AMAZON_COGNITO_USER_POOL_CLIENT_NAME=<storeFinderAmazonCognitoUserPoolClientName from the Store Finder "Core" Amazon CloudFormation stack output>
VITE_AMAZON_LOCATION_SERVICE_MAP=<storeFinderAmazonLocationServiceMapName from the Store Finder "Core" Amazon CloudFormation stack output>
VITE_AMAZON_LOCATION_SERVICE_PLACES_INDEX=<storeFinderAmazonLocationServicePlaceIndexName from the Store Finder "Core" Amazon CloudFormation stack output>

店舗検索 – API パターン1

AWS SAM テンプレート Store Finder - API Pattern 1 は、API Gateway、Lambda 関数、DynamoDB テーブルなど、パターン 1 で必要なバックエンド API インフラストラクチャとコードをデプロイします。この API は独立して機能し、パターン 2 に依存しません。

SAM テンプレートのデプロイ

sam/api-pattern1 ディレクトリに移動します。

cd ../api-pattern1

アプリケーションをビルドします。

sam build

Build Succeeded メッセージが表示されていることを確認します。
アプリケーションをデプロイします。

sam deploy --guided

プロンプトが表示されたら、以下のように詳細を入力します。残りの項目はデフォルトのままでかまいません。

図 7 : AWS SAM テンプレート “Store Finder – API Pattern 1” のデプロイ

この例では、スタック名を myStoreFinder-API-v1 としています。

Successfully created/updated stack と表示されることを確認します。

図 8 : AWS SAM テンプレート “Store Finder – API Pattern 1” のデプロイ成功の確認

.env.local ファイルに足りない API エンドポイントの値を、デプロイされた CloudFormation スタックから出力された値で入力します。

VITE_APIGATEWAY_ENDPOINT_API1=<storeFinderAPIGatewayEndpoint from the Store Finder "API1" Amazon CloudFormation stack output>

注：AWS SAMテンプレート Store Finder - API Pattern 1 には、stores.json ファイルからストアデータを自動的にロードする Lambda カスタムリソースが含まれています。API 1 の準備は完了です。

店舗検索 – API パターン 2

AWS SAM テンプレート Store Finder - API Pattern 2 は、API Gateway、Lambda 関数、Amazon Aurora Serverless V2 PostgreSQL データベース、Secrets Manager のシークレットなど、パターン 2 で必要なバックエンド API インフラストラクチャとコードをデプロイします。この API は独立して機能し、パターン 1 に依存しません。

SAM テンプレートのデプロイ

sam/api-pattern2 ディレクトリに移動します。

cd ../api-pattern2

アプリケーションをビルドします。

sam build

Build Succeeded メッセージが表示されていることを確認します。
アプリケーションをデプロイします。

sam deploy --guided

プロンプトが表示されたら、お使いの環境で選択した詳細を入力します。残りはデフォルトのままでかまいません。

Setting default arguments for 'sam deploy'
=========================================
Stack Name [sam-app]: <Your Store Finder "API2" Amazon CloudFormation stack name>
AWS Region [eu-west-1]: <Your AWS Region>
Parameter storeFinderCoreCloudFormationStackName []: <Name of the Store Finder "Core" Amazon CloudFormation stack>
Parameter storeFinderAuroraDBMasterUserName [admin_user] <Name of the PostgreSQL admin user account> 
Parameter storeFinderDatabaseTableName [tbl_postoffices]: <Name of table to be used in PostgreSQL database>

この例では、スタック名を myStoreFinder-API2-v1 としています。

図 9 : AWS SAM テンプレート “Store Finder – API Pattern 2” のデプロイ

Successfully created/updated stack と表示されることを確認します。この SAM テンプレートの展開には、最大 20 分かかります。

図 10 : AWS SAM テンプレート “Store Finder – API Pattern 2” のデプロイ成功の確認

.env.local ファイルに不足している API エンドポイントの値を、デプロイされた CloudFormation スタックから出力された値で入力します。

VITE_APIGATEWAY_ENDPOINT_API2=<storeFinderAPIGatewayEndpoint from Store Finder "API2" Amazon CloudFormation Stack output>

注：AWS SAM テンプレート Store Finder – API Pattern 2 には、us-post-offices.csv ファイルから店舗データを自動的にロードする Lambda カスタムリソースが含まれています。API 2 の準備は完了です。

Amplify Hosting を使って Vue.js アプリケーションをビルドしてデプロイ

注：このデモを簡単にするために、Amplify Hosting はソフトウェアのバージョン管理システムと統合せずに使用しています。実際のアプリケーションでは、Amplify を Git ベースのリポジトリと統合することを強くお勧めします。

Vue.js アプリケーションをビルドしてデプロイ

.env.local ファイルに空欄がないことを確認します。
プロジェクトフォルダのルートディレクトリでフロントエンドアプリケーションをビルドします。

cd ../.. 
npm run build

図 11 : “npm run build” の正常終了の確認

Vue.js のデプロイファイルが /dist に正常に作成されていることを確認します。

cd dist 
ls

以下のコマンドを実行して、フォルダ内のすべてのファイルを圧縮します。正確なコマンドは、お使いの OS によって異なる場合があります。

zip -r store-finder.zip .

注：zip 操作は、フォルダレベルではなく、/distディレクトリ内で行う必要があることに注意してください。その後、.env.local ファイルを変更した場合は、Vue.js アプリケーションを再度ビルドし、以下の手順を繰り返す必要があります。

Amplify コンソールを開き、AWS SAM テンプレート Store Finder - Core で作成された Amplify アプリを選択します。Deploy without Git provider を選択し、Connect branch を選択します。

図 12 : Git プロバイダーなしで Amplify アプリをデプロイ

Environment name には、AWS SAM テンプレート Store Finder - Core のデプロイ時に、SAM テンプレートパラメータ storeFinderAmplifySubdomain に指定した名前 (例：demo) と同じ名前を指定します。
Method では、Drag and drop を選択し、先に作成した store-finder.zip ファイルをアップロードします。これで自動的にデプロイが開始され、サイトが公開されます。

図 13 : Vue.js デプロイ用 zip ファイルをドラッグ＆ドロップ

Amplify コンソールに Deployment successfully completed のメッセージが表示されるまで待ちます。
これで、Amplify Hpsting のドメインが提供する URL を使って、サーバーレス店舗検索サイトにアクセスできるようになりました。

図 14 : Amplify アプリのドメイン URL を使った店舗検索サイトへのアクセス

このサイトにアクセスすると、まず最初にアカウントの作成とメールアドレスの確認が求められます。

注：このステップは、認証を強制することによって、デモのフロントエンドとバックエンド AP Iを保護します。ユースケースによっては、店舗検索サイトのサイトを Web サイトの訪問者が一般にアクセスできるようにする必要があるかもしれません。

図 15 : Amazon Cognito を使ったアカウントの作成

Select a country ドロップダウンを United Kingdom と United States の間で切り替えて、2 つの API パターンを試すことができます。

図 16：サーバーレス店舗検索サイトのデプロイのテスト

クリーンアップ

課金を避けるために、AWS アカウントにプロビジョニングされた CloudFormation スタックを削除しましょう。

まとめ

本記事では、Amazon Location Service を使用して、顧客が最寄りの実店舗を検索できるシンプルで費用対効果の高い Web サイトを作成する方法を紹介しました。Amazon Location の Maps、Places、Routes API を使用することで、店舗検索 Web ページへの訪問者は、現在地、または将来的な位置から最も近い場所を素早く特定することができます。この情報は、どの店舗を訪れるかについての情報に基づいた意思決定に使用することができ、顧客の来店を増やすことができます。

著者プロフィール

この記事は Matthew Nightingale と Alan Peaty によって書かれた Build a serverless store finder site using Amazon Location Service の日本語訳です。翻訳は、ソリューションアーキテクトの稲田大陸が担当しました。

Amazon Web Services ブログ

Amazon Location Service を使ったサーバーレス店舗検索サイトの構築

顧客体験

ソリューション概要

アーキテクチャ図

ソリューションの仕組み

店舗の位置情報の想定

なぜマトリックス・ルーティングを使うのか？

チュートリアル

前提条件

コードのダウンロード

AWS SAM のインストール

SAM テンプレートのデプロイ

店舗検索サイト

SAM テンプレートのデプロイ

店舗検索 – API パターン1

SAM テンプレートのデプロイ

店舗検索 – API パターン 2

SAM テンプレートのデプロイ

Amplify Hosting を使って Vue.js アプリケーションをビルドしてデプロイ

Vue.js アプリケーションをビルドしてデプロイ

クリーンアップ

まとめ

著者プロフィール

お役立ちリンク

フォローお願いいたします