AmplifyのCustomで生成した動的なResouceの情報をフロントエンドで参照する

概要

AmplifyのCustomで生成したAPIのエンドポイントに対してフロントエンドからリクエストを送信したい場合など、AmplifyのCustomで生成した動的なResouceの情報をフロントエンドで参照したいケースがあります。その対応方法について記載します。

方法

Step 1. Custom Resource側で参照したい情報をOutputsに出力する

CDKの場合

CfnOutput を使用して出力します。

new CfnOutput(
    this, 
    '<Name>', 
    { value: <Value> }
);

CFnの場合

Outputs を使って出力します。

Outputs:
  <Name>:
    Value: <Value>

Step 2. Hookでフロントエンドから参照するファイルに書き出す

Outputsに出力した情報は amplify/backend/amplify-meta.json に出力されます。

{
  "custom": {
    "<ResourceName>": {
      "output": {
        "<Name>": "<Value>"
      }
    }
  }
}

この情報をフロントエンドから参照するファイルに受け渡します。
フロントエンドから参照するファイルとして、 src/amplifyconfiguration.json （v5の場合 src/aws-exports.js ）を使用することができます。

受け渡すためには Hook を使用します。今回実行するタイミングは post-pull と post-push です。

hooksに下記のような処理を追加します。

const config = JSON.parse(fs.readFileSync('src/amplifyconfiguration.json', { encoding: 'utf8' }).trim())
const meta = JSON.parse(fs.readFileSync('amplify/backend/amplify-meta.json', { encoding: 'utf8' }).trim())

config.custom = {
  ...meta.custom.<ResourceName>.output,
  ...config.custom,
}

fs.writeFileSync('src/amplifyconfiguration.json', JSON.stringify(config, null, 4))

Step 3. フロントエンドから参照する

フロントエンドで書き出されたファイルを参照します。

import config from '@app/amplifyconfiguration.json'

const value = config.custom.<Name>

参考

Custom Resource output in aws-exports.js

バージョン情報

% amplify -v
12.10.1