部署时如何编写动态CDK配置？解决前后端URL互依赖难题

问题场景 #

你的CDK应用包含两个相互依赖的栈：

• 后端栈：负责创建API Gateway及带Google联邦认证的Cognito用户池，需要前端URL配置UserPoolClient的回调地址
• 前端栈：通过ApplicationLoadBalancedFargateService部署Docker化的NextJS应用，需要后端API URL注入环境变量

生产环境可通过自定义域名提前确定URL，但staging/开发环境依赖AWS自动生成的临时URL，陷入双向依赖死循环。

最佳实现方案 #

方案1：SSM参数中转+分阶段部署（推荐） #

利用AWS Systems Manager Parameter Store作为URL的中转存储，分三步完成部署，完全通过CDK原生能力实现自动化：

1. 首次部署后端栈：先创建核心资源（API Gateway、UserPool），将API URL存入SSM参数，同时给UserPoolClient设置临时回调URL（如https://placeholder.com）
2. 部署前端栈：从SSM读取已生成的API URL，注入NextJS环境变量；部署完成后，将前端ALB的URL存入另一个SSM参数
3. 更新后端栈：从SSM读取前端URL，更新UserPoolClient的回调配置

代码示例（TypeScript）

后端栈首次部署代码：

import * as cdk from 'aws-cdk-lib';
import * as apigateway from 'aws-cdk-lib/aws-apigateway';
import * as cognito from 'aws-cdk-lib/aws-cognito';
import * as ssm from 'aws-cdk-lib/aws-ssm';

export class BackendStack extends cdk.Stack {
  constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // 创建API Gateway
    const api = new apigateway.RestApi(this, 'BackendApi', {
      restApiName: 'Backend Service API'
    });
    // 输出API URL并存入SSM
    new cdk.CfnOutput(this, 'ApiUrl', { value: api.url });
    new ssm.StringParameter(this, 'ApiUrlParam', {
      parameterName: `/${this.stackName}/api/gateway-url`,
      stringValue: api.url
    });

    // 创建Cognito用户池及客户端（临时回调URL）
    const userPool = new cognito.UserPool(this, 'UserPool', {
      selfSignUpEnabled: true,
      // 其他配置...
    });
    new cognito.UserPoolClient(this, 'UserPoolClient', {
      userPool,
      callbackUrls: ['https://placeholder.com'],
      logoutUrls: ['https://placeholder.com'],
      // 其他配置...
    });
  }
}

前端栈部署代码：

import * as cdk from 'aws-cdk-lib';
import * as ecsPatterns from 'aws-cdk-lib/aws-ecs-patterns';
import * as ssm from 'aws-cdk-lib/aws-ssm';

export class FrontendStack extends cdk.Stack {
  constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // 从SSM读取后端API URL
    const apiUrl = ssm.StringParameter.valueForStringParameter(
      this,
      '/BackendStack/api/gateway-url'
    );

    // 部署Fargate服务，注入API URL环境变量
    const frontendService = new ecsPatterns.ApplicationLoadBalancedFargateService(
      this,
      'FrontendService',
      {
        cluster: new ecs.Cluster(this, 'FrontendCluster'),
        taskImageOptions: {
          image: ecs.ContainerImage.fromRegistry('your-nextjs-docker-image'),
          environment: {
            NEXT_PUBLIC_API_URL: apiUrl
          }
        },
        // 其他配置...
      }
    );

    // 输出前端URL并存入SSM
    new cdk.CfnOutput(this, 'FrontendUrl', {
      value: frontendService.loadBalancer.loadBalancerDnsName
    });
    new ssm.StringParameter(this, 'FrontendUrlParam', {
      parameterName: `/${this.stackName}/frontend/url`,
      stringValue: frontendService.loadBalancer.loadBalancerDnsName
    });
  }
}

后端栈更新代码（修改UserPoolClient配置）：

// 更新后的UserPoolClient配置
const frontendUrl = ssm.StringParameter.valueForStringParameter(
  this,
  '/FrontendStack/frontend/url'
);
new cognito.UserPoolClient(this, 'UserPoolClient', {
  userPool,
  callbackUrls: [frontendUrl],
  logoutUrls: [frontendUrl],
  // 其他配置...
});

方案2：开发环境快速方案（手动传递上下文参数） #

适合本地开发快速迭代，无需SSM中转：

1. 手动部署后端栈，记录输出的API URL
2. 通过CDK上下文参数传入前端栈部署命令：

   cdk deploy FrontendStack -c api-url=https://xxx.execute-api.us-east-1.amazonaws.com
   

3. 前端栈部署完成后，记录ALB URL，再传入后端栈更新：

   cdk deploy BackendStack -c frontend-url=https://xxx-xxxxxx.us-east-1.elb.amazonaws.com
   

对你提出方案的评价 #

你考虑的「先部署前端获取URL，再传入后端栈作为callbackUrl，之后通过AppConfig指定API URL供NextJS读取」方案是可行的，但有两处优化点：

• 用SSM代替AppConfig更轻量：AppConfig主打动态配置更新和版本管理，而此处仅需静态URL注入，SSM成本更低、操作更简单
• 调整部署顺序更合理：应先部署后端栈（API Gateway是前端依赖的核心服务），前端栈依赖API URL才能正常启动；后端的UserPoolClient回调URL可先占位，后续更新不影响核心API服务可用性

内容的提问来源于stack exchange，提问作者Armen Babakanian