Amplifyをv5からv6にアップデートしたので、その際に変更した点をまとめてみた

2024年12月9日 13:15

はじめに

こんばんは、Buildサービス部の鈴木です。
11月になり2024年もいよいよあと残すこと1か月になりました。
つい最近までは暑い暑い言っていたのに急に冷え込んできていきなりコートが必要になり、今年はあまり秋を感じられる時間がなかったですね
今年もインフルエンザやコロナが流行するかもなのでくれぐれも体調管理には気を付けてください。

さて、現在自分の案件ではAmplifyを使ってシステムの実装を行っているのですが、新しいシステムを作るにあたり色々と実装に変更点がありましたので、それを紹介したいと思います。

Amplifyの利用機能

システムにおいてAmplifyを利用しているのは以下の機能になります。

Authentication (Cognito)
REST API
GraphQL API (AppSync)
Storage (S3)

また、開発言語はTypeScript(JavaScript)になります。

Amplifyの変更点

AmplifyのConfigureの変更

Amplifyのconfigureの設定に変更が入りました。
利用するパラメータのValueに変更はないものの、そのValueの持たせ方のキー名に大きく変更が入りました。

Authentication (Cognito)

AuthConfig_v6 {
  Cognito: {
    userPoolClientId: string;
    userPoolId: string;
    identityPoolId: string;
    loginWith: {
      oauth: {
        domain: string;
        scopes: string[];
        redirectSignIn: string[];
        redirectSignOut: string[];
        responseType: 'code' | 'token';
      };
    };
  };
}

AuthConfig_v5 {
  region: string;
  userPoolId: string;
  userPoolWebClientId: string;
  identityPoolId: string;
  oauth: {
      domain: 'your_cognito_domain',
      scope: [
        'phone',
        'email',
        'profile',
        'openid',
        'aws.cognito.signin.user.admin'
      ],
      redirectSignIn: 'string',
      redirectSignOut: 'string',
      responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
    }
  endpoint?: string;
}

REST API

ApiConfig_v6 {
  REST: {
    [apiName: string]: {
      endpoint: string;
      region?: string;
    };
  };
}

ApiConfig_v5 {
  endpoints: Array<{
    name: string;
    endpoint: string;
    region: string;
  }>;
}

また、Headerをカスタムで付加したい場合（例：Authorization）は
Amplify,configureの第二引数で個別に設定する必要があります。

Amplify.configure(amplifyConfig, {
  API: {
    REST: {
      headers: async () => {
        return { Authorization: `Bearer ${(await fetchAuthSession()).tokens?.idToken?.toString()}` };
      },
    },
    GraphQL: {
      headers: async () => {
        return { Authorization: `Bearer ${(await fetchAuthSession()).tokens?.idToken?.toString()}` };
      },
    },
  },
});

GraphQL API

AppSyncConfig_v6 {
  GraphQL: {
    endpoint: string;
    defaultAuthMode: string;
    region?: string;
    apiKey?: string;
    customEndpoint?: string;
    customEndpointRegion?: string;
  };
}

AppSynConfig_v5 {
  aws_appsync_graphqlEndpoint: string;
  aws_appsync_region: string;
  aws_appsync_authenticationType: string;
}

Storage

StorageConfig_v5 {
  AWSS3: {
    bucket: string;
    region: string;
  };
}

StorageConfig_v6 {
  S3: {
    bucket: string;
    region: string;
  };
}

Authentication

色々と変更が入り実装の修正に時間が取られたのは認証周りですね。
v5の時はuseAuthenticator関数を使えば、大体のユーザー情報は取ってこれたのですが、v6からはfetchAuthSessionやfetchUserAttributesといった関数を利用用途に合わせて呼び出す必要があります。
また、認証トークンの取得方法も下記のように変更が入りました。
signInやsignOutといった関数はimport先に変更があれど、大きな変更なく使えますが、引数が (username, password)から({username, password})のオブジェクトになったりといった地味な変更が入っています。

v5
import { Auth } from 'aws-amplify';
Authorization: `Bearer ${(await Auth.currentSession()).getIdToken().getJwtToken()}`

import { fetchAuthSession } from 'aws-amplify/auth';
v6
Authorization: `Bearer ${(await fetchAuthSession()).tokens?.idToken?.toString()}`

REST API

REST関数の型がところどころ変更されており、DELETE操作のレスポンスにbodyが無くなったりと、実装によってはデグレが発生しそうな変更になっております。
APIの呼び出しがaxiosベースからfetchベースへと変更されたのでaxios固有の処理を変更する必要があります。
(例：エラーハンドリングの際のエラーインスタンス)

GraphQL API

こちらは大きな変更はなかったものの、import { API } from 'aws-amplify'という形でモジュールをインポートしてGrahQLを操作していたものが、'aws-amplify/api'からgenerateClientという関数を呼び出してclientを立てたのち、操作する形に変更となりました。
また、GraphQLから帰ってくるクエリの結果が、result.value.dataで取得していたものが、result.dataへと変更されました。

Storage

こちらはけっこうな変更があり、ファイルのダウンロード・アップロードともに関数が変更され、オプションも変更されました。
また、キーでの指定だったものがパスへと変更され、アクセスレベルの差分がパスという形で吸収されました。

アップロード

v5
import { Storage } from 'aws-amplify';

await Storage.put(
　　　　　file.name, // アップロードするオブジェウトの名前
　　　　　file, // アップロードしたいファイルオブジェクト
　　　　　{
        contentType: file.type, // ファイルのデータ形式、
      　}
);

v6
import { uploadData } from 'aws-amplify/storage';

await uploadData({
        path: `filePath`, // アップロードするS3のパスでの指定なので、public/といったprefixを付ける必要があり。
        // private,protectedの場合はidentityIdを引数とした関数により動的に指定する
        file,
        options: {
          contentType: file.type,
        },
      }
);

ダウンロード

v5
import { Storage } from 'aws-amplify';

await Storage.get(
　　　　　file.name, // ダウンロードするオブジェウトの名前
　　　　　{
        download: true、
      　}
);

v6
import { downloadData } from 'aws-amplify/storage';

await downloadData({
        path: `filePath`, // アップロードするS3のパスでの指定なので、public/といったprefixを付ける必要があり。
        // private,protectedの場合はidentityIdを引数とした関数により動的に指定する
      }
);

おわりに

このように、どの機能も意外と修正が入っており思ったよりも修正に時間が取られました。
ですので、現在Amplifyのver5で運用されている方は早めにv6にアップデートしていたほうが改修にかかる時間が減るかと思います。
こういったバージョンアップ対応はIT開発者の宿命とも言える定期的に起こる大変なイベントですが、きっちり乗り越えていいシステムをメンテナンスできるように頑張っていきましょう！