如何配置CloudFront移除自定义域名URL中的Stage标识以解决静态资源404问题

我之前处理过类似的Zappa部署后CloudFront自定义域名的路径问题，你的核心需求是让dev.mywebsite.com直接映射到API Gateway的/dev阶段，同时确保静态资源路径正确匹配。下面是分步解决方案：

1. 调整CloudFront源路径与行为配置 #

首先，我们要让CloudFront把所有请求（不管是根路径还是静态资源路径）正确转发到API Gateway的/dev阶段，避免路径重复：

• 清空CloudFront的源路径（Origin Path）：
  进入你的CloudFront分发的“源”标签页，找到对应的API Gateway源，把源路径字段的/dev删除，留空。如果这里填了/dev，CloudFront会自动给每个请求的路径前缀加上/dev，导致dev.mywebsite.com/dev/static/...被转发到/dev/dev/static/...，这就是404的核心原因。

• 添加路径转发的CloudFront行为：
  转到“行为”标签页，创建一个新的行为（或修改默认行为）：

  • 路径模式：/*
  • 源：选择你的API Gateway源
  • 缓存键和源请求：选择“修改请求 - 包括以下内容”，然后添加一个请求路径修改规则：
    • 类型：替换路径
    • 源路径：/*
    • 目标路径：/dev/$1
      这个规则会把所有到dev.mywebsite.com的请求，比如dev.mywebsite.com/static/css/style.css或dev.mywebsite.com/，转发到API Gateway的/dev/static/css/style.css和/dev/，完全匹配API的有效路径。

• （可选）添加兼容旧路径的行为：
  如果你的页面里已经有大量/dev/static/...的链接，还可以添加一个额外的行为来兼容：

  • 路径模式：/dev/*
  • 源：同样选择API Gateway源
  • 请求路径修改规则：
    • 类型：替换路径
    • 源路径：/dev/*
    • 目标路径：/dev/$1
      这样dev.mywebsite.com/dev/static/...也会被正确转发到/dev/static/...，避免旧链接出现404。

2. 修正Flask的静态资源URL生成 #

为了从根源上解决页面里的静态资源路径问题，让Flask生成不带/dev前缀的URL，你需要在Flask应用中设置APPLICATION_ROOT：

from flask import Flask

app = Flask(__name__)
# 告诉Flask应用的根路径对应API Gateway的/dev阶段
app.config['APPLICATION_ROOT'] = '/dev'

# 如果使用蓝图，确保蓝图的静态资源路径设置正确
# 例如：
# from flask import Blueprint
# bp = Blueprint('main', __name__, static_url_path='/static')

设置APPLICATION_ROOT后，Flask的url_for('static', filename='css/style.css')会生成/static/css/style.css而不是/dev/static/css/style.css，正好匹配CloudFront自定义域名的路径，避免出现dev.mywebsite.com/dev/static/...这种无效路径。

3. 验证配置 #

保存CloudFront配置后，等待分发部署完成（CloudFront的部署通常需要5-15分钟），然后进行测试：

• 访问dev.mywebsite.com，应该和直接访问random_api_ID.execute-api.us-east-2.amazonaws.com/dev效果一致。
• 访问dev.mywebsite.com/static/css/style.css，应该能正常加载静态资源，对应API端点的/dev/static/css/style.css。
• 如果添加了兼容行为，访问dev.mywebsite.com/dev/static/css/style.css也能正常加载。

这个方案既满足了你使用自定义CloudFront分发的需求，又彻底解决了静态资源的路径匹配问题。

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