Two different AWS applications on the same domain with a different subfolders - amazon-web-services

Based on this issue CAS server cross subdomain ST ticket I'm thinking about changing of my applications urls.
I have two applications on the following subdomains
https://ui.example.com - static AngularJS application(JavaScript, HTML) hosted on Amazon S3
https://api.example.com - Java Spring application hosted on Amazon EC2 instances (for Tomcat) with Elastic Load Balancing that distributes incoming application traffic across multiple Amazon EC2.
Right now I need to change urls of my applications to the following:
https://ui.example.com
https://ui.example.com/api
In other words I need to make api.example.com application available as /api subfolder of my ui.example.com domain.
How it can be configured with AWS ? Where at AWS I need to make an appropriate changes and configuration ?

You could setup an Nginx proxy in front of both servers, mapping the root path to S3 and the /api path to your EC2 instance. Or you could set up a CloudFront distribution (or use another CDN like CloudFlare) and map the different paths to different origin servers.
In general you have to put a proxy in front of all the servers sharing a domain name.

Related

AWS : Manage Elastic Beanstalk API and CloudFront routes with Routes 53

I wonder how to manage the routes of my architecture. To summarize, my architecture is composed of :
S3 static website exposed under CloudFront CDN
Elastic Beanstalk API (based on Docker container with Django Rest and Python)
I usually insert a new record to my hosted zone in my route 53 but my goal here is to have the equivalent of Nginx locations with proxy_pass. For example, I would have :
<my_dns_record>/api that target my Beanstalk API
<my_dns_record> that target my static website on my CloudFront
I thought about an API Gateway but I wonder if it's really the best way to structure the routing.
Does anyone have an idea how to achieve the desired behavior ?
Thank you in advance for your help.
If I understand correctly, you want to have multiple apps (your S3 static site, and your Elastic Beanstalk app) served under a single domain. Route53 doesn't have any special features to handle this, since it is just a DNS service, and what you are talking about is an HTTP path routing thing.
You also shouldn't use API Gateway for this, as you would be placing your entire website behind an API Gateway when it is really only appropriate to have your API behind an API Gateway.
I would just add the Elastic Beanstalk API under CloudFront as well, as a second origin, and configure CloudFront to send requests at the /api path to the Elastic Beanstalk origin.
Alternatively, forget about having everything under the same domain, and use a subdomain api.yourdomain.com for your API. Using subdomains for your different services instead of path routing is a lot more flexible.

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.

AWS EC2 / Elastic Beanstalk | How to white list by domain?

I have an Elastic Beanstalk environment which is a Node API. I also have a Angular web app outside of AWS on domain: www.example.com
How would I go about making it so only calls made from 'www.example.com' to the AWS environment(Node API can be accessed?
I am familiar with AWS security groups but it doesn't handle domain whitelisting (Only IP's). Since users will be on different IP's using www.example.com I need to whitelist by domain and not IP.
Any help would be greatly appreciated!
Without blocking via IP your only choice is to look at attaching a WAF to the ALB in your Elastic Beanstalk environment.
By doing this you can allow only traffic that matches a set of conditions, if there is a particular header that your requests include when they make requests to the backend then you can allow requests from these sources.
Assuming the request to the API is made from the frontend you should have a referrer header which contains the source of the previous page. You could whitelist this domain in the WAF.

How to deploy frontend and backend with the same domain name?

I'm not very familiar with deployment and networking as I'm primarily a frontend developer. I want to create a project with Laravel and React (separated, not integrated with blade), and deploy them to AWS. I want to use Laravel only as an API server, and I'm planning to deploy it on EC2. If I host my React app on S3, how will it be possible for me to share the same domain with the API sever running on the EC2 instance?
I know that I can have separate subdomains,like www.example.com for my React app and api.example.com for my API server. However, if I want to have www.example.com for my React app and www.example.com/api for my API server, what options do I have? And what resources can you recommend for me to get more up to speed on this topic? Thanks!
As you want to use S3 and EC2 you would need to use a service that can distribute to both endpoints based on a condition.
The best service for this would be CloudFront, which supports distribution to S3 and EC2 (as a custom origin).
To do this you would create your distribution with an origin for the S3 bucket, and an origin for the API. As your API is hosted on the /api/* path you would add this as the path pattern when adding the secondary origin via a behaviour.
CloudFront will then route any requests to /api/* paths to your EC2 origin.
I have found an article named How to route to multiple origins with CloudFront which I hope will explain the steps to accomplish this in greater detail.

AWS Cloudfront to my web server

Is there a way to point an AWS Cloudfront instance to my own personal web server not hosted in AWS. So it's not an EC2 or a ELB instance. It's a custom web server hosted with another host. Is this possible? I can't seem to configure this an origin?
Yes, You can do that. When creating distribution, In the Origin Settings section specify your domain as the "Origin".
Suppose you want make CloudFront for example.com Do the following steps:
1) Create a subdomain for your application us.example.com
2) Create distribution with the Origin to us.example.com it will give you a domain name like this d2uhnp5egk65ug.cloudfront.net
3) adjust settings for your naked domain to point to your cloud front distribution d2uhnp5egk65ug.cloudfront.net.
Now by using CNAME example.com can point to distribution d2uhnp5egk65ug.cloudfront.net that might have multiple origins in the backend like "us.example.com" and "uk.example.com"