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.
Related
I cannot get my React app running on an EC2 Instance after deploying with CodeDeploy.
I have 3 Amazon Linux EC2 Instances running: Production, Staging 1, and Staging 2.
The Staging servers are imaged from Prod and all are running the same code. Our stack is a Node backend with React on the front.
Staging 1's deploys are managed by CodePipeline/CodeDeploy. The Node server runs and I can query the back-end API, but it isn't serving our React app. Trying to access the front-end URL via browser/CURL will time out. Staging 2 and Production work without issue.
Traffic is forwarded to the port the React app is running on via "proxy": "http://localhost:5000/" in the client's package.json.
I'm wondering what configuration the CodeDeploy agent could have changed to disable access to ports and proxying between React and Node.
Any demystifiation of what the CodeDeploy agent actually changes on an EC2 instance, or other potential cause would be a huge help. Thanks!
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.
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.
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**
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.