webpack and other js resources not found when using a subfolder of a static s3 website to serve public files

[David Dockhorn]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When I run the hello world gatsby project with an added function to call an api it works locally but fails in Amazon's s3 in a subfolder.
I can see the resources that are not being found are there next to the index.html in the bucket.
However, in the url error I see that resources like webpack-runtime-34b58157afa1fc967979.js are not found because they are being looked for in the root of the bucket, not in the subfolder where they are.
build steps

npm install -g gatsby-cli
gatsby new projname
gatsby develop -H 0.0.0.0

gatsby clean
gatsby build --prefix-paths
aws s3 sync public s3://mybucket/reflections --acl public-read;

error

webpack-runtime-34b58157afa1fc967979.js:1 
        
        
       Failed to load resource: the server responded with a status of 404 ()

gatsby-config.js - I have tried with and without pathPrefix and with different siteUrls.

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  
  siteMetadata: {
    title: `reflectionsjs`,
    pathPrefix: `/reflections`,
    siteUrl: `https://mybucket/reflections`,
  },
  plugins: [],
}
module.exports = {
 
}

index.js code snippet with function calling api that works in local dev

const IndexPage = () => {

const [Listing, setListing] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://someapi.com`);
      const json = await response.json();
      setListing(json);
    };

    fetchData();
  }, []);
  
  return (
    <main style={pageStyles}>
      <h1 style={headingStyles}>
        Congratulations
        <br />
        <span style={headingAccentStyles}>— you just made a Gatsby site! </span>
      </h1>
    <div>
      {/* {JSON.stringify(Listing)} */}
      12345
    {Listing.map(item => (
          <li>Name: {item.name}, Text: {item.text} <img src={item.url}></img></li>
        ))}
    </div>  ```

### Reproduction Link

https://github.com/ddtraveller/tarot_cards/tree/gatsby

### Steps to Reproduce

1. add the index.js snippet to the hello world gatsby index.js or exercise code that uses a webpack resource.
2. add the gatsby-config.js as above
3. copy the public folder to an s3 website in a subfolder

...


### Expected Result

Locally, you should see the api call or webpack resources load normally.

### Actual Result

In prod, you will see webpack.js and other resources are called as if they are in the root of the bucket rather than in the subfolder where public was deployed. The index.html and webpack and other resources should all be there together but when called, result in a 404.

### Environment

```shell
Building in Cloud9 in aws on an ubuntu small;

  System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (2) x64 Intel(R) Xeon(R) Platinum 8259CL CPU @ 2.50GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.4.0 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Languages:
    Python: 3.10.12 - /usr/bin/python
  npmPackages:
    gatsby: ^5.13.3 => 5.13.3
  npmGlobalPackages:
    gatsby-cli: 5.13.2

Config Flags

I have experimented with pathPrefix: "/reflections" but whether I put that in or not... it doesn't change the behavior.