Deploy A Fullstack REACT APP on AWS EC2
Вставка
- Опубліковано 16 вер 2024
- How to deploy a Fullstack REACT Application on the AWS EC2 instance
AWS provides an elegant platform for developers to publicly deploy their applications. This platform is known as the Elastic Compute Cloud. The EC2 instance as it is usually called is a virtual server that makes it possible to develop and deploy applications without concerning oneself with hardware constraints. Although it's a simple platform to set up and get running. It's proven to be quite challenging when you’re a newbie developer who is not really concerned with the technical know-how of how this instance operates and all you’re interested in is deploying your newly built application and having it shared across the internet.
source : github.com/kse...
website: kutlosek.xyz
Buy Me Coffee: www.buymeacoff...
Best video I've seen so far. Thanks for posting! One minor step: you need to make sure your inbound rules in your security group allow for http, https, and a database (postgres or mysql) immediately after the server is running. Also make sure your VPC network settings allow for all traffic.
Absolutely , thank you
How do u do that?
Okay, okay. Very very very good this tutorial. You showed/demonstrated all the steps to nervous beginner! Thanks
Great content! Keep it up. I've been in your shoes. It may take a while for your channel to go viral but just gotta stay positive and consistent with good contents. Thanks!
It sure does, I've been told that it's especially hard at the beginning stages. But sure I'll continue serving as much content as I could. Thanks for the encouragement.
Thank you so much. Im a front dev who spent the Last week eating tutorials and documentation, trying to make sense of all this new cloud world, and this tutorial actually solved some riddles that tortured me.
(I get you are South African, i was born in your beautifull country, best regards ;) )
Wow, my pleasure, glad you found my content to be helpful 😄 Im from Botswana but SA is beautiful, i did my degree in SA.
@@koding_101 Oh, never had the pleasure of visiting your home country, but nice to see fellow devs from all over the world :)
Thank you very much bro. I've tried this severally without success. Just deployed my api all thanks to you
Thank you so so much for this tutorial. I was finally able to deploy my project 😊
Glad to hear it , this is the reason why i make these videos
awesome! i was going through the video in multiple sessions.. digesting the info slowly.. beautifully done!
i wish youTube would allow me to like this thousand time..thanks budyy
Wow that means a lot
very good work. One of the few videos I could find to explain it in action! Thank you so much
Excellent video tutorial EXACTLY step for step what i've been studying and trying to do in my boot camp. thank you
Amazing content!! Thanking you very much for this tutorial!! Please can you mention where to find the part 2 of this video (where you explain how to set up DNS).
My utmost pleasure, glad to be of service. You can get the part 2 of this video on the next comment.
ua-cam.com/video/cfzHfazXalo/v-deo.html
@@koding_101 Thank you so much! One more question, I would like to ask. Here you are serving the static build of the frontend from the index.js file of server and then you are setting a proxy in the config file of nginx to direct the traffic to the port where our server is running. But if I want to separately run the client and host say on port 3000 and 5000 respectively, how do I connect to the server from the client side using ipv4 address of ec2 instance? Assuming that nginx is serving the client side only i.e localhost:3000. I'm new to this stuff, and am learning a lot of new things from your videos.
Great video my fellow South African.
your video was amazing helped me to deploy my project thank you very very much
thanks bro, got my server to work. had trouble at first because i was trying to connect to my ec2 instance's public ip using https, but it only worked for http
My absolute pleasure
@@koding_101 Do you think you make a video of this with docker images?
Great video. Thanks!
Great Video, Keep up the good work, this video was very detailed compared to other videos on the EC2 deployment, had fun watching this.
Can you share the code you pasted on 20:28
server_name yourdomain.com www.yourdomain.com;
location / {
proxy_pass localhost:5000; #whatever port your app runs on
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
Great job bro, I wanna give u a few hints though:
1- sry to say ur intro is boring😅, what I mean is that it's a long intro so try to say everything u wanna say as fast as possible just not to lose the attention of ur viewers.
2- if u have the money invest in a good microphone
3- try to show ur face in the videos sometimes, even if it's only for the intro: this way u create a connection with ur viewers and seem to them like a real person, and it also helps with building a brand to urself
other than that thanks for the amazing video bro, really!!!
Thank you Ahmed, those us some great pointers, i've been really trying with my intros lately , cos I've head intros are everything , would you be kind enough to listen to some of my latest content and see whether I've improved in that regard?
I am saving up for a proper mic and camera so i can deliver quality audio and show my face as well. You're absolutely right.
@@koding_101 sry to reply that late, but yeah sure, I'll try to free some time and help u if I could
@@ahmedsenousy01 Sure thing , thanx a lot , appreciate it
@@koding_101 DM me I can help maybe.
AWESOME, Great work.
Thank you
yo! thank u a lot . Have to go through the minutes 18:40 again but seems doable.
feeback :
i think sometimes u just copy code for installation but u dont leave the viewer time to check what u actually are installing.
few seconds there would be amazing.
besides that and the blue background in the terminal with blue letters, all great.
subbed!
Wow, thanks a lot, really appreciate this , your feedback is heard , I'll make sure to wait a few seconds so the viewer can see what is being installed in my next video, thank you for the sub
I would like a video on the security please. 🙂
Security? could you elaborate please...
@@koding_101 securing settings to secure the EC2 instance. You mentioned if we wanted a video on security for the EC2 instance, mention it in the comments. Right now, it’s kind of exposed.
@@DennisTuckersAwesome Ohh yeah that's right, like setting up firewalls and security groups, most definitely , that's in my plans , i'll do a complete thing on AWS
Great video. Can you post the code for the location for nginx? It was all blue so everything blended in. Also, how can you assign a static IP to the EC2 instance or is that IP already static?
You need to create what you call an Elastic IP, that's the one you can assign to different EC2 instances. Otherwise an IP will be automatically created for you.
To access the nginx configuration files, you can either use
sudo nano /etc/nginx/sites-available/default
or
sudo vim /etc/nginx/sites-available/default
depending on the text editor you prefer.
Great content! Keep it up
How do i configure nginx if my other app is running on other port simultaneously.
Thanks so much for this! Does PM2 listen to port 5001? I re-watched the video a couple of times to see if I missed a step but I couldn’t seem to find the step that connects the app to port 5001.
Not sure i get you but , You connect the app to port 5001 through your Nginx configurations. Watch the next part of this video to get a bit more in depth understanding.
ua-cam.com/video/cfzHfazXalo/v-deo.html
If you want to make changes to the application after you already deployed it, do you have to repeat this whole process? Let's say you make a new push to the github repo, can you easily get those changes by doing a git fetch & pull in the EC2 instance?
It's as simple as working on your project locally. You just need to git pull your changes and then use PM2 to restart the application. If the changes do not reflect, restart your Nginx web server. If they still do not reflect , then flush your local DNS settings in your local computer.
@@koding_101 Hey, I really appreciate you taking the time to answer my questions. After hours of stress, my app is finally deployed because of you. In the app, I have a button that would redirect to localhost:5000/dashboard. It's not working anymore because can’t establish a connection to the server at localhost:3005. I'm guessing I would have to change the redirect link for the button to the Public IPv4 address/dashboard instead of localhost:5000/dashboard? So would it be smart to go to my code and change any link that redirects to localhost to the public ipv4 address?
Thank you
You are most welcome , my absolute pleasure
Thanks for this!
does it work if your backend is written in python and frontend with react? Sorry, if it's stupid question since it's my first time working with deployment
No worries, it's not a stupid question at all! Yes, the deployment process should work similarly regardless of the backend language you are using.
Great video. Can you post the code for the location and what was commented out, the colors all blended. Also, how do you assign a static IP address to the EC2 instance?
server_name yourdomain.com www.yourdomain.com;
location / {
proxy_pass localhost:5000; #whatever port your app runs on
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
I hope I've answered all your questions , If you continue to experience problems, got to my website www.kutlosek.xyz and reach out to me.
Thank you for your video. i have successful host my website. but there is a problem that I don't know why it happens. On my local host environment, the contact page functions well, allowing users to send messages to the admin email address. Yet, after deploying it to the server, this functionality does not work, it could not send message. I'm unsure where I might have gone wrong in the deployment process.
one question, if i have docker compose, when git cloning my project, can i just type docker-compose up and its done?
Thx Guy
Hi, I'm using mac OS, should I still select ubuntu when I create my instance in AWS
Is it a good practice that I run the application in a Docker container which is on EC2?
Yes its good practice but not really necessary if you're a beginner.
@@koding_101 Thank you for your reply, I have a project to be in prod in the near future, and hosting on Docker will definitely be the easiest way.
@@daisytran4813 Absolutely, it will really streamline your development process and maintain consistency between production and development environment.
Thank you sososososo much
Thank u so much ❤❤❤
can anyone suggest inbound rules for database and one more doubt can anyone please ex[plain why he got node in the application while using terminal in visual studio code
First of all thanks for this tutorial!
I was able to follow each step but still end up with 502 bad gateway error.
What have I done wrong here?
I suspect your application might not be actively running in the background. Check your pm2 logs to ascertain that your application is indeed running properly.
Hey did you manage to solve this?
nice video
how you edit file /etc/nginx/sites-available/default ? I can't to commit and to write
Thanks sir, Pls I deploy my mern stack app on ec2 but the mongodb url is not connecting showing error_connection_refused in console. I'm using atlas mongodb free tier. Help please
Did you test your application locally, does it work as it should?
Where did you save your MongoDB URL , is it in an .env file?
@@koding_101 I directly include it in my node index.js file
did you get the solution ?
im getting that error on pm2 logs...:
"GET / HTTP/1.0" 404 139
console log error on aws ip deploy:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-pShsw8meIjhx77fl5AYeHiS3c1TOGl7Bx2eEqNo+OCk='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
can you help me please?
What happens to the absolute path when the app gets deployed? Can you still use the same one as path.join(_dirname , "../client/build")?
The absolute path _dirname is relative to the file structure from where you have deployed your application, it is dynamic. I don't expect it to change unless you were to hard code it.
I have a issue here what if my react app route and api end point is same..? Eagerly waiting for your answer
Pretty sure that means your project is in one directory, so all you have to do is skip the first part of the video where he loads the front end build into the backend
Good day sir, thank you for the amazing video. I have stumbled into a problem, I am South African based and upon deploying my reactjs, nodejs and mysql app on netlify and heroku and realized that there is no data center in SA for Heroku and might have latency issues so I resorted to Aws. I have successfully deployed on ec2 (thanks to your amazing tutorial) and the dB on rds. The issue now is that when I run my node and react independently, the Api work perfectly but they don't work when I run the react from node after the npm run build command. My question is what could be causing this and whether you have any idea if I can deploy on heroku and netlify even though there is no dedicated data center in our region.
did you find a solution to this ?
how can I find part 2 of this video ?
Hi , thank you for watching , this is part 2 of this series
ua-cam.com/video/cfzHfazXalo/v-deo.html
can you paste the nginx configuration please?
does this work with react native?
No it doesnt unfortunately , very different environments all together
I gonna have to watch this video about 50 times, cause "aws" is the most complicated cloud in the world, and i have no idea what you just did, specially the part that you didnt explain "Key pair" on the 5:55mins and on, ...but anyway all of it is very complicated for beginners in "aws"... i try it once, but i gave up. and went deploy y app on netlify, ...and only took me 3 mins.... lol...
I can tell you from experience that sometimes that's what it takes to understand something, watch it a couple of times and do your external research.
A KEY PAIR file is more of a password or a door key that is needed to access your EC2 instance. Your EC2 instance of cos is more of a virtual server that is needed in order to run your applications. Think of a virtual server as more of a separate computer somewhere in the cloud. Let me know if this helps you understand better so I can elaborate more.
is this automatic deployment
who was the female saying alright