基于CDK部署到CloudFront的AWS应用动态配置方案咨询

针对你遇到的Webpack打包后配置文件无法直接修改的问题，以下是几种无需依赖AWS Config的实用方案，成本低且易实现：

方案1：将配置文件独立托管在S3，前端运行时拉取 #

把配置文件从源码中分离，单独存储在S3桶中，前端应用启动时通过HTTP请求加载配置。后续修改配置只需更新S3中的文件，无需重新打包部署。

实现步骤 #

1. 用CDK创建一个S3桶，用于存储配置文件，配置CloudFront可访问该桶。
2. 部署时将初始配置文件上传到S3。
3. 修改前端代码，在应用初始化前拉取S3中的配置文件。

代码示例（CDK + 前端） #

// CDK：创建配置存储桶并上传初始配置
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';
import * as iam from 'aws-cdk-lib/aws-iam';

const configBucket = new s3.Bucket(this, 'AppConfigBucket', {
  blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
  encryption: s3.BucketEncryption.S3_MANAGED,
});

// 允许CloudFront服务角色访问桶内容
configBucket.grantRead(new iam.ServicePrincipal('cloudfront.amazonaws.com'));

// 上传本地config目录下的config.json到S3
new s3deploy.BucketDeployment(this, 'DeployConfig', {
  sources: [s3deploy.Source.asset('./config')],
  destinationBucket: configBucket,
});

// 前端：启动时拉取配置
async function loadAppConfig() {
  let appConfig = { /* 默认配置 */ };
  try {
    const res = await fetch('https://your-cloudfront-domain/config/config.json');
    appConfig = await res.json();
  } catch (err) {
    console.error('加载配置失败，使用默认值:', err);
  }
  // 初始化应用
  startApp(appConfig);
}

loadAppConfig();

优缺点 #

• ✅ 成本极低（S3存储费用可以忽略不计），修改配置无需重新部署应用
• ❌ 首次加载多一次HTTP请求，需处理加载失败的降级逻辑

方案2：用CloudFront函数注入配置 #

编写CloudFront函数，在返回前端HTML页面时，将配置内容注入到页面的全局变量中。前端直接读取全局变量，无需额外请求。

实现步骤 #

1. 编写CloudFront函数，在VIEWER_RESPONSE阶段修改HTML响应，插入配置脚本。
2. 用CDK将函数关联到CloudFront分发的默认行为。
3. 修改前端代码，读取全局变量中的配置。

代码示例（CDK + CloudFront函数） #

// CDK：创建并关联CloudFront函数
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as origins from 'aws-cdk-lib/aws-cloudfront-origins';

const configInjectFn = new cloudfront.Function(this, 'ConfigInjectFn', {
  code: cloudfront.FunctionCode.fromFile({ filePath: './cf-functions/config-inject.js' }),
});

const distribution = new cloudfront.Distribution(this, 'AppDist', {
  defaultBehavior: {
    origin: new origins.S3Origin(appBucket),
    functionAssociations: [
      {
        function: configInjectFn,
        eventType: cloudfront.FunctionEventType.VIEWER_RESPONSE,
      },
    ],
  },
});

// CloudFront函数代码：config-inject.js
function handler(event) {
  const response = event.response;
  const contentType = response.headers['content-type']?.value;
  
  // 仅处理HTML文件
  if (contentType?.includes('text/html')) {
    // 配置内容（可后续通过更新函数代码修改）
    const appConfig = {
      apiUrl: 'https://api.yourdomain.com',
      featureFlags: { darkMode: true }
    };
    const configScript = `<script>window.APP_CONFIG = ${JSON.stringify(appConfig)};</script>`;
    
    // 将配置脚本插入到HTML的</head>标签前
    const htmlBody = response.body.data.toString('utf-8');
    const modifiedHtml = htmlBody.replace('</head>', `${configScript}</head>`);
    
    response.body.data = modifiedHtml;
    response.headers['content-length'].value = modifiedHtml.length.toString();
  }
  
  return response;
}

优缺点 #

• ✅ 无额外HTTP请求，配置修改后更新函数即可生效
• ❌ CloudFront函数有10KB代码长度限制，复杂配置无法容纳；修改配置需重新部署函数

方案3：用AWS Systems Manager Parameter Store存储配置 #

将配置存在Parameter Store（免费 tier足够满足大多数场景），通过API Gateway + Lambda提供配置获取接口，CloudFront缓存接口响应减少调用次数。

实现步骤 #

1. 用CDK创建Parameter Store参数存储配置。
2. 创建Lambda函数读取Parameter Store中的配置，通过API Gateway暴露接口。
3. 配置CloudFront缓存该API接口的响应。

代码示例（CDK + Lambda） #

// CDK：创建Parameter Store、Lambda和API Gateway
import * as ssm from 'aws-cdk-lib/aws-ssm';
import * as lambda from 'aws-cdk-lib/aws-lambda';
import * as apigateway from 'aws-cdk-lib/aws-apigateway';

// 创建参数存储配置
const appConfigParam = new ssm.StringParameter(this, 'AppConfigParam', {
  parameterName: '/my-app/config',
  stringValue: JSON.stringify({ apiUrl: 'https://api.yourdomain.com' }),
  tier: ssm.ParameterTier.STANDARD, // 免费 tier
});

// 创建Lambda读取配置
const configLambda = new lambda.Function(this, 'ConfigLambda', {
  runtime: lambda.Runtime.NODEJS_18_X,
  handler: 'index.handler',
  code: lambda.Code.fromAsset('./lambda'),
  environment: {
    CONFIG_PARAM_NAME: appConfigParam.parameterName,
  },
});
appConfigParam.grantRead(configLambda);

// 创建API Gateway接口
const configApi = new apigateway.RestApi(this, 'ConfigApi', {
  deployOptions: { stageName: 'prod' },
});
configApi.root.addMethod('GET', new apigateway.LambdaIntegration(configLambda));

// CloudFront配置缓存API响应
const distribution = new cloudfront.Distribution(this, 'AppDist', {
  defaultBehavior: { origin: new origins.S3Origin(appBucket) },
  additionalBehaviors: {
    '/api/config': {
      origin: new origins.RestApiOrigin(configApi),
      cachePolicy: cloudfront.CachePolicy.CACHING_OPTIMIZED,
    },
  },
});

// Lambda代码：index.js
const AWS = require('aws-sdk');
const ssm = new AWS.SSM();

exports.handler = async () => {
  const paramName = process.env.CONFIG_PARAM_NAME;
  const param = await ssm.getParameter({ Name: paramName }).promise();
  const config = JSON.parse(param.Parameter.Value);
  
  return {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'max-age=3600', // 缓存1小时
    },
    body: JSON.stringify(config),
  };
};

优缺点 #

• ✅ 配置支持版本控制、权限管理，适合复杂配置场景
• ❌ 存在Lambda和API Gateway的少量费用，但远低于AWS Config；缓存策略需合理配置避免过时

方案4：Webpack编译时注入基础配置 + 外部覆盖 #

通过Webpack的DefinePlugin注入编译时基础配置，同时预留外部配置加载逻辑，允许部署后通过外部文件覆盖基础配置。

实现步骤 #

1. 修改Webpack配置，用DefinePlugin注入编译时环境变量作为基础配置。
2. 前端代码合并基础配置和外部加载的覆盖配置。
3. 将外部覆盖配置文件部署到S3，后续可单独修改该文件。

代码示例（Webpack + 前端） #

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.BASE_CONFIG': JSON.stringify({
        appName: process.env.APP_NAME || 'My App',
        defaultTheme: 'light',
      }),
    }),
  ],
};

// 前端：合并基础配置和外部覆盖配置
async function initConfig() {
  let overrideConfig = {};
  try {
    const res = await fetch('/config/override.json');
    overrideConfig = await res.json();
  } catch (err) {
    console.warn('未找到外部覆盖配置，使用基础配置');
  }
  window.APP_CONFIG = { ...process.env.BASE_CONFIG, ...overrideConfig };
  startApp(window.APP_CONFIG);
}

initConfig();

优缺点 #

• ✅ 兼顾编译时优化和动态修改能力，基础配置无需额外请求
• ❌ 需要修改Webpack配置和前端代码逻辑

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