Project in S3 bucket doesn't connect to node server in EC2 instance - node.js

AWS newbie here. I have a web app where the Angular dist package is hosted in an S3 bucket, and the backend is being served on an EC2 instance. I've been following this tutorial, but after completion my project in the S3 bucket still does not connect to my remote node server.
What I understood from that tutorial was that by setting up a CloudFront distribution, it will connect the S3 bucket with the EC2 instance. But if I navigate to the CloudFront domain, it loads the S3 bucket contents but still does not connect to my node server.
When I run the node server locally, it connects successfully and I'm able to read and write to my remote Mongo database. This indicates that:
1) the connection to the remote MongoDB is successful, and
2) the front end (in the S3 bucket) is looking for a local node server instead of the remote one (in the EC2 bucket).
So my question is how do I make it so that my services make calls to the remote server instead?

Firstly S3 only hosts static content. So all your Angular dist files will sit on S3. S3 does not connect to your backend. Your browser will try to make AJAX rest calls to your Node Server.
Second your backend Node server needs to expose its Rest services via an API gateway. Thats the recommended approach. It seems if your app is trying to connect locally because of config error. You need to use the API gateway link in your Angular app.
For a quick test you could expose the port in the Security Group of your EC2 and use the public IP of your EC2 to access the node app before going about setting up API gateway.

Related

Node backend deployed to AWS S3 bucket - what is the end point URL for back end

I have a react app stored on an AWS S3 bucket and it seems to be working fine.
I have an RDS database that is up and running and I have the end point for it.
I have a node app that is running express and everything needed to take a request from the front end and "place" the data in the RDS database using that end point.
My question is - When the node app is deployed to the S3 bucket, what URL do I use in the front end to call the node app back end in the S3 bucket?
We have a similar setup at my work and the end point for calling the back end (S3 bucket with Node) from the front end is something like ...
https://xxxxxxxxx.execute-api.us-east-2.amazonaws.com/dev
https://xxxxxxxxx.execute-api.us-east-2.amazonaws.com/prod
I am not sure if I need to set up an api gateway or something to facilitate the routing of the call?
As mentioned in the comment, AWS s3 are for just static content. So you can only deploy a static websites on AWS s3 but not the nodejs app, as it will need node as a runtime.
If you want to replicate, then as mentioned its must be behind API gateway. so you need to understand the nderlying deployment resources which can be lambda, ecs or ec2. API gateway just route your traffic to the deployment.
AWS API Gateway
If you are just trying to run your backend with a few steps then AWS EC2 or AWS lightsail is the quicker option.
Ec2:
With EC2 you will need to configure and install each and everything for example nodejs runtime, npm etc
lightsail:
In lightsail you just need to select the node version and that's it.
Here are few docs that can help you to deploy your app using lightsale, lightsale instance come with nodejs version and does not need any installation, you just need to copy your code to the instance and start.
Once you able to deploy the app either on ec2 or lightsale, you just to copy the public IP from lightsale or ec2 and use that IP in the frontend app.
deploy-nodejs-app-in-aws-lightsail
amazon-lightsail-quick-start-guide-nodejs
deploy-node-js-server-on-aws-lightsail

How to deploy Node.js Express server + Vue.js app on AWS EC2

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**

How do you connect an S3 hosted frontend to a Elastic beanstalk hosted backend?

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.

How do I host a Node.js server on AWS cloudfront? I'm trying to make a social media

I am using AWS cloudfront to store data but I need a backend (Node.js) server to upload and delete data automatically. How can I connect a node.js server to AWS cloudfront, with access to read and write its files?
AWS CloudFront acts as a CDN (Cache and a Proxy) and you can put it in front of your Node Server. You can connect your NodeJS server (DNS) as an origin and provide caching rules as behaviors (e.g; /js/* /api/* ).

Access AWS Node SDK inside firewall without changing any configuration in firewall

I have a desktop app which downloads app assets after installation is completed.
App uses aws node sdk to download all the assets from S3 buckets.
Problem comes when app is getting installed inside company firewall. Company firewall blocks the api request used by aws node sdk.
And I can't ask all my client to white-list amazon web service urls but I can ask them to white-list my own company url like *.mycompany.com.
Is there any way we can access aws node sdk using my company domain.
We had this same problem and resolved it by creating a proxy API endpoint on a separate server that would take the request, and pipe the stream from AWS S3 back to the client. Because this proxy endpoint was hosted in a whitelisted domain, we didn't have to worry about the company's firewall blocking the request.

Resources