Routing to Angular components when app is static content hosted in S3

user_6331436 0
Viewed 16888

I am currently developing an application with an Angular4 frontend. My goal for production is to have the frontend be served as static content from an AWS S3 bucket.

Everything is working with one exception which is actually a major problem for the application. When users register, they are sent an email with a link to verify their email addresses. The format of the link is as follows:

https://myhostname.com/user/userguid?token=tokenvalue

As the frontend is served as static content, only the page index.html actually exists, so clicking this link generates a 404.

Now, after some research, I have taken the following steps. In S3, I have the following routing rule.

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>myhostname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

I also have a CloudFront rule that redirects all 404 errors to index.html.

Now, when someone navigates to myhostname.com/user/userguid?token=tokenvalue, the URL is re-written to myhostname.com/#!/user/userguid?token=tokenvalue, but then the user is redirected to myhostname.com/home (aka index.html).

What change(s) can I make to my Angular app to take the value of the hash/fragment and actually route to that component (rather that just redirecting, which will send the user back to index.html)?

Note that in development when the frontend is being served via 'npm start', this works just fine. Thanks all.

angular amazon-s3
5 Answers

Zack, the approach that you've chosen (both the Index document and Error document should be 'index.html') is really bad approach unfortunately.

What will happen is that your users will get a 404 and then redirect - this will hurt your SEO, Chrome will penalise you as it thinks your site is phishing, and Safari support is hit and miss.

Much better option is to:

  1. Remove the error page redirection to index.html,
  2. Put Cloudfront in front of the S3 bucket
  3. Set a custom error response code in cloud front which redirects to /index.html and (MOST IMPORTANTLY!) gives a 200 Http Response Code

enter image description here

Hope that helps

user_7994410

All i had to do was set the error document to index.html in my static website hosting block in the console

enter image description here

user_76192300

You need to create CloudFront Custom Error Response settings for BOTH 404 and 403 errors.

I have a full blog post on this plus other AWS angular setup tips (like free HTTPS).

user_5634200
Related