Gatsby部署到S3子目录后无法加载Webpack等JS资源问题

核心问题分析 #

你的gatsby-config.js存在重复导出配置的问题，同时pathPrefix被错误放置在siteMetadata子属性中，导致Gatsby无法正确识别路径前缀，最终资源请求指向存储桶根目录而非子目录。

解决方案步骤 #

1. 修复gatsby-config.js配置

删除重复的module.exports，并将pathPrefix移至Gatsby顶级配置项：

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  siteMetadata: {
    title: `reflectionsjs`,
    siteUrl: `https://tarot.clearlightdoor.com/reflections`,
  },
  pathPrefix: `/reflections`, // 正确位置：顶级配置项
  plugins: [],
}

2. 重新构建项目

执行带路径前缀的构建命令：

gatsby build --prefix-paths

3. 正确部署到S3

将构建生成的public目录下所有文件完整上传到S3存储桶的reflections子目录中。

4. 验证S3配置（若启用静态网站托管）

• 确保S3静态网站托管的索引文档设置为index.html，错误文档设置为404.html
• 访问站点时使用完整子目录路径：https://tarot.clearlightdoor.com/reflections，检查浏览器控制台中资源请求路径是否包含/reflections/前缀

额外注意事项 #

• 避免硬编码静态资源路径，优先使用Gatsby提供的useStaticQuery、gatsby-source-filesystem等工具管理资源
• 你的index.js中API请求使用绝对路径，无需修改，可正常工作

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