-1

I developed Frontend (ReactJs) and Backend (Spring boot) for my project. I got following issues when deploying FE to S3 bucket.

I set up CodePipeline to:

  • pull the code from repository
  • build step, in here I also set up environment variables which are needed
  • and deploy, extract the code to S3 bucket.

(Then Cloudfront and Route 53 for domain routing, but I don't think that's important.)

When I visit my site (you can try salesforce.martinmachava.link) fist time (sometimes) it works fine. But then OAuth via Salesforce is not working, there was a bug that I fixed, but those changes do not seem to be reflected on S3. I deleted all files in S3 bucket, hit redeploy button in CodePipeline. Besides the bug still present, I sometimes get these errors:

  • Uncaught SyntaxError: Unexpected token '<' that comes from the first line o main file "<!doctype html><html..."
  • and Uncaught Error: Properties [client_id, client_secret] are undefined that comes from my method to ensure all Environment Properties are set. Which doesn't make any sense, it should be set up in build step. And yes, in initial deploy I was missing those env properties but I added them to the build step additionally.

It's like some files are cached, but I didn't find any files-caching settings in S3. It's really strange, I got these multiple issues and the whole AWS services are too chaotic and messy to find the real issue. Any help or suggestions?

Vergil333
  • 505
  • 1
  • 7
  • 14
  • WHere is you back end - the Spring BOOT part deployed. Are you sure the Restful endpoints are working – smac2020 Apr 07 '22 at 10:13
  • 1
    Web browsers and CDNs (like CloudFront) cache files. Could this be your issue? While It's not necessarily trivial to do, it's not helpful to blame AWS for your failure to diagnose the situation. Rather you should explain what diagnosis you have attempted. Did you verify that the new assets were indeed deployed to S3? Did you invalidate the CloudFront cache? What cache/CDN headers does your client see in the HTTP response? – jarmod Apr 07 '22 at 10:40
  • @smac2020 backend is not deployed yet. Backend is used only to generate gist and is not needed for UI to work. – Vergil333 Apr 07 '22 at 10:50
  • @jarmod You are right about CloudFront cache, when I disabled it, it works. Thank you but the blame on AWS stays from my side :) Setting things up is really complicated, documentation is too abstract, often I have to look for tutorials from other people to understand the functionality in more complex solutions and even CloudFront has this issue with subpages not resolved when redirected to them directly but we have to apply workaround for 403 code. But that's not the point, right now. Thank you for the right hint to the solution. – Vergil333 Apr 07 '22 at 10:59
  • Glad it helped. Do you have a reference to the 403 issue you mentioned for subpages? – jarmod Apr 07 '22 at 11:36
  • @jarmod sure, I used this "solution" https://stackoverflow.com/questions/50299204/receive-accessdenied-when-trying-to-access-a-reload-or-refresh-or-one-in-new-tab/50302276#50302276 – Vergil333 Apr 07 '22 at 13:39
  • 1
    That answer seems to be a copy of a poorly-worded blog post that doesn't really explain why. It's because of the index hash bang routing behavior of Angular, React, and other SPAs. A better discussion is [here](https://stackoverflow.com/questions/16267339/s3-static-website-hosting-route-all-paths-to-index-html). This is standard behavior for SPAs on CloudFront/S3. – jarmod Apr 07 '22 at 13:51

1 Answers1

1

It looks you are using CloudFront to deliver the assets served from your origin (S3). CloudFront is a CDN and it caches content at its edge locations.

The solution may be as simple as invalidating your CloudFront distribution.

jarmod
  • 71,565
  • 16
  • 115
  • 122
  • Thanks again. So each time I update some files in S3, I need to invalidate files at edge locations. To do it automatically, I can create Lambda function for this purpose and add it at the end of pipelines. Disabling CloudFront cache seems like much easier solution, but I bet there are downsides. – Vergil333 Apr 07 '22 at 15:03
  • 1
    It's not uncommon for web application bundlers to use unique-named assets for frequently-changing content such as JavaScript and CSS content. For example webpack's [contenthash](https://webpack.js.org/guides/caching/). – jarmod Apr 07 '22 at 15:42