Looking for how to use this in your app?See Frontend Libraries →
Amplify HTTP API をセットアップする
AWS Cloud Development Kit (AWS CDK) を使用して、Amplify Functions を Amazon API Gateway で提供される HTTP API のルートのリゾルバーとして構成できます。
Lambda Function を使用して HTTP 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 { APIGatewayProxyHandlerV2 } from "aws-lambda";
export const handler: APIGatewayProxyHandlerV2 = async (event) => { console.log("event", event); return { statusCode: 200, // 以下の CORS 設定を特定の要件に合わせて修正してください headers: { "Access-Control-Allow-Origin": "*", // これを信頼できるドメインに制限してください "Access-Control-Allow-Headers": "*", // 許可する必要があるヘッダーのみを指定してください }, body: JSON.stringify("Hello from api-function!"), };};次に、AWS CDK を使用して、バックエンドファイルに HTTP API を作成します：
amplify/backend.ts
import { defineBackend } from "@aws-amplify/backend";import { Stack } from "aws-cdk-lib";import { CorsHttpMethod, HttpApi, HttpMethod,} from "aws-cdk-lib/aws-apigatewayv2";import { HttpIamAuthorizer, HttpUserPoolAuthorizer,} from "aws-cdk-lib/aws-apigatewayv2-authorizers";import { HttpLambdaIntegration } from "aws-cdk-lib/aws-apigatewayv2-integrations";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");
// IAM オーソライザーを作成するconst iamAuthorizer = new HttpIamAuthorizer();
// ユーザープール オーソライザーを作成するconst userPoolAuthorizer = new HttpUserPoolAuthorizer( "userPoolAuth", backend.auth.resources.userPool, { userPoolClients: [backend.auth.resources.userPoolClient], });
// 新しい HTTP Lambda インテグレーションを作成するconst httpLambdaIntegration = new HttpLambdaIntegration( "LambdaIntegration", backend.myApiFunction.resources.lambda);
// IAM をデフォルトオーソライザーとした新しい HTTP API を作成するconst httpApi = new HttpApi(apiStack, "HttpApi", { apiName: "myHttpApi", corsPreflight: { // 以下の CORS 設定を特定の要件に合わせて修正してください allowMethods: [ CorsHttpMethod.GET, CorsHttpMethod.POST, CorsHttpMethod.PUT, CorsHttpMethod.DELETE, ], // これを信頼できるドメインに制限してください allowOrigins: ["*"], // 許可する必要があるヘッダーのみを指定してください allowHeaders: ["*"], }, createDefaultStage: true,});
// IAM オーソライザーとさまざまなメソッドを使用して API にルートを追加するhttpApi.addRoutes({ path: "/items", methods: [HttpMethod.GET, HttpMethod.PUT, HttpMethod.POST, HttpMethod.DELETE], integration: httpLambdaIntegration, authorizer: iamAuthorizer,});
// API にプロキシリソースパスを追加するhttpApi.addRoutes({ path: "/items/{proxy+}", methods: [HttpMethod.ANY], integration: httpLambdaIntegration, authorizer: iamAuthorizer,});
// ルートに OPTIONS メソッドを追加するhttpApi.addRoutes({ path: "/items/{proxy+}", methods: [HttpMethod.OPTIONS], integration: httpLambdaIntegration,});
// ユーザープール オーソライザーを使用してルートを API に追加するhttpApi.addRoutes({ path: "/cognito-auth-path", methods: [HttpMethod.GET], integration: httpLambdaIntegration, authorizer: userPoolAuthorizer,});
// API への Invoke アクセスを許可する新しい IAM ポリシーを作成するconst apiPolicy = new Policy(apiStack, "ApiPolicy", { statements: [ new PolicyStatement({ actions: ["execute-api:Invoke"], resources: [ `${httpApi.arnForExecuteApi("*", "/items")}`, `${httpApi.arnForExecuteApi("*", "/items/*")}`, `${httpApi.arnForExecuteApi("*", "/cognito-auth-path")}`, ], }), ],});
// ポリシーを認証済みおよび未認証 IAM ロールにアタッチするbackend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(apiPolicy);backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(apiPolicy);
// 出力を設定ファイルに追加するbackend.addOutput({ custom: { API: { [httpApi.httpApiName!]: { endpoint: httpApi.url, region: Stack.of(httpApi).region, apiName: httpApi.httpApiName, }, }, },});Amplify ライブラリをインストールする
任意のパッケージマネージャーを使用して Amplify JavaScript ライブラリをインストールしてください。例えば、npm の場合：
Terminal
npm add aws-amplifyAmplify API を初期化する
Amplify API カテゴリを初期化するには、Amplify.configure() で Amplify を構成する必要があります。
アプリの設定ファイルをインポートして読み込みます。Amplify 設定ステップをアプリのルートエントリーポイント（例：src/main.ts）に追加することをお勧めします：
src/main.ts
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, }, }, { API: { REST: { retryStrategy: { strategy: 'no-retry' // デフォルトの再試行戦略をオーバーライドします }, } }, });