如何通过AWS CDK获取资源信息创建S3配置文件供静态JS站点加载

核心逻辑 #

静态网站前端无法在构建阶段提前获取CDK动态生成的资源属性（如ARN、访问端点等），因此最优方案是在CDK栈部署阶段直接生成前端可加载的配置文件，和静态资源一起同步到S3桶，完全解耦前端构建和云资源部署流程，保证配置值和当前栈实际资源属性完全一致。

具体实现步骤 #

1. 前端侧预留配置加载逻辑 #

前端代码不硬编码任何云资源参数，单独实现异步配置加载逻辑，等配置加载完成后再初始化应用：

// 前端配置加载示例代码
let appConfig = {};
async function loadAppConfig() {
  // 对应后续CDK部署的配置文件路径
  const configResp = await fetch('/config/app-config.json');
  if (!configResp.ok) throw new Error('应用配置加载失败');
  appConfig = await configResp.json();
}

// 应用初始化前先加载配置
loadAppConfig()
  .then(() => {
    // 此处写应用初始化逻辑，如React/Vue的根组件挂载
    console.log('配置加载完成，参数为', appConfig);
  })
  .catch(err => console.error('应用启动失败', err));

2. CDK侧生成配置并部署到S3 #

在CDK栈代码中拿到所有需要暴露给前端的动态参数后，生成JSON格式的配置文件，通过CDK原生的S3部署能力上传到指定路径，以下是TypeScript版本示例：

import * as cdk from 'aws-cdk-lib';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';
import * as fs from 'fs';
import * as path from 'path';

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

    // 1. 声明你业务需要的其他云资源，示例如下
    const staticBucket = new s3.Bucket(this, 'StaticSiteBucket', {
      websiteIndexDocument: 'index.html',
      publicReadAccess: true,
    });
    // 示例动态参数：动态创建的API网关访问端点
    const apiEndpoint = this.apiGateway.url;
    // 示例动态参数：动态创建的Cognito用户池ID
    const userPoolId = this.userPool.userPoolId;

    // 2. 生成配置文件到本地临时目录
    const configContent = JSON.stringify({
      apiEndpoint,
      userPoolId,
      // 其他需要暴露给前端的参数都可以加在这里
    }, null, 2);
    const tempConfigDir = path.join(__dirname, '.cdk-temp-config');
    if (!fs.existsSync(tempConfigDir)) fs.mkdirSync(tempConfigDir);
    fs.writeFileSync(path.join(tempConfigDir, 'app-config.json'), configContent);

    // 3. 部署配置文件到S3指定路径，单独设置缓存策略避免读取旧配置
    new s3deploy.BucketDeployment(this, 'DeployAppConfig', {
      sources: [s3deploy.Source.asset(tempConfigDir)],
      destinationBucket: staticBucket,
      destinationKeyPrefix: 'config', // 对应前端fetch的/config路径
      cacheControl: [s3deploy.CacheControl.noCache()], // 配置文件不缓存，更新实时生效
    });

    // 4. 单独部署前端静态资源（也可以和配置文件合并为一个部署任务）
    new s3deploy.BucketDeployment(this, 'DeployFrontendAssets', {
      sources: [s3deploy.Source.asset(path.join(__dirname, '../frontend/dist'))],
      destinationBucket: staticBucket,
      cacheControl: [s3deploy.CacheControl.maxAge(cdk.Duration.days(30))], // 静态资源长缓存
    });
  }
}

3. 安全注意事项 #

• 所有写入配置文件的参数都是前端可公开访问的，禁止写入IAM密钥、数据库密码等敏感信息，敏感参数需要通过后端接口鉴权后返回
• 多环境部署时，每个环境的CDK栈会自动生成对应环境的配置文件，不需要修改前端打包逻辑

方案优势 #

• 解耦性强：前端打包产物不绑定任何环境参数，可以在任意环境直接部署
• 一致性高：配置是CDK部署阶段实时生成的，完全匹配当前栈创建的资源属性，不会出现资源更新后配置不同步的问题
• 成本极低：没有额外服务依赖，仅用CDK原生能力实现，维护成本为0

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