How to use NuxtJS SSR build on Amazon CloudFront and ECS - amazon-web-services

In our project we have been hosting a NuxtJS site on Amazon's ECS using docker repositories. We are now looking into using CloudFront mainly because we want to distribute content worldwide and also use it's compression mechanism.
Has anyone worked with a similar scenario before? Is is possible to host dynamic content on an ECS container and serve it through CloudFront?

I have worked on a similar scenario; running Nuxt in a lambda behind CloudFront. For that scenario you need to connect your nuxt lambda with API Gateway, then add the API Gateway as an Origin in CloudFront. If you want all requests on domain.com/app to hit Nuxt, you then set a CloudFront behaviour to forward all requests to /app/* to the API Gateway Origin you just added.
So unsure whether you need to front your EC2 with API Gateway, or if you can directly add EC2 as a CloudFront Origin, but look for info on using EC2 as a cloudfront origin and you should be fine.

Related

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.

It is possible to open a web page via AWS lambda functions?

I'm curious whether is possible to load a web page via AWS lambda functions.
I mean, I would like to open a webpage like www.something.com/home which makes a request to the AWS lambda function which will open/get resources from www.i-would-like-to-hide-this-url.com/home, but the URL should remain www.something.com/home.
So can I use AWS as a proxy for the case above?
Yes you can do it with CloudFront using custom Origin. It will work as a reverse proxy for your customers.
A custom origin is an HTTP server, for example, a web server. The HTTP server can be an Amazon Elastic Compute Cloud (Amazon EC2) instance or an HTTP server that you manage privately. An Amazon S3 origin configured as a website endpoint is also considered a custom origin.
When you use a custom origin that is your own HTTP server, you specify the DNS name of the server, along with the HTTP and HTTPS ports and the protocol that you want CloudFront to use when fetching objects from your origin.
Using Amazon EC2 or Other Custom Origins
Or you can do it with ELB and a reverse proxy on EC2. But in this case you will be responsible for this reverse proxy.
Maybe it is even possible to do it with lambda if you code the "reverse proxy" solution, but I guess it is not exaclty recommended.
Typically you host the static assets (html/js/css/img) in S3, you front Lambda with API Gateway, and your web page makes HTTP/Rest requests to API Gateway which forwards them to your Lambda. Lambda itself does not typically serve the static assets. If you need SSL then you add CloudFront. Example here.

Is it possible to use Amazon Web Application Firewall with application that not hosted on AWS instances?

I'm new with AWS WAF and get stuck with setting up it for application that hosts on some dedicated server. I didn't find any information how to set up it without migration to aws servers, but I found that WAF integrated with CloudFront. But anyway I found only few information that explain how to integrate this CDN with my web application. So, the main question is:
Is it possible to use AWS WAF with application that hosted on some dedicated server? And if it possible - can you provide some guides and/or docs for setting up?
Yes, you can use WAF with a server outside AWS.
WAF works with CloudFront, and CloudFront does not require the origin server to be in the AWS ecosystem.
When you create a distribution, you specify where CloudFront sends requests for the files. CloudFront supports using several AWS resources as origins. For example, you can specify an Amazon S3 bucket or a MediaStore container, a MediaPackage channel, or a custom origin, such as an Amazon EC2 instance or your own HTTP web server. (emphasis added)
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DownloadDistS3AndCustomOrigins.html
Configuring CloudFront to work with your external server is no different than configuring it to work with a server in EC2. Your DNS entry (e.g. www.example.com) changes to point to CloudFront, and CloudFront connects to your server using a new name that you create (e.g. origin.example.com). CloudFront proxies requests through to your server, unless the edge location handling the a given request happens to have access to a copy of the same resource that it cached while handling a previous request for the same page -- that's how CloudFront gets your content, by caching it as it handles requests that are passing through. (You don't pre-load any content into CloudFront.) If CloudFront has a cached copy, your server sees nothing, and CloudFront returns the object to the browser from its cache. But CloudFront isn't strictly a CDN, even though they market it that way. It is a global network of reverse proxies and high-reliability/low-latency transport.
You'll want to take steps to ensure that the web server rejected requests that didn't come through CloudFront. See Using Custom Headers to Restrict Access to Your Content on a Custom Origin as well as the list of CloudFront IP Addresses which you could use on your web server's firewall.
Once you have your site working through CloudFront, all you do is activate WAF on the distribution. CloudFront is very tightly integrated with WAF so that is a very simple change, once you have your WAF rules set up.

Serving the static content (EC2) and REST services (API Gateway) from the same address

I have a website which I serve using express running in an EC2 instance. But this EC2 serves only the static content (html, js, css) and the dynamic part comes from API Gateway. Right now, these two have different IPs (and domains) which means that I have to deal with CORS problems accessing API Gateway from the web pages. If I could somehow serve the static content and dynamic one through the same address, that would be much better.
The way I see it, this can be done in two ways. I can serve both of them on the same host but different ports which I'm not sure if it's going to solve the same CORS problem or not. But another way which I'm sure it will not face the CORS problem is serving API Gateway under some specific sub-folder. Like http://example.com/api while the static content is served from any url except that.
Does anyone know how can I do this? Is CloudFront what I need? Or Elastic Load Balancer?
Yes, CloudFront is what you need for this scenario.
Application Load Balancer can also do path-based routing, but it doesn't support API Gateway as a target.
By default, CloudFront can route requests under a single domain to the correct choice from up to 25 destinations, using up to 25 path (matching) patterns (both of these limits can be increased by request, but it sounds like for now, you only need 2 of each, /api/* to the API, and the default * route to EC2). You can also leverage this setup to put some static content in an S3 bucket and take some load off of the servers in EC2.
For this configuration, you will want to configure your API Gateway deployment with a regional endpoint, not an edge optimized endpoint. This is because edge optimized endpoints already use part of the CloudFront infrastructure (a part to which you have no ability to configure), so using an edge-optimized endpoint behind your own CloudFront distribution sends each request and response through the CloudFront network twice, increasing latency.

Can cloudfront support websockets

I have my website Angular based hosted in AWS S3 bucket fronted by cloud front for SSL and caching etc.My URL's and route 53 entries point to CloudFront.
If I have to invoke a websocket [may be imagine its a publicly accessible websocket], wont it work ; i read cloud front doesn't support WebSockets?
I am invoking websockets from S3;Cloudfront is just infront of it.Does that help or this wont work at all?
As of 2018-11, CloudFront now supports WebSocket:
https://aws.amazon.com/about-aws/whats-new/2018/11/amazon-cloudfront-announces-support-for-the-websocket-protocol/
Amazon CloudFront doesn't support WebSockets at the moment so you cannot proxy WebSocket connections through CloudFront.
If you have EC2 instances running in your backend, use the Application Load Balancer which also allows adding AWS Issued SSL certificates and connect through WebSockets.
The Protocol upgrade should be from the Origin, in your case if your Origin is doing that, CloudFront should work with websocket.