使用 Next.js SSR 放大 CDK答案

【问题标题】：Amplify CDK with Next.js SSR使用 Next.js SSR 放大 CDK
【发布时间】：2021-08-16 18:26:02
【问题描述】：

我正在尝试使用 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 生成的内容相同。这里的区别是缺少框架识别，如图所示。有什么想法吗？

【问题讨论】：

我也有同样的问题。还没有解决方案:-(

标签： next.js aws-amplify aws-cdk

【解决方案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
    });

【讨论】：

嗨帕诺斯！你能详细说明一下吗？你做了什么？
你好@Tobi，我更新了上面的答案。希望对您有所帮助。

【解决方案2】：

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

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

Source Code Showcase
Next.JS SSR Showcase

【讨论】：

这里的具体资源和行动是什么？使用通配符看起来有点吓人。
@Tobi 特定资源将是 CDN 的 cloudfront，静态资产的 s3 和 SSR 页面的 lambdas。但是，没有任何明确的方法可以获取相应的完全限定 AWS 资源逻辑 ID 来限制 IAM 策略。真正令人讨厌的是放大 next.js 在丢失它们时会默默地失败，因此不可能找出所需的策略。