Deploying React App to AWS without S3 static url - amazon-web-services

I have a React app that is currently hosted in a regular AWS account. I used S3 static URL and cloud front to host the site and deliver it over SSL. I now need to deploy the same app from a gov-cloud instance. Gov-Cloud does NOT have cloudfront available and unfortunately you cant apply SSL to an s3 static URL.
I'm searching for another relatively easy way to deploy this (Amplify is also not available in gov cloud). Elastic Beanstalk is available but it seems like overkill for just hosting a React app (not to mention, I have to set this up in Terraform so configuring EB seems like a way way overkill as there are many options available in EB).
Has anybody done this kind of deployment before or have any suggestions for how to do this? If need be, I'll do it with elastic beanstalk, I just need to research all the options first (unless someone has a golden image type deal for react apps).

Related

Static web site on S3 and CloudFront -- How to hide a non-prod version of the site

We have static Reactjs site we developing, hosting on s3 with CloudFront, I'm wondering if it's possible to hide non-prod versions of a site under VPN access somehow, means dev. uat. qa. subdomains will be accessible only by users who is connected to VPC by VPN, my quick guess only way to do this it to setup VPC Endpoint and small EC2 based reverse-proxy with LB maybe for non prod envs.
If someone know how to do this without spinning up new instances - would be thanksfull.
This is way I'll go, seems to be satisried all requirements above
https://aws.amazon.com/blogs/networking-and-content-delivery/authorizationedge-using-cookies-protect-your-amazon-cloudfront-content-from-being-downloaded-by-unauthenticated-users/
https://aws.amazon.com/blogs/networking-and-content-delivery/authorizationedge-how-to-use-lambdaedge-and-json-web-tokens-to-enhance-web-application-security/

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 hosting with HTTPS

I'm working on this site that I'm hosting with AWS. I'm hosting a vue.js frontend in an S3 bucket and the backend utilizes Spring Boot hosted with Elastic Beanstalk and a MySQL RDS instance. After playing around some, I got the frontend to serve up files via HTTPS, but now my requests to the Spring API are failing.
I've done a lot of digging on this and it seems that are may be several ways to handle this, but I just keep getting stuck and not knowing where to turn next. I've tried playing around with setting up a load balancer, and also tried configuring a proxy in a .ebextensions configuration file.
This whole thing was working when I set it up with HTTP originally, but now that the front-end is serving up HTTPS it won't work.
Web browsers must be blocking your mixed HTTP/HTTPs content because of their inbuilt security. You need to make sure that you setup the whole site using HTTPs or HTTP. As you have already set up the S3 content to be served through HTTPs, now you must configure your Elastic Beanstalk environment to be setup with HTTPs too. Here is the link to help you with that
Configuring HTTPS for Your Elastic Beanstalk Environment
If your site is built with a CRM? (WordPress/Joomla/ect.) then there are plugins/extensions that handle that. I had a similar situation with a WordPress site, and used the plug-in called "SSL Insecure Content Fixer". Worked without a hitch, rather than scanning through the entire site for mixed HTTP/HTTPs content.

AWS infrastructure of website with another endpoint(s)

I have a WordPress blog that serves niche content on domain.com
On a different endpoint, domain.com/api/ I have a completely different Node.JS API that doesn't regard the WordPress but I want to serve it from the same domain.
It is worth mentioning that we proiritize performance and speed above all.
My thought was the following :
Set up 2 EC2 Instances, one for the WordPress and one for the API (Maybe make the API a Lambda instance ?).
Set up an Application Load Balancer that will know how to route requests with a rule depending on the URL.
Is it the right way to go ? Should I just use nginx as a reverse proxy and serve the Node.JS API on a local port ?
I also want to use Elastic Beanstalk to save myself the headache of configuring the Load Balancer and the Auto Scaling group.
P.S If anyone has any advice or good habits on how to build those (With S3 Bucket perhaps, over CloudFront, etc etc) it will be more than welcome.
Thanks !

How to deploy a multi-tenant django app to AWS?

I have an Django+Postgres app that has a multi-tenant structure and I don't have prior experience deploying this type of app to AWS. I have followed the general Elastic Beanstalk tutorial to deploy a simple app. (https://realpython.com/blog/python/deploying-a-django-app-to-aws-elastic-beanstalk/) However, I am looking for a solution that allows me to more flexibly create different "sites". Currently, I have learned to create different sites via this tutorial (http://mycodesmells.com/post/django-tutorial-multi-tenant-setup).
So i have below questions :
how to deploy this app (I am leaning toward not using Elastic Beanstalk but just deploying it to EC2)
how I could create different sites after deploying this app.
The following should help:
Set up your .ebextensions so your Django project deploys with eb deploy.
Set up django-storages with AWS S3 for mediafiles if you need to.
Purchase a domain and set it up with AWS Route 53 (you can buy via Route 53, too).
Point your root domain alias to your Elastic Beanstalk app.
Point a wildcard domain to your app, too.
Set up AWS SES to save your domain emails to an AWS S3 bucket. You can use other providers as well, SES is just about the easiest.
Provision AWS ACM certificates for HTTPS support.
You now have your site working under .example.com and can use tenant.example.com to refer to a single client's setup - it refers to the same deployment but has a different Host header which lets Django tenant schemas to distinguish clients. You have wildcard forwards and do not need any setup other than in Django for adding new tenants.