Looking for how to use this in your app?See Frontend Libraries →
Amplify REST APIのセットアップ
AWS Cloud Development Kit (AWS CDK)を使用すると、Amazon API Gatewayを利用したREST APIのルートのリゾルバーとしてAmplify Functionsを構成できます。
Lambda Functionを使用したREST APIのセットアップ
新しいディレクトリとリソースファイルamplify/functions/api-function/resource.tsを作成します。次に、defineFunctionを使用して関数を定義します：
amplify/functions/api-function/resource.ts
import { defineFunction } from "@aws-amplify/backend";
export const myApiFunction = defineFunction({ name: "api-function",});対応するハンドラーファイルamplify/functions/api-function/handler.tsを次の内容で作成します：
amplify/functions/api-function/handler.ts
import type { APIGatewayProxyHandler } from "aws-lambda";
export const handler: APIGatewayProxyHandler = async (event) => { console.log("event", event); return { statusCode: 200, // 以下のCORS設定を修正して、特定の要件に合わせてください headers: { "Access-Control-Allow-Origin": "*", // これを信頼するドメインに制限してください "Access-Control-Allow-Headers": "*", // 許可する必要なヘッダーのみを指定してください }, body: JSON.stringify("Hello from myFunction!"), };};AWS CDKを使用して、Amazon API Gatewayを利用するREST APIリソースを作成します。
amplify/backend.ts
import { defineBackend } from "@aws-amplify/backend";import { Stack } from "aws-cdk-lib";import { AuthorizationType, CognitoUserPoolsAuthorizer, Cors, LambdaIntegration, RestApi,} from "aws-cdk-lib/aws-apigateway";import { Policy, PolicyStatement } from "aws-cdk-lib/aws-iam";import { myApiFunction } from "./functions/api-function/resource";import { auth } from "./auth/resource";import { data } from "./data/resource";
const backend = defineBackend({ auth, data, myApiFunction,});
// 新しいAPIスタックを作成しますconst apiStack = backend.createStack("api-stack");
// 新しいREST APIを作成しますconst myRestApi = new RestApi(apiStack, "RestApi", { restApiName: "myRestApi", deploy: true, deployOptions: { stageName: "dev", }, defaultCorsPreflightOptions: { allowOrigins: Cors.ALL_ORIGINS, // これを信頼するドメインに制限してください allowMethods: Cors.ALL_METHODS, // 許可する必要なメソッドのみを指定してください allowHeaders: Cors.DEFAULT_HEADERS, // 許可する必要なヘッダーのみを指定してください },});
// 新しいLambda統合を作成しますconst lambdaIntegration = new LambdaIntegration( backend.myApiFunction.resources.lambda);
// IAM認可を使用した新しいリソースパスを作成しますconst itemsPath = myRestApi.root.addResource("items", { defaultMethodOptions: { authorizationType: AuthorizationType.IAM, },});
// リソースパスに作成するメソッドを追加しますitemsPath.addMethod("GET", lambdaIntegration);itemsPath.addMethod("POST", lambdaIntegration);itemsPath.addMethod("DELETE", lambdaIntegration);itemsPath.addMethod("PUT", lambdaIntegration);
// APIにプロキシリソースパスを追加しますitemsPath.addProxy({ anyMethod: true, defaultIntegration: lambdaIntegration,});
// 新しいCognito User Poolsオーソライザーを作成しますconst cognitoAuth = new CognitoUserPoolsAuthorizer(apiStack, "CognitoAuth", { cognitoUserPools: [backend.auth.resources.userPool],});
// Cognito認可を使用した新しいリソースパスを作成しますconst booksPath = myRestApi.root.addResource("cognito-auth-path");booksPath.addMethod("GET", lambdaIntegration, { authorizationType: AuthorizationType.COGNITO, authorizer: cognitoAuth,});
// APIへのInvokeアクセスを許可する新しいIAMポリシーを作成しますconst apiRestPolicy = new Policy(apiStack, "RestApiPolicy", { statements: [ new PolicyStatement({ actions: ["execute-api:Invoke"], resources: [ `${myRestApi.arnForExecuteApi("*", "/items", "dev")}`, `${myRestApi.arnForExecuteApi("*", "/items/*", "dev")}`, `${myRestApi.arnForExecuteApi("*", "/cognito-auth-path", "dev")}`, ], }), ],});
// ポリシーを認証済みおよび未認証IAMロールにアタッチしますbackend.auth.resources.authenticatedUserIamRole.attachInlinePolicy( apiRestPolicy);backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy( apiRestPolicy);
// 設定ファイルに出力を追加しますbackend.addOutput({ custom: { API: { [myRestApi.restApiName]: { endpoint: myRestApi.url, region: Stack.of(myRestApi).region, apiName: myRestApi.restApiName, }, }, },});Amplifyライブラリのインストール
選択したパッケージマネージャーを使用してAmplify JavaScriptライブラリをインストールします。例えば、npmを使用する場合：
Terminal
npm add aws-amplifyAmplify APIの初期化
Amplify APIカテゴリを初期化するには、Amplify.configure()を使用してAmplifyを構成する必要があります。
設定ファイルをアプリにインポートして読み込みます。Amplify設定ステップをアプリのルートエントリーポイントに追加することをお勧めします。例えば、Reactの場合はindex.js、Angularの場合はmain.tsです。
pages/_app.tsx
import { Amplify } from 'aws-amplify';import { parseAmplifyConfig } from "aws-amplify/utils";import outputs from '@/amplify_outputs.json';
const amplifyConfig = parseAmplifyConfig(outputs);
Amplify.configure( { ...amplifyConfig, API: { ...amplifyConfig.API, REST: outputs.custom.API, // ← カスタムREST APIに必須 }, }, { API: { REST: { retryStrategy: { strategy: 'no-retry' // デフォルトのリトライ戦略をオーバーライドします }, } } });トラブルシューティング
「API name is invalid」エラー
REST APIを呼び出すときにAPI name is invalidエラーが発生した場合は、以下の点を確認してください：
- カスタムAPI構成を追加した:
Amplify.configure()の呼び出しにREST: outputs.custom.APIを含めてください - 正しいAPI名を使用した: API名は
backend.tsファイルで定義されたrestApiNameと一致する必要があります Amplify.configure()を呼び出した: 構成がAPI呼び出しの前に行われることを確認してください
正しくない構成の例（カスタムAPIが不足している場合）:
// ❌ これは「API name is invalid」エラーを引き起こしますAmplify.configure(outputs); // カスタムREST API構成が不足しています正しい構成:
// ✅ これはカスタムREST APIを含みますconst amplifyConfig = parseAmplifyConfig(outputs);Amplify.configure({ ...amplifyConfig, API: { ...amplifyConfig.API, REST: outputs.custom.API, // カスタムAPIに必須 },});