feat(amplify-alpha): support custom response headers in monorepo structures (#31771)

### Issue # (if applicable)

Closes #31758.

### Reason for this change

The current custom response headers implementation does not support Amplify apps with monorepo structures, this is due to a difference in the YAML formats for these apps: https://docs.aws.amazon.com/amplify/latest/userguide/custom-header-YAML-format.html

### Description of changes

An `appRoot` property has been added to `CustomResponseHeader`, which specifies the appRoot from the build spec to use for the output YAML.

### Description of how you validated changes

I added unit tests and tested the implementation using a sample deployment. I'm happy to add integration tests if required.

### Checklist
- [x] My code adheres to the [CONTRIBUTING GUIDE](https://github.com/aws/aws-cdk/blob/main/CONTRIBUTING.md) and [DESIGN GUIDELINES](https://github.com/aws/aws-cdk/blob/main/docs/DESIGN_GUIDELINES.md)

----

*By submitting this pull request, I confirm that my contribution is made under the terms of the Apache-2.0 license*

Author: georeeve

packages/@aws-cdk/aws-amplify-alpha/README.md

@@ -238,6 +238,68 @@ const amplifyApp = new amplify.App(this, 'App', {
 });
 ```
 
+If the app uses a monorepo structure, define which appRoot from the build spec the custom response headers should apply to by using the `appRoot` property:
+
+```ts
+import * as codebuild from 'aws-cdk-lib/aws-codebuild';
+
+const amplifyApp = new amplify.App(this, 'App', {
+  sourceCodeProvider: new amplify.GitHubSourceCodeProvider({
+    owner: '<user>',
+    repository: '<repo>',
+    oauthToken: SecretValue.secretsManager('my-github-token'),
+  }),
+  buildSpec: codebuild.BuildSpec.fromObjectToYaml({
+    version: '1.0',
+    applications: [
+      {
+        appRoot: 'frontend',
+        frontend: {
+          phases: {
+            preBuild: {
+              commands: ['npm install'],
+            },
+            build: {
+              commands: ['npm run build'],
+            },
+          },
+        },
+      },
+      {
+        appRoot: 'backend',
+        backend: {
+          phases: {
+            preBuild: {
+              commands: ['npm install'],
+            },
+            build: {
+              commands: ['npm run build'],
+            },
+          },
+        },
+      },
+    ],
+  }),
+  customResponseHeaders: [
+    {
+      appRoot: 'frontend',
+      pattern: '*.json',
+      headers: {
+        'custom-header-name-1': 'custom-header-value-1',
+        'custom-header-name-2': 'custom-header-value-2',
+      },
+    },
+    {
+      appRoot: 'backend',
+      pattern: '/path/*',
+      headers: {
+        'custom-header-name-1': 'custom-header-value-2',
+      },
+    },
+  ],
+});
+```
+
 ## Configure server side rendering when hosting app
 
 Setting the `platform` field on the Amplify `App` construct can be used to control whether the app will host only static assets or server side rendered assets in addition to static. By default, the value is set to `WEB` (static only), however, server side rendering can be turned on by setting to `WEB_COMPUTE` as follows:

packages/@aws-cdk/aws-amplify-alpha/lib/app.ts

@@ -1,7 +1,7 @@
 import * as codebuild from 'aws-cdk-lib/aws-codebuild';
 import * as iam from 'aws-cdk-lib/aws-iam';
 import { IResource, Lazy, Resource, SecretValue, ValidationError } from 'aws-cdk-lib/core';
-import { Construct } from 'constructs';
+import { Construct, IConstruct } from 'constructs';
 import { CfnApp } from 'aws-cdk-lib/aws-amplify';
 import { BasicAuth } from './basic-auth';
 import { Branch, BranchOptions } from './branch';
@@ -309,7 +309,7 @@ export class App extends Resource implements IApp, iam.IGrantable {
       name: props.appName || this.node.id,
       oauthToken: sourceCodeProviderOptions?.oauthToken?.unsafeUnwrap(), // Safe usage
       repository: sourceCodeProviderOptions?.repository,
-      customHeaders: props.customResponseHeaders ? renderCustomResponseHeaders(props.customResponseHeaders) : undefined,
+      customHeaders: props.customResponseHeaders ? renderCustomResponseHeaders(props.customResponseHeaders, this) : undefined,
       platform: appPlatform,
     });
 
@@ -569,6 +569,12 @@ export class CustomRule {
  * Custom response header of an Amplify App.
  */
 export interface CustomResponseHeader {
+  /**
+   * If the app uses a monorepo structure, the appRoot from the build spec to apply the custom headers to.
+   * @default - The appRoot is omitted in the custom headers output.
+   */
+  readonly appRoot?: string;
+
   /**
    * These custom headers will be applied to all URL file paths that match this pattern.
    */
@@ -580,17 +586,25 @@ export interface CustomResponseHeader {
   readonly headers: { [key: string]: string };
 }
 
-function renderCustomResponseHeaders(customHeaders: CustomResponseHeader[]): string {
-  const yaml = [
-    'customHeaders:',
-  ];
+function renderCustomResponseHeaders(customHeaders: CustomResponseHeader[], scope: IConstruct): string {
+  const hasAppRoot = customHeaders[0].appRoot !== undefined;
+  const yaml = [hasAppRoot ? 'applications:' : 'customHeaders:'];
 
   for (const customHeader of customHeaders) {
-    yaml.push(`  - pattern: "${customHeader.pattern}"`);
-    yaml.push('    headers:');
+    if ((customHeader.appRoot !== undefined) !== hasAppRoot) {
+      throw new ValidationError('appRoot must be either be present or absent across all custom response headers', scope);
+    }
+
+    const baseIndentation = ' '.repeat(hasAppRoot ? 6 : 2);
+    if (hasAppRoot) {
+      yaml.push(`  - appRoot: ${customHeader.appRoot}`);
+      yaml.push('    customHeaders:');
+    }
+    yaml.push(`${baseIndentation}- pattern: "${customHeader.pattern}"`);
+    yaml.push(`${baseIndentation}  headers:`);
     for (const [key, value] of Object.entries(customHeader.headers)) {
-      yaml.push(`      - key: "${key}"`);
-      yaml.push(`        value: "${value}"`);
+      yaml.push(`${baseIndentation}    - key: "${key}"`);
+      yaml.push(`${baseIndentation}      value: "${value}"`);
     }
   }
 

packages/@aws-cdk/aws-amplify-alpha/test/app.test.ts

@@ -444,6 +444,111 @@ test('with custom headers', () => {
   });
 });
 
+test('with custom headers in a monorepo structure', () => {
+  // WHEN
+  new amplify.App(stack, 'App', {
+    sourceCodeProvider: new amplify.GitHubSourceCodeProvider({
+      owner: 'aws',
+      repository: 'aws-cdk',
+      oauthToken: SecretValue.unsafePlainText('secret'),
+    }),
+    buildSpec: codebuild.BuildSpec.fromObjectToYaml({
+      version: '1.0',
+      applications: [
+        {
+          appRoot: 'frontend',
+          frontend: {
+            phases: {
+              preBuild: {
+                commands: ['npm install'],
+              },
+              build: {
+                commands: ['npm run build'],
+              },
+            },
+          },
+        },
+        {
+          appRoot: 'backend',
+          backend: {
+            phases: {
+              preBuild: {
+                commands: ['npm install'],
+              },
+              build: {
+                commands: ['npm run build'],
+              },
+            },
+          },
+        },
+      ],
+    }),
+    customResponseHeaders: [
+      {
+        appRoot: 'frontend',
+        pattern: '*.json',
+        headers: {
+          'custom-header-name-1': 'custom-header-value-1',
+          'custom-header-name-2': 'custom-header-value-2',
+        },
+      },
+      {
+        appRoot: 'backend',
+        pattern: '/path/*',
+        headers: {
+          'custom-header-name-1': 'custom-header-value-2',
+          'x-aws-url-suffix': `this-is-the-suffix-${stack.urlSuffix}`,
+        },
+      },
+    ],
+  });
+
+  // THEN
+  Template.fromStack(stack).hasResourceProperties('AWS::Amplify::App', {
+    CustomHeaders: {
+      'Fn::Join': [
+        '',
+        [
+          'applications:\n  - appRoot: frontend\n    customHeaders:\n      - pattern: "*.json"\n        headers:\n          - key: "custom-header-name-1"\n            value: "custom-header-value-1"\n          - key: "custom-header-name-2"\n            value: "custom-header-value-2"\n  - appRoot: backend\n    customHeaders:\n      - pattern: "/path/*"\n        headers:\n          - key: "custom-header-name-1"\n            value: "custom-header-value-2"\n          - key: "x-aws-url-suffix"\n            value: "this-is-the-suffix-',
+          {
+            Ref: 'AWS::URLSuffix',
+          },
+          '"\n',
+        ],
+      ],
+    },
+  });
+});
+
+test('error with inconsistent appRoot in custom headers', () => {
+  // WHEN
+  expect(() => {
+    new amplify.App(stack, 'App', {
+      sourceCodeProvider: new amplify.GitHubSourceCodeProvider({
+        owner: 'aws',
+        repository: 'aws-cdk',
+        oauthToken: SecretValue.unsafePlainText('secret'),
+      }),
+      customResponseHeaders: [
+        {
+          pattern: '*.json',
+          headers: {
+            'custom-header-name-1': 'custom-header-value-1',
+            'custom-header-name-2': 'custom-header-value-2',
+          },
+        },
+        {
+          appRoot: 'backend',
+          pattern: '/path/*',
+          headers: {
+            'custom-header-name-1': 'custom-header-value-2',
+          },
+        },
+      ],
+    });
+  }).toThrow('appRoot must be either be present or absent across all custom response headers');
+});
+
 test('create a statically hosted app by default', () => {
   // WHEN
   new amplify.App(stack, 'App', {});