Next.js/Cognito/Lambda アプリ開発メモ

APIメモ

URI, method, 用途

• GET: /bank-transfer/summary
  • 銀行振込実績取得
  • 初期表示用にuseEffectで実行
• POST: /bank-transfer/operation
  • Lambda関数(bank-auto-transfer)を実行
  • 3分程度かかるので待たない(非同期呼び出し)
  • 処理結果の判定は↓のポーリング用APIで行う
  • 非同期で実行
    • API Gatewayで次のように設定する
    1. 統合リクエストの設定(統合タイプ Lambda)
    2. HTTPヘッダーに、X-Amz-Invocation-Type: 'Event'を追加
• GET: /bank-transfer/operation
  • ポーリング用
  • bank-auto-transferの処理状態を取得する
  • 終了状態になるまで一定期間ごとに実行する

非同期呼び出し

API Gatewayで次のように設定する

1. 統合リクエストの設定(統合タイプ Lambda)
2. HTTPヘッダーに、X-Amz-Invocation-Type: 'Event'を追加

CORS対策

• API Gateway側で「CORSを有効にする」とするだけだとエラー解消しない
  • 統合リクエストを使用
    • Lambda関数の返却値を所定の形式にしなくてはならない
    • Lambda側でstatusCd, body, headerをキーにしたオブジェクトを返却する

開発用と本番用で同一のURIのAPIを定義する方法

• ステージ変数を定義する
  • devではfunctionName="bank-auto-transfer-dev"
  • prodではfunctionName="bank-auto-transfer"
• Lambdaプロキシ統合を外してマッピングテンプレートを編集する
  • 統合リクエスト
    • Lambdaのevent変数からパラメーターを取得できるようにする

    {
        "lambda_name": "${stageVariables.functionName}"
    }
    

  • 統合レスポンス
    • bodyだけ返却する

    $input.path('$.body')
    

開発用と本番用で異なるLambda関数に紐づける方法

• ステージ変数を定義する
  • devではfunctionName="bank-auto-transfer-dev"
  • prodではfunctionName="bank-auto-transfer"
• 統合リクエストで指定するLambda関数のリソースIDの関数部分を変数に置き換える

Cognitoメモ

S3メモ

• パブリックブロックアクセスを有効にする
• バケットポリシーを設定してCloudfrontからのGetObjectアクションを有効にする

CloudFrontメモ

構築

• origin domain
  • S3バケットを選択
• Origin access control settings (recommended)
  • CloudFront経由でしかアクセスできないようにする

ファイル名なしで index.html をリクエスト URL に追加する

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/example-function-add-index.html

Todo

• home配下のコンポーネントを整理
  • hooksに退避
  • メモ化
• Auth周りの処理を整理
  • hooks化？
• 異常系の処理を整理

レンダリング改善

• React.memo + useCallbackのコンボだとうまくいかない？
  • 状態同士で関連しあっているのが良くなかったかも
  • 全部Providerにしてみる
• Context/Providerで丸ごと管理