Currently I am using aws ec2 instance to host my backend and frontend . Backend is in nodeJs and frontend is in angular. ALso using route 53 for routing . and bought domain from goDaddy.
I have used following steps for hosting.
for backend :
clone my backend files on ec2 instance.
run backend nodejs program using pm2(used to run nodejs in background)
used nginx as reverse proxy to point localhost to my sub domain.
for frontend:
cloned frontend production files on ec2 instance.
used nginx to point frontend file to my main domain.
Now nginx is little bit complex to handle for me. Is there any way to avoid nginx or to host though any other way ?
Thank you for your time.
If your frontend app uses angular, then presumably it's a 'Single Page App' that is only dynamic in the sense that it makes some kind HTTP calls to an (RESTful?) API provided by your nodeJS application.
If this is the case, then you can host the built version of the angular app in a public S3 bucket configured as a 'static' site, which will still be able to communicate with your backend via angular's HttpClient. You can use Route53 to point your bought domain at the bucket's index.html file, and also set up a CloudFront distribution if desired.
Your nodeJS app will continue to live on the EC2 instance, although you could consider either using Elastic Beanstalk to deploy the backend app for you, or at least setting up yourself a load-balancer and autoscaling group to give you fault tolerance and availability for the backend.
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'm currently developing a full-stack web application + mobile app. I've pushed my API backend (node.js express) to an AWS EC2 instance.
Now I'm looking to create the frontend with React. As well as a landing page which I think will be just plain HTML (or even WordPress if possible?) to get it running asap.
Questions are:
should I upload all 3 to the same instance? if so how?
can I point my domain in a way where mydomain.com - serves the landing page, api.mydomain.com serves the backend for requests, and app.mydomain.com serves the react app.
This solution is entirely upto you here, if this is a personal project or one with a tight budget then yes you can put all applications onto the same server.
If you have a HTML only application then you could deploy that specific application to Amazon S3 with a CloudFront distribution in front to provide CDN functionality.
If you do run the applications on your server then you will need to ensure that the web server can resolve each set application individually through hostname for example Nginx uses server_name to define the web domain name for that vhost.
I would suggest if you're running all on the same box run each node application on a seperate port, then use Nginx as a proxy based on the domain name. More information on how to set this up is available here.
Finally add DNS records to target the host IP (or CNAME if you use CloudFront).
I set up an Application Load Balancer(AWS) for my website. In my website, I have angular as my frontend, and I have NodeJs and Neptune DB as my backend.
Browser(Local Machine) -> ALB -> EC2 Instance(Web).
I have an url for my web(https://example.com), so when I made a request to https://example.com in my local machine browser, Angular will do a api call using httpclient.get() to fetch data from nodejs at https://example.com/api/ticket.
So my question is when Angular fetch data from NodeJS, will the api call bypass the ALB, what is the host then? Or NodeJs will recognize the request is from the local?
I assume you are using an ALB with Host based routing. In this case you can have a 443 rule for example.com forwarding requests to the EC2 instance. Then in the Nodejs application you can have that api called using the same url.
This means that the request will be routed through the ALB which is also the best practise to do the same.
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**
I have run npm build on my react app and have opened an S3 bucket on AWS, changed it to become a static website host, and have uploaded the contents of the react build folder into it. I'm now able to access the frontend part.
My backend, running on node & express, is in a different package alltogether. Throughout development I ran both "nodemon app" and "npm start" separately and connected the two through a proxy.
I have used Elastic Beanstalk before to run a webapp, but the whole package was in one before and I never had to connect 2 server instances, so I'm lost as to how I can have the frontend send POST requests and connect to the websockets from S3 to EBS.
For example, my frontend connected to the backend during development with this:
endpoint: 'http://localhost:3000'
this.state.io = socket.connect(this.state.endpoint);
Do I now change that to the domain name of the EBS instance?
I also use Axios for my POST requests. How does the frontend know to connect to my EBS specifically?
Any help would be appreciated, thank you.
Set the endpoint to the domain where your API is hosted. That should be Elastic Beanstalk. To avoid CORS issues, it'd be easier if you set it all up under one domain. You would probably need CloudFront for that, or you can take a shortcut and have Apache on your Elastic Beanstalk proxy requests to S3.