使用 Next.js SSR 放大 CDK

Question

我尝试使用 CDK 在 AWS 的 Amplify 中部署 next.js (ssr) 应用程序，但 Amplify 无法将该应用程序识别为 next.js ssr。当我使用 AWS UI 手动执行此操作时，应用程序被识别为 SSR 并按预期工作。

这是由 aws-cdk/aws-amplify v118 生成的：

import * as cdk from '@aws-cdk/core';
import * as amplify from '@aws-cdk/aws-amplify';
import codebuild = require('@aws-cdk/aws-codebuild');

export class AmplifyStack extends cdk.Stack {
    constructor(scope: cdk.Construct, id: string, props: cdk.StackProps) {
        super(scope, id, props);

        const sourceCodeProvider = new amplify.GitHubSourceCodeProvider({
            owner: '.....',
            repository: '....',
            oauthToken: cdk.SecretValue.secretsManager('github-token'),

        });
        const buildSpec = codebuild.BuildSpec.fromObjectToYaml(
            {
                version: 1,
                applications: [
                    {
                        frontend: {
                            phases: {
                                preBuild: {
                                    commands: [
                                        "npm install"
                                    ]
                                },
                                build: {
                                    commands: [
                                        "npm run build"
                                    ]
                                }
                            },
                            artifacts: {
                                baseDirectory: ".next",
                                files: [
                                    "**/*"
                                ]
                            },
                            cache: {
                                paths: [
                                    "node_modules/**/*"
                                ]
                            }
                        }
                    }
                ]
            }
        );
        const amplifyApp = new amplify.App(this, "cdk-nf-web-app", {
            sourceCodeProvider: sourceCodeProvider,
            buildSpec: buildSpec
        });

        amplifyApp.addBranch('develop', {
            basicAuth: amplify.BasicAuth.fromGeneratedPassword('dev')
        });
        amplifyApp.addCustomRule({
            source: "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
            target: "/index.html",
            status: amplify.RedirectStatus.REWRITE
        });
    }
}

这与我从 UI 手动执行操作时 AWS 生成的内容相同。这里的区别是缺少框架标识，如图所示。有任何想法吗？

Answer 1

为了回答我自己的问题，我错过了这个角色，因为没有它，AWS 将不会创建必要的资源。（角色：https://docs.aws.amazon.com/cdk/api/latest/docs/aws-iam-readme.html）

编辑以详细说明我如何修复它：

添加了一个可以被放大使用的新角色

const role = new iam.Role(this, 'amplify-role-webapp-'+props.environment, {
        assumedBy: new iam.ServicePrincipal('amplify.amazonaws.com'),
        description: 'Custom role permitting resources creation from Amplify',
    });

并分配了该角色的策略 (AdministratorAccess)

let iManagedPolicy = iam.ManagedPolicy.fromAwsManagedPolicyName(
        'AdministratorAccess',
    );
role.addManagedPolicy(iManagedPolicy)

然后在创建应用程序时，我将角色分配给该应用程序：

const amplifyApp = new amplify.App(this, "cdk-nf-web-app", {
        sourceCodeProvider: sourceCodeProvider,
        buildSpec: buildSpec,
        role: role  <--- this line here
    });