Deploy A Fullstack REACT APP on AWS EC2

Поділитися
Вставка
  • Опубліковано 14 лис 2024

КОМЕНТАРІ • 106

  • @AvikGhosh-mc5yv
    @AvikGhosh-mc5yv Рік тому +6

    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.

  • @Jonesgoful
    @Jonesgoful Рік тому +1

    Okay, okay. Very very very good this tutorial. You showed/demonstrated all the steps to nervous beginner! Thanks

  • @emmanuelojima-ojo4873
    @emmanuelojima-ojo4873 Рік тому

    Thank you very much bro. I've tried this severally without success. Just deployed my api all thanks to you

  • @plazma5343
    @plazma5343 Рік тому

    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 ;) )

    • @koding_101
      @koding_101  Рік тому +2

      Wow, my pleasure, glad you found my content to be helpful 😄 Im from Botswana but SA is beautiful, i did my degree in SA.

    • @plazma5343
      @plazma5343 Рік тому +2

      @@koding_101 Oh, never had the pleasure of visiting your home country, but nice to see fellow devs from all over the world :)

  • @nakseungchoi7154
    @nakseungchoi7154 Рік тому +2

    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!

    • @koding_101
      @koding_101  Рік тому +3

      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.

  • @Ayankhan-uc6gd
    @Ayankhan-uc6gd Рік тому +1

    i wish youTube would allow me to like this thousand time..thanks budyy

  • @Lorenzo-ky6yz
    @Lorenzo-ky6yz 3 місяці тому

    Great video my fellow South African.

  • @delpsiphi9
    @delpsiphi9 Рік тому +3

    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).

    • @koding_101
      @koding_101  Рік тому +1

      My utmost pleasure, glad to be of service. You can get the part 2 of this video on the next comment.

    • @koding_101
      @koding_101  Рік тому +1

      ua-cam.com/video/cfzHfazXalo/v-deo.html

    • @delpsiphi9
      @delpsiphi9 Рік тому

      @@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.

  • @venkysetty9231
    @venkysetty9231 Рік тому

    awesome! i was going through the video in multiple sessions.. digesting the info slowly.. beautifully done!

  • @manavkhandurie
    @manavkhandurie Рік тому +1

    Thank you so so much for this tutorial. I was finally able to deploy my project 😊

    • @koding_101
      @koding_101  Рік тому +1

      Glad to hear it , this is the reason why i make these videos

  • @techybhoot
    @techybhoot 3 місяці тому

    your video was amazing helped me to deploy my project thank you very very much

  • @theman6429
    @theman6429 Рік тому

    Excellent video tutorial EXACTLY step for step what i've been studying and trying to do in my boot camp. thank you

  • @blipblop92
    @blipblop92 Рік тому

    very good work. One of the few videos I could find to explain it in action! Thank you so much

  • @1111ah
    @1111ah 2 місяці тому

    Great video. Thanks!

  • @abhishekagarwal6742
    @abhishekagarwal6742 Рік тому +1

    AWESOME, Great work.

  • @netsaosa4973
    @netsaosa4973 Рік тому +1

    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

    • @koding_101
      @koding_101  Рік тому

      My absolute pleasure

    • @netsaosa4973
      @netsaosa4973 Рік тому

      @@koding_101 Do you think you make a video of this with docker images?

  • @gursahajsinghbedi1150
    @gursahajsinghbedi1150 Рік тому +2

    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

    • @koding_101
      @koding_101  Рік тому +1

      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;
      }

  • @dennistucker2138
    @dennistucker2138 Рік тому +3

    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?

    • @koding_101
      @koding_101  Рік тому

      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.

    • @koding_101
      @koding_101  Рік тому

      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.

  • @mindylee5023
    @mindylee5023 7 місяців тому

    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.

  • @ahmedsenousy01
    @ahmedsenousy01 Рік тому +1

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

    • @koding_101
      @koding_101  Рік тому

      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?

    • @koding_101
      @koding_101  Рік тому

      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.

    • @ahmedsenousy01
      @ahmedsenousy01 Рік тому +1

      @@koding_101 sry to reply that late, but yeah sure, I'll try to free some time and help u if I could

    • @koding_101
      @koding_101  Рік тому

      @@ahmedsenousy01 Sure thing , thanx a lot , appreciate it

    • @art_ik
      @art_ik Рік тому

      @@koding_101 DM me I can help maybe.

  • @elClubdelas7Cifras
    @elClubdelas7Cifras Рік тому +1

    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!

    • @koding_101
      @koding_101  Рік тому +1

      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

  • @MAAAX2211
    @MAAAX2211 6 місяців тому

    Great content! Keep it up

  • @DennisTuckersAwesome
    @DennisTuckersAwesome Рік тому +1

    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?

    • @koding_101
      @koding_101  Рік тому +2

      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;
      }

    • @koding_101
      @koding_101  Рік тому +1

      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.

  • @oatie4262
    @oatie4262 Рік тому +1

    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.

    • @koding_101
      @koding_101  Рік тому

      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

  • @DennisTuckersAwesome
    @DennisTuckersAwesome Рік тому +2

    I would like a video on the security please. 🙂

    • @koding_101
      @koding_101  Рік тому

      Security? could you elaborate please...

    • @DennisTuckersAwesome
      @DennisTuckersAwesome Рік тому

      @@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.

    • @koding_101
      @koding_101  Рік тому +2

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

  • @AnupumPant
    @AnupumPant 2 місяці тому

    How do i configure nginx if my other app is running on other port simultaneously.

  • @lindelanintuli7620
    @lindelanintuli7620 Рік тому

    Thanks for this!

  • @ASK-pt4ew
    @ASK-pt4ew Рік тому +1

    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?

    • @koding_101
      @koding_101  Рік тому +1

      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.

    • @koding_101
      @koding_101  Рік тому

      Hey did you manage to solve this?

  • @RamalekshmiJeyasankar
    @RamalekshmiJeyasankar 5 місяців тому

    Hi, I'm using mac OS, should I still select ubuntu when I create my instance in AWS

  • @TheFearlessGoat
    @TheFearlessGoat Рік тому +1

    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?

    • @koding_101
      @koding_101  Рік тому +2

      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.

    • @TheFearlessGoat
      @TheFearlessGoat Рік тому

      @@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?

  • @lucasmedeiros9755
    @lucasmedeiros9755 10 місяців тому

    one question, if i have docker compose, when git cloning my project, can i just type docker-compose up and its done?

  • @shareoi
    @shareoi 11 місяців тому

    how you edit file /etc/nginx/sites-available/default ? I can't to commit and to write

  • @sairasagnya2901
    @sairasagnya2901 Рік тому

    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

  • @lelewei8008
    @lelewei8008 9 місяців тому

    Thank you sososososo much

  • @MacielDev
    @MacielDev Рік тому

    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?

  • @mubashir8036
    @mubashir8036 8 місяців тому

    Thank u so much ❤❤❤

  • @predatorvsprey8962
    @predatorvsprey8962 Рік тому +2

    Thank you

    • @koding_101
      @koding_101  Рік тому

      You are most welcome , my absolute pleasure

  • @TshiamoAphane-q2y
    @TshiamoAphane-q2y Рік тому

    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.

    • @jigyansunanda
      @jigyansunanda 8 місяців тому

      did you find a solution to this ?

  • @edmundebiyenrin
    @edmundebiyenrin Рік тому +1

    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

    • @koding_101
      @koding_101  Рік тому

      Did you test your application locally, does it work as it should?

    • @koding_101
      @koding_101  Рік тому

      Where did you save your MongoDB URL , is it in an .env file?

    • @edmundebiyenrin
      @edmundebiyenrin Рік тому

      @@koding_101 I directly include it in my node index.js file

    • @jenniferfan8155
      @jenniferfan8155 10 місяців тому

      did you get the solution ?

  • @one-p2r
    @one-p2r 11 місяців тому

    can you paste the nginx configuration please?

  • @ghulamalishergul562
    @ghulamalishergul562 Рік тому +1

    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

    • @koding_101
      @koding_101  Рік тому

      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.

  • @daisytran4813
    @daisytran4813 Рік тому +1

    Is it a good practice that I run the application in a Docker container which is on EC2?

    • @koding_101
      @koding_101  Рік тому

      Yes its good practice but not really necessary if you're a beginner.

    • @daisytran4813
      @daisytran4813 Рік тому +1

      @@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.

    • @koding_101
      @koding_101  Рік тому

      @@daisytran4813 Absolutely, it will really streamline your development process and maintain consistency between production and development environment.

  • @fun_factory880
    @fun_factory880 Рік тому

    I have a issue here what if my react app route and api end point is same..? Eagerly waiting for your answer

    • @eliteturtle6090
      @eliteturtle6090 10 місяців тому

      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

  • @tuananhngyen2985
    @tuananhngyen2985 Рік тому +1

    how can I find part 2 of this video ?

    • @koding_101
      @koding_101  Рік тому

      Hi , thank you for watching , this is part 2 of this series
      ua-cam.com/video/cfzHfazXalo/v-deo.html

  • @TheFearlessGoat
    @TheFearlessGoat Рік тому

    What happens to the absolute path when the app gets deployed? Can you still use the same one as path.join(_dirname , "../client/build")?

    • @koding_101
      @koding_101  Рік тому

      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.

  • @Rikrolled
    @Rikrolled 4 місяці тому

    Thx Guy

  • @romimaximus
    @romimaximus Рік тому +1

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

    • @koding_101
      @koding_101  Рік тому +2

      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.

  • @balasubramaniam7904
    @balasubramaniam7904 Рік тому

    is this automatic deployment

  • @safhanalikhan9299
    @safhanalikhan9299 Рік тому

    nice video

  • @Ecity1997
    @Ecity1997 8 місяців тому

    does this work with react native?

    • @koding_101
      @koding_101  8 місяців тому

      No it doesnt unfortunately , very different environments all together

  • @adambaruch6787
    @adambaruch6787 11 місяців тому

    who was the female saying alright