AWS CDK 및 Amplify 런타임 구성

안녕,

이전에는 AWS CDK와 Amplify 앱의 원활한 통합이 매우 번거로웠습니다! Amplify 프런트엔드 React 앱의 런타임 구성을 사용하면 이제 훨씬 쉬워졌습니다. 여기에서는 런타임 구성에 대한 아이디어를 소개하고자 합니다.

풀스택 프로젝트에서 정기적으로 AWS CDK를 백엔드로 사용합니다. GraphQL 구현으로서의 AppSync는 프런트엔드와 백엔드 간의 인터페이스입니다. 프런트엔드는 일반적으로 S3 버킷에서 호스팅되는 React SPA(단일 페이지 애플리케이션)입니다. 저는 AWS Cognito를 사용하여 사용자를 관리 및 인증하고 일반적으로 AWS Amplify를 사용하여 프런트엔드 React 앱을 구성합니다.

아이디어 런타임 구성

runtime-config를 사용하면 런타임에서 빌드 단계 후에 Amplify를 구성할 수 있습니다. SPA의 dist 폴더에는 앱의 런타임을 가져오는 공용 폴더의 runtime-config.json과 같은 파일이 제공됩니다. 여기에서 runtime-config.json의 예를 볼 수 있습니다.

{
  "region": "eu-central-1",
  "identityPoolId": "eu-central-1:cda9c404-0e74-439d-b40c-90204a0e1234",
  "userPoolId": "eu-central-1_Uv0E91234",
  "userPoolWebClientId": "1t6jbsr5b7utg6c9urhj51234",
  "appSyncGraphqlEndpoint": "https://wr2cf4zklfbt3pxw26bik12345.appsync-api.eu-central-1.amazonaws.com/graphql"
}

런타임 구성은 useEffect 및 가져오기를 통해 React 앱에 동적으로 로드됩니다.

useEffect(() => {
    fetch('/runtime-config.json')
      .then((response) => response.json())
      .then((runtimeContext) => {
        runtimeContext.region &&
          runtimeContext.userPoolId &&
          runtimeContext.userPoolWebClientId &&
          runtimeContext.identityPoolId &&
          Amplify.configure({
            aws_project_region: runtimeContext.region,
            aws_cognito_identity_pool_id: runtimeContext.identityPoolId,
            aws_cognito_region: runtimeContext.region,
            aws_user_pools_id: runtimeContext.userPoolId,
            aws_user_pools_web_client_id: runtimeContext.userPoolWebClientId,
            aws_appsync_graphqlEndpoint: runtimeContext.appSyncGraphqlEndpoint,
            aws_appsync_region: runtimeContext.region,
            aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS',
            Auth: {
              region: runtimeContext.region,
              userPoolId: runtimeContext.userPoolId,
              userPoolWebClientId: runtimeContext.userPoolWebClientId,
              identityPoolId: runtimeContext.identityPoolId,
            },
          });
      })
      .catch((e) => console.log(e));
  }, []);

보시다시피 runtime-config.json을 로드하기 위한 가져오기가 처음에 실행됩니다. 그런 다음 Amplify가 추출된 속성으로 구성됩니다.

HTML window variables을 사용하여 Amplify 매개변수를 설정할 수도 있습니다. 그러나 누락된 runtime-config.json 또는 단일 누락된 속성에 잠재적으로 더 잘 반응하기 때문에 여기에 제시된 가져오기 솔루션을 선호합니다. 또한 창 변수는 DOM에 대한 전역 액세스 권한을 가지므로 피해야 합니다.

워크플로

React 앱을 빌드하고 배포하기 위한 런타임 구성이 없는 일반적인 워크플로우는 때때로 다음과 같았습니다.

사용자 풀 ID, AppSynch 엔드포인트 등과 같은 현재 엔드포인트를 말리고 저장합니다.

Amplify 구성 파일 빌드

반응 앱 빌드

cdk는 react dist 폴더를 S3에 배포합니다

.

runtime-config로 파이프라인 워크플로 구축:

반응 앱 빌드

cdk는 react dist 폴더 및 런타임 구성을 S3에 배포합니다

.

CDK 예시

전체 코드는 내 GitHub Senjuns project에서 사용할 수 있습니다.

const userPool = new cognito.UserPool(...)
...
const identityPool = new cognito.CfnIdentityPool(...)
...

const dashboard = new StaticWebsite(this, 'dashboard', {
    build: '../dashboard/build',
    recordName: 'dashboard',
    domainName: props.domainName,
    runtimeOptions: {
        jsonPayload: {
            region: core.Stack.of(this).region,
            identityPoolId: identityPool.ref,
            userPoolId: userPool.userPoolId,
            userPoolWebClientId: userPoolWebClient.userPoolClientId,
            appSyncGraphqlEndpoint: graphqlUrl.stringValue,
        },
    },
});

StaticWebsite는 S3 정적 웹 사이트 버킷을 기본 리소스로 사용하는 간단한 L3 CDK 구조입니다. 자세한 내용을 볼 수 있습니다here . 그러나 흥미로운 세부 정보는 runtimeOptions 개체에 있습니다. Amplify의 런타임 구성에 대한 엔드포인트가 저장됩니다. 그 뒤에는 s3deploy.Source.jsonData(...)를 통해 엔드포인트를 JSON 파일 runtime-config.json으로 전송하는 S3 Bucket Deployment Construct가 있습니다.

const DEFAULT_RUNTIME_CONFIG_FILENAME = 'runtime-config.json';

...

new s3deploy.BucketDeployment(this, 'BucketDeployment', {
    sources: [
    s3deploy.Source.asset(props.build),
    ...(props.runtimeOptions
        ? [
        s3deploy.Source.jsonData(
            props.runtimeOptions?.jsonFileName ||
                DEFAULT_RUNTIME_CONFIG_FILENAME,
            props.runtimeOptions?.jsonPayload,
        ),
        ]
        : []),
    ],
    distribution,
    destinationBucket: siteBucket,
});

이것은 멋진 CDK 통합입니다 :) ! BucketDeployment Construct에 React dist 및 runtime-config와 같은 두 개의 매개변수를 제공하는 것은 매우 현명한 생각입니다.

중첩 스택 출력에 대한 해결 방법

런타임 구성으로 작업하는 동안 문제가 발생했습니다. runtime-config에 대해 중첩 스택의 CDK 출력을 사용할 수 없습니다. 그러나 AWS Systems Manager 파라미터를 사용하는 해결 방법이 있습니다.

const graphqlUrl = new ssm.StringParameter(this, 'GraphqlUrl', {
    parameterName: 'GraphqlUrl',
    stringValue: appSyncTransformer.appsyncAPI.graphqlUrl,
});

...

const dashboard = new StaticWebsite(this, 'dashboard', {
    build: '../dashboard/build',
    recordName: 'dashboard',
    domainName: props.domainName,
    runtimeOptions: {
    jsonPayload: {
        region: core.Stack.of(this).region,
        identityPoolId: identityPool.ref,
        userPoolId: userPool.userPoolId,
        userPoolWebClientId: userPoolWebClient.userPoolClientId,
        appSyncGraphqlEndpoint: graphqlUrl.stringValue,
    },
    },
});

멋지죠? 중첩 스택 출력은 단순히 SSM 문자열 매개변수에 저장되고 나중에 읽을 수 있습니다. 위대한 Adrian Dimech에게 감사합니다workaround 🙏.

결론

AWS CDK와 Amplify는 강력한 조합입니다. 여기에 제공된 런타임 구성을 사용하면 이 조합이 훨씬 더 좋아집니다! 이 솔루션을 aws-prototyping-sdk에서 복사했습니다. 이 리포지토리에서 개발 중인 몇 가지 흥미로운 AWS CDK 구조가 있습니다. 그래서 반드시 확인해야합니다!

영어로 번역하는 데 도움을 주고 많은 시간을 절약해 준 DeepL translater (free version)에게 감사합니다 :).

저는 오픈 소스 프로젝트 작업을 좋아합니다. 이미 https://github.com/mmuller88에서 사용할 수 있는 많은 것들이 있습니다. 내 작업과 내 블로그 게시물이 마음에 들면 다음에서 나를 지원하는 것을 고려하십시오.



또는



그리고 내 사이트를 방문하는 것을 잊지 마세요