如何通过Terraform自动更新JavaScript文件中的Lambda Function URL

核心思路 #

通过Terraform的模板渲染功能，将Lambda生成的Function URL动态注入到JS文件中，再自动上传至S3，无需手动修改硬编码内容。

步骤1：准备JS模板文件 #

将原JS文件重命名为模板文件（例如counter.js.tmpl），把硬编码的XXX替换为Terraform可识别的占位符：

const counter = document.querySelector(".counter-number"); 
async function updateCounter() {
    let response = await fetch("${lambda_function_url}");
    let data = await response.json();
    counter.innerHTML = `Website View Count: ${data}`;
} 
updateCounter();

步骤2：Terraform配置动态渲染与上传 #

根据你的部署习惯，选择以下两种方案之一：

方案一：直接渲染并上传S3（无本地文件生成）

单独处理JS文件，其他静态文件保持原有批量上传逻辑：

# 批量上传除JS模板外的静态文件
resource "aws_s3_object" "website_static_contents" {
  for_each     = fileset("/Users/andrea/Documents/AWS/CRC/my_website", "**")
  count        = contains(each.value, ".js.tmpl") ? 0 : 1
  bucket       = data.aws_s3_bucket.main_bucket.id
  key          = each.key
  source       = "/Users/andrea/Documents/AWS/CRC/my_website/${each.value}"
  content_type = each.value
  etag         = filemd5("/Users/andrea/Documents/AWS/CRC/my_website/${each.value}")
}

# 渲染JS模板并上传到S3
resource "aws_s3_object" "counter_js" {
  bucket       = data.aws_s3_bucket.main_bucket.id
  key          = "counter.js" # 替换为你的JS文件实际路径
  content      = templatefile("/Users/andrea/Documents/AWS/CRC/my_website/counter.js.tmpl", {
    lambda_function_url = aws_lambda_function_url.my_lambda.function_url
  })
  content_type = "application/javascript"
  # 用渲染后的内容MD5作为ETag，确保内容变更时自动更新S3对象
  etag         = md5(templatefile("/Users/andrea/Documents/AWS/CRC/my_website/counter.js.tmpl", {
    lambda_function_url = aws_lambda_function_url.my_lambda.function_url
  }))
}

方案二：先生成本地JS文件再上传（便于本地调试）

先在本地生成替换后的JS文件，再批量上传所有内容：

# 生成替换后的JS文件到本地目录
resource "local_file" "counter_js" {
  filename = "/Users/andrea/Documents/AWS/CRC/my_website/counter.js"
  content  = templatefile("/Users/andrea/Documents/AWS/CRC/my_website/counter.js.tmpl", {
    lambda_function_url = aws_lambda_function_url.my_lambda.function_url
  })
}

# 批量上传所有网站文件（含生成的JS）
resource "aws_s3_object" "website_contents" {
  for_each     = fileset("/Users/andrea/Documents/AWS/CRC/my_website", "**")
  bucket       = data.aws_s3_bucket.main_bucket.id
  key          = each.key
  source       = "/Users/andrea/Documents/AWS/CRC/my_website/${each.value}"
  content_type = each.value
  etag         = filemd5("/Users/andrea/Documents/AWS/CRC/my_website/${each.value}")
  # 确保JS文件生成后再执行上传
  depends_on = [local_file.counter_js]
}

关键注意事项 #

• 确保Terraform能正确引用Lambda Function URL：如果你的Lambda Function URL是通过aws_lambda_function_url资源创建的，直接用aws_lambda_function_url.my_lambda.function_url即可；若用其他方式创建，调整对应的属性引用。
• 若使用方案二，建议将生成的counter.js加入.gitignore，避免版本控制冲突。
• content_type需设置为application/javascript，确保浏览器正确解析JS文件。

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