在AWS S3/CloudFront托管的React(Vite)应用中访问部署时生成的config.json

核心问题分析 #

你当前使用的import * as config from "./config.json"属于构建时加载逻辑，但config.json是CDK部署阶段才生成的文件，构建阶段该文件并不存在，因此必须改用运行时fetch方式获取。同时需要确保文件路径、CloudFront配置、S3权限均配置正确。

具体解决步骤 #

1. 确保config.json放置在正确的S3路径 #

将CDK生成的config.json上传至S3存储桶的根目录，与React打包后的index.html保持同层级（即S3对象键为config.json，而非build/config.json或其他子目录）。

2. 修改React应用的运行时加载逻辑 #

替换原有的import方式，使用fetch在应用启动时动态加载配置：

// App.tsx
import { useEffect, useState } from 'react';

function App() {
  const [appConfig, setAppConfig] = useState(null);

  useEffect(() => {
    // 直接请求CloudFront域名下的config.json
    fetch('/config.json')
      .then(response => {
        if (!response.ok) throw new Error('配置文件未找到');
        return response.json();
      })
      .then(configData => setAppConfig(configData))
      .catch(error => console.error('加载配置失败:', error));
  }, []);

  if (!appConfig) {
    return <div>加载配置中...</div>;
  }

  // 使用配置内容
  return (
    <div className="App">
      <p>配置URL: {appConfig.url}</p>
      {/* 其他业务逻辑 */}
    </div>
  );
}

export default App;

3. 检查CloudFront配置 #

• 路径重写规则：若你的CloudFront分发配置了SPA路由（比如将所有404请求重定向到index.html），需为/config.json单独添加一条行为规则，禁止该路径被重定向，确保能直接访问文件。
• 缓存失效操作：如果之前访问过不存在的config.json，CloudFront可能缓存了404响应，需手动触发缓存失效：进入CloudFront控制台的目标分发，在"Invalidations"标签页创建失效请求，路径填写/config.json。
• 源关联验证：确认CloudFront的源已正确关联目标S3桶和OAI，确保OAI的访问权限策略生效（你已配置的S3资源策略逻辑正确，可通过直接访问文件验证）。

4. 验证文件可访问性 #

直接通过CloudFront域名访问https://<你的CloudFront域名>/config.json：

• 若能正常返回JSON内容，说明路径和权限配置无误；
• 若返回403/404，需检查：
  • S3中config.json的对象键是否正确；
  • S3资源策略是否允许OAI执行s3:GetObject操作；
  • CloudFront的源是否正确指向目标S3桶。

5. 适配子路径部署场景（可选） #

若应用部署在CloudFront的子路径下（比如https://example.com/my-app/），需先在Vite配置中设置基准路径：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/my-app/' // 匹配你的子路径
});

再修改fetch路径以适配基准路径：

fetch(`${import.meta.env.BASE_URL}config.json`)

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