Amplify CDK with Next.js SSR

Question

I am trying to deploy a next.js (ssr) application in AWS' Amplify using the CDK but Amplify fails to identify the app as next.js ssr. When I do it manually though, using AWS UI, app is identified as SSR and works as expected.

This is generated by aws-cdk/aws-amplify v118 as:

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: "",
            target: "/index.html",
            status: amplify.RedirectStatus.REWRITE
        });
    }
}

Which is identical to what AWS has generated when I do it manually from UI. The difference here is the lack of Framework identification as shown in picture. Any ideas?

user_1927161 · Answer

To answer my own question, I was missing the role as without it aws won't create the necessary resources. (role: https://docs.aws.amazon.com/cdk/api/latest/docs/aws-iam-readme.html)

Edit to elaborate on how i fixed it:

Added a new role that can be used by 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',
    });

and assigned a policy (AdministratorAccess) that role

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

Then upon creating the app, i assigned the role to the app:

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

user_2790481 · Answer

The amplify app requires authorisation to create the relevant resources:

// 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

Amplify CDK with Next.js SSR

2 Answers