Zenn
✨

Serverless Frameworkを用いてAppSyncをローカルでテストする際の注意点

2022/10/04に公開
Serverless
AppSync
Serverless Framework
tech

ローカルでAppSyncをテストしたい

Serverless Frameworkを用いてローカルでAppSyncを動かそうと思ったらハマったので、その対処方法についてのまとめです。

これだけでイケると思ってた手順

  1. 各種ライブラリをインストール
$ npm install serverless-offline serverless-appsync-simulator serverless-appsync-plugin
  1. serverless.tsのpluginsに以下の3つを追加
 plugins: [
    ...
    'serverless-appsync-plugin',
    'serverless-appsync-simulator',
    'serverless-offline',
  ],
  1. AppSyncの設定をserverless.tsに追加（HTTPデータソースを使用する場合）
    ※ GraphQLスキーマとマッピングテンプレート用のファイルも作成しておく
appSync: {
      name: 'XXXX',
      authenticationType: 'API_KEY',
      schema: './appsync/schema.graphql',
      dataSources: [
        {
          name: 'sampleAPI',
          type: 'HTTP',
          config: {
            endpoint: 'http://xxxx/yyyy/',
          },
        },
      ],
      mappingTemplatesLocation: './appsync/mapping-templates',
      mappingTemplates: [
        {
          dataSource: 'sampleAPI',
          type: 'Query',
          field: 'xxxx',
          request: 'Query.xxxx.request.vtl',
          response: 'Query.xxxx.response.vtl',
        },
      ],
    },
  1. 実行！
    $ sls offline start で動くと思いきや動かない

注意点というか解決方法

その1: apiKeyは固定なので諦める

serverless.tsに以下を追加する必要があるのですが、apiKeyは以下で固定となります。
これは、serverless-appsync-simulatorが Amplify CLIを用いてエミュレートしているのですが、Amplify CLI側でハードコードされているために起こります。
参考: API key is readonly in Amplify GraphQL UI

'appsync-simulator': {
      apiKey: 'da2-fakeApiId123456',
      watch: true,
},

その2: watchmanを入れる

上のように watch をtrueにする場合、watchmanを実行環境上にinstallしておく必要があります。
macなら$ brew install watchmanでおそらくいけます（Pythonのversionの関係で xcode-select --installしろと言われたらそれを実行）。
また、不要であればfalseにしてしまえば特にインストールは不要です。

余談ですが、実はこの方法は、serverless-appsync-simulatorレポジトリのREADMEに書いてあります。

その3: 依存ライブラリのバージョンを変える

cfn-resolver-libというライブラリに依存しているのですが、npm installしたあとにpackage-lock.jsonを見ると、"cfn-resolver-lib": "^1.1.7"と記載している箇所が見つかるかと思います。この場合バージョン1.1.8がinstallされてしまうことがあります。
そのため、この部分（2箇所あるはず）をcfn-resolver-lib": "1.1.7"と書き換え、再度npm installすることで正常に動作します。
こちらについても以下のissueで報告がされています。
AppSync Simulator: TypeError: Cannot convert undefined or null to object

結論

謎なハマリポイントは、公式ドキュメントやIssueを見とくのが結局解決には早い（真理）

Discussion