Deploying ember-cli app to S3 without breaking URLs

Question

I'm working on a ember-cli app that I am deploying in S3. I would really like to be able to use this 'serverless' approach, as it is extremely simple to configure, and extremely affordable.

I have a problem with URLs. If I hit http://my-bucket.s3-website-us-east-1.amazonaws.com/ it works just fine. But if I try to directly load a page other than the root of the application, such as http://my-bucket.s3-website-us-east-1.amazonaws.com/elephants/5, then it gives a 403, as there is no such resource in S3. (I can navigate to such pages fine through the application, and I can hit them directly in dev mode on my machine, so the ember app is working fine.)

Looking for solutions, I find suggestions to add #! to my path. This seems better, as it doesn't return a 403, but when I hit http://my-bucket.s3-website-us-east-1.amazonaws.com/#!/elephants/5, it simply redirects to http://my-bucket.s3-website-us-east-1.amazonaws.com, losing any specific information that the path contained.

What are my options? Is there a way to use S3 and have working URLs? Do I need a server? Or is there another approach that has eluded me?

Answer 1

There are few problems with the approach of just having a # based redirect. I have listed them below:

1. Mutliple redirects happen as your app's paths are resolved. For example: www.myapp.com/path/for/test gets redirected as www.myapp.com/#/path/for/test
2. There is a flicker in the url bar as the '#' comes and goes due the action of your SPA framework.
3. The seo is impacted because - 'Hey! Its google forcing his hand on redirects'
4. Safari support for your app goes for a toss.

An approach mutated off the Lightening deployment approach advocated with Ember-CLI-Deploy is as follow:

1. Make sure you have the index route configured for your website. Mostly it is index.html
2. Remove routing rules from S3 configurations
3. Put a Cloudfront in front of your S3 bucket.
4. Configure error page rules for your Cloudfront instance. In the error rules specify:
   • Http error code: 404 (and 403 or other errors as per need)
   • Error Caching Minimum TTL (seconds) : 0
   • Customize response: Yes
   • Response Page Path : /index.html
   • HTTP Response Code: 200

5.For SEO needs + making sure your index.html does not cache, do the following:

• Configure an EC2 instance and setup an nginx server.
• Assign a public ip to your EC2 instance.
• Create an ELB that has the EC2 instance you created as an instance
• You should be able to assign the ELB to your DNS.
• Now, configure your nginx server to do the following things: Proxy_pass all requests to your CDN (for index.html only, serve other assets directly from your cloudfront) and for search bots, redirect traffic as stipulated by services like Prerender.io

I can help in more details with respect to nginx setup, just leave a note. Have learnt it the hard way.

Once the cloud front distribution update. Invalidate your cloudfront cache once to be in the pristine mode. Hit the url in the browser and all should be good.