I am developing a web application in React with a Node.js back-end. I would like to host the images and static files built for the React application on Cloudfront. However, the React application relies on the Node.js server to obtain some changing data to populate the views.
I need to have a thorough understanding of the flow of the application in order to come up with a reasonable design. Here is what I think happens:
User enters URL in the browser
Client is directed to the closest Cloudfront edge location
Cloudfront serves the HTML and images to the browser
The React application bootstraps in the browser
An API call is made to the Node.js server, which returns the required data
The browser renders the React application.
Am I understanding this correctly? Is there a better way to architect my web application?
I am not able to find the information I require online and would appreciate any help!
Your architecture is correct.
Just to be clear, CloudFront is not hosting your files. CloudFront is a cache and will fetch your files from an Origin, typically an Amazon S3 bucket.
Using React && AWS Amplify, you can create a serverless architecture for this type of setup with minimal work. You can get started by following the instructions at https://aws-amplify.github.io/docs/
In a nutshel :
Install with:
npm install -g #aws-amplify/cli
$ amplify configure
Then in your project :
amplify init
amplify add api #this will create your API as AWS Lambda functions exposed through Amazon API Gateway)
amplify add hosting #this will create the Amazon S3 bucket for hosting and the cloudfront distribution)
amplify push #to create all this on your AWS account for you
If you search for 'aws amplify react' you will easily find a dozen blog posting showing you how to get started. There are so many I can not recommend one in particular.
Related
I have a NodeJs/React web app. I use to deploy to one EC2 instance. Is this the correct approach?
I've seen online that one option is to put the frontend in S3 with CloudFront and then the backend in an EC2 instance. In this case does the NodeJs server serve the static files from that bucket? Or how would it work?
Hosting dynamic part of React apps on Compute (I'll prefer ECS+Fargate over EC2) and static on S3 + CloudFront is an efficient way to use AWS Managed services capabilities. Your architecture will be something like this:
client -> CloudFront (cached) -> S3 (static resources)
client -> CloudFront (NOT cached) -> LB -> Compute (EC2 / Fargate / Lambda)
You can manage different paths or routes via CloudFront Behaviour functionality. So root (/index.html) points to your S3. and APIs (/api) can point to the Load Balancer for dynamic content.
The bucket works like a static web hosting.
Since React it's client rendering, and not server rendering, it's a complete different app than your node backend.
The client will recieve the static files from CloudFront/S3, and that files (HTML, JavaScript rendered in the client's machine), will communicate with your API hosted in EC2.
You can host both, frontend and backend in EC2.
Or frontend in S3 or CludFront and the backend in EC2.
It's cheaper if you host your stuff separately, since EC2 has dinamic costs.
Now, if you use a server rendering framework like NextJS or Gatsby, the "static files" and the backend are the same thing, the backend render the static files and send them to the client, in that case you need to host everything in EC2.
Usually is better to host everything in the same server for practicity, specially when there are not dynamic costs.
You can opt for another VPS hosting for your server, it's not related to your question, but I reccomend Hetzner, it's cheaper and better than EC2.
I have a react native app that I'm building using expo. For the backend, I am using node.js and Express.
My app hierarchy is such that I have a frontend folder and a backend (server) folder. For example,
Root
|
|Frontend
|Various screens & associated files
|Server
|Routes & other files
For my project, is it possible to just host the backend and not the rest of the app? Such that when I fetch data in the frontend using HTTP requests, instead of routing through localhost (http: //RandomIP:PORT/route) I would use the heroku address as the routing address. I would also host the SQL database along with it.
I tried to follow along with the Heroku documentation, but it seemed like that was for hosting the entirety of the app / web apps instead of mobile, and I ran into constant errors.
I would like to point out that, unlike web pages, mobile apps cannot be hosted on the server and fetched on-demand. In other words, do not try to upload your react-native code to Heroku instead just upload your backend only and then make HTTP requests through the URL provided by Heroku after you have deployed your code.
Therefore go into your backend codebase, initialize a git repository and just deploy that Heroku. Also, you will need to host your SQL database on another service such as Google's Cloud SQL or Amazons AWS Database Services.
I have frontend and backend both are using nodejs. Frontend is exposed and every request for api goes through the proxy module in the frontend, and both frontend and backend communicate on different modes.
Is there a way to deploy the above module, using code pipeline onto the Elastic Beanstalk platform ?
Why not deploy the front end on Amplify AWS?
AWS Amplify is a set of tools and services that can be used together or on their own, to help front-end web and mobile developers build scalable full stack applications, powered by AWS.
You just need to link your Repo and select your branch and everything will be deployed and generate also a random free domain or you can set your domain from the domain management section
I'm setting up my website which would run on an AWS Ubuntu EC2. It is a Vue.js SPA relying on a Nodejs Express app with API calls and socket.io. So far both apps are working, the backend is on my AWS EC2 free tier, behind an Elastic Load Balancer, the frontend is on my machine since I working on it. Now I would like to deploy the frontend to my AWS EC2 also but I'm confused how to do it correctly. The tutorials I've found are using nginx but I'm not sure that I need nginx as I already have AWS ELB. Any advices would be great :)
as is says "If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app" here
I would choose s3 to host vue app because it's static and can be served using s3 and
I will choose EC2 for hosting my API (server code) and also i'd make an elastic IP to talk to my ec2 server so that on restart i don't have to handle the dynamic IP's
Steps to make your website live
First pull yout node express server on your ec2 instance
start your node express server use pm2 to serve it as an service
expose the served port from security groups of the ec2 instance
make an s3 bucket on aws and upload files to it
Tip: just click upload button after dropping your files to s3 do not go clicking next
after uploading select all the uploaded files and then mark as public
after uploading go to properties of that bucket and then choose static web hosting and type index.html the asked field
** TIP: do not use a load balancer for this application use only when you distribute your system across multiple ec2's**
Let's say I have a single page application using React/Node, and I want to deploy that application using a content delivery network to improve load performance.
To do that in Amazon Web Services (AWS) I would need to incorporate different services to work together.
I would need to host my bundled static web page files on amazon's S3 bucket. Then I would need to host my Node API on Elastic Beanstalk. Lastly, I would then need to setup a CloudFront distribution and set my origin to my S3 bucket.
It would look something like this:
Now, if I wanted to do the same thing in Firebase, according to this video tutorial, I can simply setup Firebase Hosting which is backed by their own CDN which gives similar improved load times. Firebase hosting can encompass the entire React/Node application without the need for separation or various services like I did in AWS.
My questions are:
How does Firebase hosting encompass dynamic Node Apps with out the need to separate the front and backend or use various other services?
The point of a CDN is to cache files, so it wouldn't be possible to use a CDN on a Node API right or wrong? If right then how is Firebase using Node app in their CDN?
It seems much simpler to setup on Firebase to serve an entire dynamic app on their CDN compared to AWS, would their be any drawbacks to this or is it just a better service?
Firebase Hosting is only for your static frontend code. But there is a way to connect Firebase Hosting and Cloud Functions to serve dynamic content that is pretty easy to setup.
https://firebase.google.com/docs/hosting/functions
You can think of Firebase Hosting a zero-ish config equivalent to the AWS S3/CloudFront section of the diagram.