0

I'm trying to host a static react website on an AWS S3 bucket with CloudFront as a front-end.

Additionally the front-end uses an API which runs as a service on a seperate server with a connected domain.

However, when I go to my static s3 website to test it out, I can see in the developer console that all API calls from the bucket to the API are rewritten with the buckets own URL so it's using it own URL instead of the API's URL.

The API url is defined in the environment variables so my first thought was the environment variables are not defined during build. I printed the output of all the environment variables doing the build and they're all correct.

I was looking at a stackoverflow post (react router doesn't work in aws s3 bucket) but unfortunately it didn't help.

Any help or advice would be greatly appreciated.

EDIT My static website hosting settings:

enter image description here

Jacob
  • 45
  • 5

1 Answers1

1

Have you enabled static website hosting on your S3 bucket?

https://docs.aws.amazon.com/AmazonS3/latest/userguide/EnableWebsiteHosting.html

Might be the redirection rules in your properties for your static website hosting, you can try the following:

[
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "404"
        },
        "Redirect": {
            "HostName": "<your_website_url>",
            "HttpRedirectCode": "307",
            "Protocol": "https",
            "ReplaceKeyPrefixWith": "#!"
        }
    }
]
jrchew
  • 205
  • 2
  • 9
  • Yes, I've updated the post with my config. – Jacob May 07 '21 at 10:31
  • Noticed your redirection rule is blank, maybe you can try mine? I edited my answer, hope it helps! :D – jrchew May 07 '21 at 10:37
  • Thank you for your answer but unfortunately it didn't work. It replaces the whole URL when it hits a 404 which means it deletes the endpoints for the API. It seems as if S3 is default rewriting external URLs to own URL. – Jacob May 07 '21 at 10:49
  • 1
    I got it working. I removed the "ReplaceKeyPrefixWith" value and now it works. Thank you! – Jacob May 07 '21 at 10:51
  • 1
    Good job! Always happy to help :) All the best with your work – jrchew May 07 '21 at 10:53