I am new to AWS. I have my node/express.js backend hosted on the Elastic beanstalk and it's working as per expectation. The express.js APIs communicate with the AWS RDS MySql database and send response accordingly. I have integrated the APIs calls in the React frontend and it is working fine locally. Now I have deployed the React frontend on the amplify and React app is hosted there now. But the API calls to elastic beanstalk are failing on the Amplify with the response "TypeError: Failed to fetch". I have also analyzed the Elastic beanstalk logs but could not find anything there. I wanna know why API calls are working perfectly locally but not on the amplify?
I think the issue is that Elastic Beanstalk requires that the communnication protocol has to be the same for both sender and receiver. So, the solution is to use either HTTP or HTTPS for both Front-End and Back-End.
Related
I have made a web Application using React as Front End and Nodejs as the backend service.
I am trying to host the App on AWS using AWS amplify for Front End and connecting the API service with my already created Nodejs API service.
Is there a way to configure the AWS Amplify with an already existing Nodejs application.
I'm assuming you already have the nodejs apis deployed somewhere and you are already accessing it in react. If that's the case then you may not need to change anything in react and just add amplify hosting. It should continue to use same api without any issue.
https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html
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 am googling a lot to be sure the best approach to deploy MERN stack app on aws ec2 ... in some examples Nginx being used in server (expressjs) part and in some cases its being used for Recatjs part and the express js part is just hosted in node , React even can be hosted in s3 I guesss .. so what is the best approach however?
Without configuring the server yourself in EC2, you can simply use managed Node.js hosting provided by AWS Elastic Beanstalk.
If you want to directly configure EC2 instance and deploy, you can follow this tutorial to do the deployment https://jasonwatmore.com/post/2019/11/18/react-nodejs-on-aws-how-to-deploy-a-mern-stack-app-to-amazon-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**
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.