More than 1 year has passed since last update.

AWSでLINEのレストラン予約デモをデプロイした

Last updated at 2023-02-01Posted at 2023-02-01

たまたまLINE予約システムを見つけたので、試しにデモをデプロイしてみました。
予約システムに関しては、以下のサイトに説明があります。

サンプルは、以下のGitHubにあります。
AWS環境を前提としたサンプルで、AWS SAMでデプロイできます。

LINEチャネルの作成

以下の手順通りできました。

LINEチャンネルの作成リンクがありますが、下にスクロールして、「1.LINEアカウントの作成」から順番通り進めてください。
チャネル作成のリンクからたどって内容を確認していましたが、すぐ下にわかりやすい手順がありました。。。

バックエンドの構築

Cloud9を使って以下の手順通り実施しました。

まずは、GitHubからクローンします。

Gitクローン

git clone https://github.com/line/line-api-use-case-reservation-Restaurant

次に、Layerをデプロイします。
値はすべてデフォルトでデプロイできました。

Layerのデプロイ

cd line-api-use-case-reservation-Restaurant/backend/Layer
sam build --use-container
sam deploy --guided

次に、Batchをデプロイします。
こちらは、以下の値を変更しないとエラーになりました。

変更が必要な個所

LayerVersion: Layer Version
LoggerLevel: DEBUG or INFO
TTL: False or True
TTLDay: Set day to delete data

とりあえず、一括置換しました。

一括置換

cd ../batch
sed -i \
-e "s/Layer Version/1/g" \
-e "s/DEBUG or INFO/DEBUG/g" \
-e "s/False or True/True/g" \
-e "s/Set day to delete data/1/g" \
template.yaml

置換後は以下のようになりました。
後で考えると、devのパラメータだけなので、手で変えてもそんなに多くなかったです。

Mappings:
  EnvironmentMap:
    dev:
      MessageTableName: RemindMessageTableRestaurantDev
      LINEChannelAccessTokenDBName: LINEChannelAccessTokenRestaurantDev
      EventBridgeName: RestaurantEventDev
      LayerVersion: 1
      LoggerLevel: DEBUG
      # TTL is True:Reservation Data will be deleted at the specified date, False:Data will not be deleted
      TTL: False
      # 1
      # If you set TTL: True, data will be deleted in the period specified below.
      TTLDay: 10

batchをデプロイします。

batchのデプロイ

sam build --use-container
sam deploy --guided

デプロイに失敗した場合は、以下のように、一度削除してから再ビルド、再デプロイを実施します。
2回目以降のデプロイは、--guidedを省略できます。

再デプロイ

sam delete
sam build --use-container
sam deploy

DynamoDBのLINEChannelAccessTokenRestaurantDevテーブルに以下のレコードを登録しました。
※channelIdとchannelSecretは、最初に作成したMessaging APIのチャネル基本設定から確認した値です。

{
  "channelId": "0000000000"
  "channelSecret": "0000000000000000000000000"
}

次にAPPをデプロイします。
例によって、変更が必要な個所は、以下の通りです。

LINEOAChannelId: LINEOAChannelId
LIFFChannelId: LIFFChannelId
FrontS3BucketName: S3 Bucket Name for Frontend
LayerVersion: Layer Version
LoggerLevel: DEBUG or INFO
LambdaMemorySize: 128 to 3008

以下のように修正しました。
S3バケットは事前に作成「しない」でください。
※チャネルIDは、確認して記入してください。

Mappings:
  EnvironmentMap:
    dev:
      LINEOAChannelId: LINEOAChannelId
      LIFFChannelId: LIFFChannelId
      ShopMasterTable: RestaurantShopMaster
      ShopReservationTable: RestaurantShopReservation
      CustomerReservationTable: RestaurantReservationInfo
      LINEChannelAccessTokenDBName: LINEChannelAccessTokenRestaurantDev
      MessageTable: RemindMessageTableRestaurantDev
      # RemindDateDifference -> Negative value if the day before the day of the reservation(ex: A day ago -> -1)
      RemindDateDifference: -1
      FrontS3BucketName: S3 Bucket Name for Frontend
      LayerVersion: 1
      LoggerLevel: DEBUG
      LambdaMemorySize: 128
      # TTL is True:Reservation Data will be deleted at the specified date, False:Data will not be deleted
      TTL: False
      # Set day to delete data
      # If you set TTL: True, data will be deleted in the period specified below.
      # Even if you set TTL: False, please set int value.
      TTLDay: 10
      # ### ACCESS LOG SETTING ###
      # LogS3Bucket: S3BucketName for AccessLog
      # LogFilePrefix: restaurant-sample/
      # ### ACCESS LOG SETTING ###

例によって、APPをデプロイします。

APPのデプロイ

cd ../APP
sam build --use-container
sam deploy --guided

手順にない以下の質問がありました。
yと回答しないと先に進めないので、以下のようにyと回答しました。

ShopListGet may not have authorization defined, Is this okay? [y/N]: y
ShopCalendarGet may not have authorization defined, Is this okay? [y/N]: y
ReservationTimeGet may not have authorization defined, Is this okay? [y/N]: y
CourseListGet may not have authorization defined, Is this okay? [y/N]: y
ReservationPut may not have authorization defined, Is this okay? [y/N]: y

RestaurantApiのURLとCloudFrontDomainNameの値はメモしておきます。

フロントエンド環境構築

line-api-use-case-reservation-Restaurant/frontに移動し、以下の.envファイルを新規作成します。

line-api-use-case-reservation-Restaurant/front/.env

# LIFF ID
LIFF_ID=9999999999-xxxxxxxx

# AXIOS BASE URL
BASE_URL=https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com

# API Gateway Stage
APIGATEWAY_STAGE=dev

# Ajax Module (axios or amplify)
AJAX_MODULE=amplify

npm installを実行します。

npm install

以下のエラーが発生しました。

npm ERR! code 1
npm ERR! path /home/ec2-user/environment/line-api-use-case-reservation-Restaurant/front/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c -- node scripts/build.js

エラーが発生したnode-sassを見ると、node.jsのバージョンによってサポートしているnode-sassのバージョンが決まっているようです。

node.jsのバージョンは、16.19.0で、

$ node -v
v16.19.0

package.jsonに記載のあるnode-sassのバージョンは以下の通りです。

"node-sass": "4.14.1"

今回はテスト目的なので、node.jsをv14にします。
nvmで対応しているバージョンを確認します。

$ nvm ls
->     v16.19.0
         system
default -> 16 (-> v16.19.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.19.0) (default)
stable -> 16.19 (-> v16.19.0) (default)
lts/* -> lts/hydrogen (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.2 (-> N/A)
lts/gallium -> v16.19.0
lts/hydrogen -> v18.12.1 (-> N/A)

v14に対応するlts/fermiumをインストールして設定します。

$ nvm install lts/fermium
Downloading and installing node v14.21.2...
Downloading https://nodejs.org/dist/v14.21.2/node-v14.21.2-linux-x64.tar.xz...
################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.21.2 (npm v6.14.17)
$ nvm use lts/fermium
Now using node v14.21.2 (npm v6.14.17)

再度、npm installを実行すると成功しました。

npm install

続いて、ビルドします。

npm run build

ビルドした資材をS3バケットにアップロードします。

aws s3 cp --recursive dist s3://<バケット名>

テストデータ投入

手順には、ShopMasterTableにdynamodb_data/restaurant_1.json ~ restaurant_6.jsonを投入してくださいと書いてありますが、DynamoDBのJSONビューにして登録する必要があります。

JSONビューに切り替えた後、「DynamoDB JSONの表示」をオフにしてから貼り付ける必要があります。
そうしないとエラーが表示され、更新できなくなります。
[Ln 2、Col 13 Expected '{' instead of '1']のようなエラーが発生します。

動作確認

以下の手順通り、LIFFの登録をします。

LIFF URLにブラウザでアクセスすると、LINEログインを求められるのでログインします。すると、LINEに登録できます。

以下のようなCORSエラーが発生している場合は、CORSの有効化を行います。

Access to XMLHttpRequest at 'https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev/dev/shop_list_get?locale=ja' from origin 'https://xxxxxxxx.cloudfront.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access-Control-Allow-Originには、CloudFrontを指定してください。