'NoSuchKey' code on CloudFront for Angular app

Question

I created an Angular app and upload it on a bucket S3. Then I deployed a CloudFront to access my website, but when I want to reach a route of my website (like the /login one) I have the error 'NoSuchKey' :

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
    <Code>NoSuchKey</Code>
    <Message>The specified key does not exist.</Message>
    <Key>login</Key>
    <RequestId>2F89DD7BB599262C</RequestId>
    <HostId>
        xAEaJF0CRv9Ec9iKtHJ0i+nS8U4nqGCOFHL0vyOEim5MgQiNPqeQNIsxXdTYJdT+MlaYt6l6YJE=
    </HostId>
</Error>

Here is my settings for the Bucket S3 : Properties AND Policies

And here is my settings for the CloudFront : CloudFront settings

I understand that this error is due to the fact that '/login' route doesn't exist in my bucket, but I don't understand how can I say to my CloudFront "Use this bucket as website not as bucket or something like this".

Do you guys have any idea of how can I solve this ?

Ask me if any details or more information is needed.

Thanks, Jb

F_SO_K F_SO_K · Accepted Answer · 2020-04-14T12:51:20

Go to CloudFront -> Error Pages -> Create Custom Error Response

In HTTP error code choose 404. Check the 'Customize Error Response' radio button. In Response Page Path enter your default route (e.g. /index.html). In HTTP Response code choose 200. Wait for CloudFront to update, this can take a few minutes.

'NoSuchKey' code on CloudFront for Angular app

1 Answers