使用Next.js SSR扩增CDK

rks48beu  于 2022-12-23  发布在  其他
关注(0)|答案(2)|浏览(136)

我尝试使用CDK在AWS的Amplify中部署next.js(ssr)应用程序,但Amplify无法将应用程序识别为next.js ssr。但当我使用AWS UI手动部署时,应用程序被识别为SSR,并按预期工作。
x1c 0d1x这是由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
        });
    }
}

这是相同什么AWS已生成当我从UI手动。这里的区别是缺乏框架标识如图所示。有什么想法?

htrmnn0y

htrmnn0y1#

回答我自己的问题,我错过了这个角色,因为没有它aws就不会创建必要的资源。https://docs.aws.amazon.com/cdk/api/latest/docs/aws-iam-readme.html
编辑详细说明我是如何修复它的:
添加了一个可由amplify使用的新角色

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

wsewodh22#

amplify应用程序需要授权才能创建相关资源:

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

源代码展示

相关问题