1

I have a static website hosted on s3.

static hosted link generated by aws (Not using this):

http://example-s3.s3-website.{region}.amazonaws.com

actual resource path:

https://example-s3.s3.{region}.amazonaws.com/index.html

enter image description here

And using api-gateway HTTP proxy integration, I've set the following integration:

www.example.com/test/{proxy+} -> https://example-s3.s3.{region}.amazonaws.com/{proxy}

So, www.example.com/test would point to index.html (default page)

From the CRA documentation section "Serving the Same Build from Different Paths":

I've set

"homepage": ".",

such that the website uses www.example.com/test, aka https://example-s3.s3.{region}.amazonaws.com/ as the root directory (relative to index.html as indicated by the document)

However, this fails to fetch any css, or js.

If i look at the console, it gets 404 because it is trying to get the resources from www.example.com/ not www.example.com/test.

So the above package.json configuration is not working for some reason.

I have changed the config to hard-code the url:

"homepage": "www.example.com/test",

Now it can fetch all the resources fine.

My question is though, why doesn't "homepage": ".", setting work?! This setting and "homepage": "www.example.com/test", should be identical as index.html is served at www.example.com/test (aka https://example-s3.s3.{region}.amazonaws.com/index.html)

But CRA for some reason thinks "homepage": ".", is infact "homepage": "www.example.com",

zcahfg2
  • 861
  • 1
  • 12
  • 27

1 Answers1

1

I think the issue lies in your trailing slash Relative URLs and trailing slashes

This should works fine, I create one configuration just the same with you. With trailing slash, it works. It won't work without

https://xswprgicvd.execute-api.ap-southeast-1.amazonaws.com/app/

enter image description here

enter image description here enter image description here

Edit: Added images added by qkhanhpro in the comment section.

zcahfg2
  • 861
  • 1
  • 12
  • 27
qkhanhpro
  • 4,371
  • 2
  • 33
  • 45
  • I am getting access denied error with the trailing slash and fine without the trailing slash. How are you loading css, image files on S3 with the trailing slash? for an instance: `https://example.s3.ap-northeast-2.amazonaws.com/file.png` loads fine `https://example.s3.ap-northeast-2.amazonaws.com/file.png/` will always yield access error. – zcahfg2 Jul 05 '21 at 04:04
  • Note that AWS apig does not support trailing slash officially and proxy is just a workaournd: https://forums.aws.amazon.com/thread.jspa?threadID=242423. I'd expect the relative URL to work fine without the trailing slash - espeically if the documentation says it uses the path relative to index.html... Though workaround doesn't work for me neither due to the access error. – zcahfg2 Jul 05 '21 at 04:07
  • Confirmed that https://example.com/test/index.html works but not https://example.com/test. So I can't use default page if I use '"homepage": "."' ... – zcahfg2 Jul 05 '21 at 04:13
  • I updated the example with the image so that you can see how images react : ) – qkhanhpro Jul 05 '21 at 04:16
  • your `/app/{proxy+}` integration is set to `https://example.s3.{region}.amazonaws.com/{proxy}` right? how are you avoiding the access error? I have the same img path as yours. – zcahfg2 Jul 05 '21 at 04:38
  • 1
    I am not on the PC now. Can send you my config as image in 1 hour or so – qkhanhpro Jul 05 '21 at 04:42
  • Thanks, it's hard to see why your settings work when `https://example.s3.ap-northeast-2.amazonaws.com/file.png/` trailing slash is also passed. Perhaps its to do with "Error document setting - index.html" setting? That's the only difference I have with you. By the way it would probably the best if the image is pasted inside the stackoverflow solution, not imgur, as the image can be deleted later. I tried editing your answer to add the pictures but SO says the edit queue is full.. Many thanks again. – zcahfg2 Jul 05 '21 at 17:13