用Next.js SSR扩增CDK

Question

我试图部署一个next.js ( ssr )应用程序在AWS‘放大器使用CDK，但放大器未能识别应用程序为next.js ssr。但是，当我手动使用AWS时，app被识别为SSR，并按预期工作。

​

这是由aws/aws-放大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手动执行时所生成的完全相同。这里的不同之处在于缺乏框架标识，如图所示。有什么想法吗？

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
    });

Answer 2

放大应用程序需要授权才能创建相关资源：

// This is for demonstrations purposes only; Do not give full access for production usage!
amplifyApp.grantPrincipal.addToPrincipalPolicy(new iam.PolicyStatement({
    resources: ["*"],
    actions: ['*'],
}))

源代码展示

Next.JS SSR展示