CODEWITHSUNDEEP
angularamazon-s3amazon-cloudfront
Andy
Andy

Reputation: 205

Angular Routes not working with cloudfront + s3

Currently only the default route on app start loads for my app in cloudfront. It works when I go to root of site using cloudfront.[address].net I'm also using WAF to limit it to only my IP address, but when I go to cloudfront.[address].net/signup or /login then I get

enter image description here

How can I get the child routes to work too? I have my bucket policy

Bucket Policy

{
 "Version": "2008-10-17",
 "Statement": [
     {
         "Sid": "3",
         "Effect": "Allow",
         "Principal": {
             "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E2SRF18SRG0FC7"
         },
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::[bucket]/*"
     }
 ]
}

I'm blocking all public access, but I'm also using cloudfront with an OAI so I don't think I need to worry about it being blocked since it's going through cloudfront.

enter image description here

I appreciate any help!

Upvotes: 3

Views: 2208

Answers (1)

Arun Kamalanathan
Arun Kamalanathan

Reputation: 8593

You need to set the cloudfront distribution's error document to your entry document(index.html)

Please ensure you have the following steps covered.

  1. S3 bucket policy to allow only Cloudfront to do a GetObject
  2. Cloudfront distribution's custom error response is set to /index.html for HTTP 404 and 403 error codes
  3. Cloudfront distribution is in deployed state, because cloudfront may take longer and we could easily make an observational error

Hope this helps.

Upvotes: 6

Related Questions