0

I am trying to deploy an Angular app, which is essentially a web-site client that makes API calls to a backend server and then display the data.

I tried using S3 static hosting for hosting this site by uploading the production build dist folder generated by ng build --prod.

The S3 static hosting seems to work fine with all the functionalities even though the Angular app seems to be a dynamic site. I was aware that Angular build can transpile the app to static assets.

However, I run into problems when I try to add AWS Cloudfront on top of the S3 static hosting. In particular, when accessing the site via Cloudfront, the site is unable to display data fetched from the backend server.

Any reasons or solution to why the Cloudfront is acting differently than the S3? I think that Cloudfront and S3 are not designed to host dynamic site, but I am wondering why is it that the S3 static hosting by itself seems to work just fine.

Marcin
  • 215,873
  • 14
  • 235
  • 294
  • Do you observer any errors in the browser? Maybe something with CORS? – Marcin May 25 '20 at 05:14
  • @Marcin Yes, there are error responses returned from the API call to the backend server, but I don't know why that would happen only for Cloudfront but not on S3. I made sure that my backend server has CORS enabled for all sources. –  May 25 '20 at 05:20
  • There are some aws resources or other questions about cors and cloudfront. For example, [here](https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/) or [here](https://stackoverflow.com/questions/12358173/correct-s3-cloudfront-cors-configuration). Have you checked them? – Marcin May 25 '20 at 05:38
  • @Marcin The problem I found is that Cloudfront is forcing HTTPS connection but the data is fetched via a HTTP connection to the backend so the data are blocked. Now the question becomes how can I force a HTTPS connection to my backend server, which is a NodeJS express app deployed on elastic beanstalk. –  May 25 '20 at 06:01
  • You don't have to use https at the backed if you don't want. https is mostly important between client->CF, not CF->backend. – Marcin May 25 '20 at 06:04

0 Answers0