Using cloudfront to handle static files and backend - amazon-web-services

I have a single page application (made with angular), which I am serving by pointing cloudfront to an S3 bucket. This is working well.
However, I want to run the backend of my website via the same domain - What I've done is added another origin to my cloudfront distribution which points to elastic beanstalk where the django app is running.
Then, I configured behaviors so that the Path Pattern /apiv1/* is handled by django. This doesn't work and I'm getting a 403 forbidden error when trying to access my endpoints.
The behavior I'm looking for is as follows:
/ should point to index.html and load static files (this currently works)
/apiv1/... should point to django. For example, to access a login endpoint I would have website.come/apiv1/api/login (as a pose to localhost/api/login on my machine).
Is this possible?

If anyone is doing something similar, here is a fix:
Add a subdomain - I added api.example.com which is a subdomain of example.com
Then, in Route 53, I configured api.example.com to point to elb via an alias and requested an ssl certificate for the subdomain! Note, YOU MUST use https when making requests hence the reason for the ssl certificate.
I simply changed the base url in my angular http requests and it works.

Related

AWS Cloudfront URL Mismatch

I got the following setup: Cloudfront in account A and the ALB loadbalancer/webserver in Account B.
Cloudfront got a domain for the user, the loadbalancer a domain and certificate for the connection between cloudfront and loadbalancer / with security header and so on.
The initial website loads fine, but all links and scripts got the url of the loadbalancer. The webserver thinks that the client connects directly via the loadlanacer and adds the url of the loadlabancer to links and scripts etc. How can I tell the webserver that the origil url is the one from cloudfront? Is there a header I can set somewhere? The website is programmed in .net nuke, but Im not the developer of the website...
Thanks and best

Cloudfront domain defaults to HTTP when HTTPS is available

Similarly to other stacks, I have hosted a website using AWS services:
Registered domain on Route 53 (example.net)
Content is hosted on an S3 bucket
Got an SSL certificate using AWS Certificate Manager
Created a CloudFront distribution, pointed it to S3 and connected it to my domain with Route 53.
All of this works except for an issue at what seems to be the final hurdle. When I enter my domain url into the search bar, example.net, the connection isn't secure by default. I've illustrated the problem here.
I'm relatively new to hosting and can't find a solution relating to this. My thoughts are that I'm missing some Cloudfront or Route 53 configuration, since another thing that doesn't work is connecting via www (I don't care about that issue as much). Any input is appreciated.
By default enabling HTTPS on a website doesn't disable HTTP. They are both available, on separate ports. That's why you have to type https:// in the browser's address bar to go directly to the HTTPS version of your website. You can get CloudFront to redirect all HTTP requests to HTTPS by following this guide.

Redirect subdomain to different domain using AWS

I'm currently going through the process of switching our domain, we'll say we're moving from olddomain.com to newdomain.com
We have all of our services hosted on AWS, and I'm having an issue with our www subdomain not properly redirecting to the new domain.
I'm trying to have www.olddomain.com redirect to www.newdomain.com - the strategy that I'm on currently attempting is to use an s3 static site that redirects to the new domain. Since the site/url is https, I'm also needint to put a cloudfront distribution in front.
Starting from the bottom and moving up...
The s3 static site url directly works fine for the redirect.
The cloudfront distribution (pointing properly to the s3 static site) works fine for the redirect, both on http and https.
I have the DNS record for www.olddomain.com pointing at the cloudfront distribution
Going to www.olddomain.com does NOT redirect, but instead tries to render our web application on a broken www.olddomain.com (server is setup to not allow traffic from there anymore).
I've gone through a lot of different options and configuration, but it's very stange/important that the redirect works fine directly on the s3 static site as well as the cloudfront distribution, however it does not work when going to the domain that points to the cloudfront distribution. Please let me know any further details that can be supplied to help look into this issue and I'll be happy to supply them.
The issue for me ended up being that I needed to add the alternate CNAME of www.olddomain.com and the ssl certificate for that domain in the cloudfront settings.

AWS setup: moving single page static application frontend to S3 (from web server)

My current website (single page app with CORS + API) is deployed on AWS EC2 instance and is served via ALB (mostly for easier setup of HTTPS as I only have one region covered now). The web server is configured to serve the single page application but that's all it is doing regarding frontend. I want to move the single page application to S3 instead and so completely separate the backend from the frontend. The question is, what would be the most efficient way to do it with regards to AWS setup? I can come up with the following:
point the domain at the S3 instance to serve frontend files, point API calls to ALB public DNS address
keep the domain pointed at the ELB as it is, route port 80 & 443 to S3, change API port and route that port to EC2
...
Any help appreciated.
If you're trying to completely separate the infrastructure for frontend and backend but keep the same domain you could make use of CloudFront.
In CloudFront you would create 2 origins within your distribution:
The default origin would be the S3 static website.
Then an additional origin which would point to the original ALB.
You would configure the behaviours of this CloudFront distribution so that when a path matches a specific pattern i.e. api/* it would forward traffic to the ELB. If it does not match this it would default to your S3 bucket.
Take a look at the Can I use a single CloudFront web distribution to serve content from multiple origins using multiple behaviors? article which covers a similar behaviour to what I have outlined.

Easiest way to configure a proxy for static Amazon S3 content and dynamic heroku content

My mobile app consists of a dynamic portion on heroku (foo.herokuapp.com) which serves up our API and web views for some content we expose to users who don't have the app installed. There is also of course a static landing page (http://foo.co) which is hosted on S3.
Currently, I have DNS setup to resolve foo.co to our S3 instance. And S3 has routing rules to redirect our dynamic content (http://foo.co/some_dynamic_data/1234/) to our heroku servers.
Given it's a 3XX redirect, this results in a pretty ugly experience for the user since their browser bar is now going to reflect our heroku backend.
Question:
Is there an easy proxy service I can deploy that has special routing rules to route dynamic content to heroku and static content to S3 so that I can point foo.co DNS to the proxy and not have to expose the backend to users via redirects?
CloudFront.
And don't say, "but I thought that was a CDN." That's how it's marketed, but it's also a reverse proxying HTTP request router that can choose the backend based on the request path. The caching capability can be used, or it can be disabled if you don't need/want/understand it.
Create a distribution with two origins (that's what CloudFront calls your backend servers) -- one for the bucket and one for the API endpoint.
Configure your example.com hostname as an alternative hostname in the distribution settings.
Create path behaviors to choose which path patterns route to which origin. If there's an obvious choice for one of them to be the default, catching every path that's otherwise unconfigured, point the default behavior to that particular origin.
Point the DNS hostname to the CloudFront distribution.
Optional: have some SSL on your site with a free certificate from Amazon Certificate Manager, which is integrated with CloudFront.