Deploy a React App using Nginx

Подписаться 2,1 тыс.

Просмотров 71 тыс.

50% 1

In this video, I will show how to deploy a React application on an EC2 Instance using Nginx. React applications are SPAs hence Nginx is a good option to serve static files. I will also show how to install Nginx and NodeJS on the EC2 Instance.
Once we have installed all the required modules, the next step is to clone the project, run the build script and start the Nginx Server.
Code: github.com/enricop89/react-ap...
00:00 Introduction
00:42 Create React App
01:07 Create React Routes
03:19 Create EC2 Instance
05:01 Install Nginx and NodeJS on the EC2 Instance
06:42 Clone the Repo and build the Project
09:15 Nginx Config explanation
12:53 Conclusion
If you want to learn more about DynamoDB and AWS Services, make sure to
subscribe to the channel:
RU-vid 🎥 - / @enricoportolan
🌎 Find me here:
Twitter - / enricop89

Наука

Опубликовано:

24 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 83

@User_jkjsbbk 2 года назад

Subscribed, thank you a lot, I have finally fixed my problem with building, great tutorial

@dmontesa 2 года назад

Thank you so much for this. I've tried so many tutorials but this was just so well explained and right for my app. Thank you again.

@sgwong513 2 года назад

really appreciate for this video. I been searching around for hours on web on how to serve react app but couldn't get it. (written the nginx try_files wrongly) really grateful about this video, it worked perfectly as I needed. Nice video with clear explanation.

@thevolcanick 2 года назад

subscribed! keep it up Enrico. helpful video.

@crazyvolt1660 Год назад

Followed almost every website, but didn't work. I followed your defined steps and its running. Thank you, Sir

@1995taunus Год назад

Thank you for the great lesson!

@sergiyrudenko905 Год назад

Thank you, Enrico! Great lesson! Works great. If someone has something that doesn't work, you can always debug it with Nginx logs. In my case, I had "/build" folder permission issues. Fixed it by giving the right permission.

@mnyandeni Год назад

how did you give it the right permissions ?

@steelangelariana 2 года назад

This is one of the best tutorial to learn how to deploy your app! Thank you so much for sharing this!!

@rankstrikers9187 2 года назад

I have followed your steps and configured. Page rendered but login api call is not working after npm run build. That means package.json proxy is working in react whole project but not work in build. Can you explain what the exact issue?

@d0m2288 8 месяцев назад

Great tutorial, thank you.

@mohitchandra2680 Год назад

what did you press to save the react.conf file i.e DOS Format, Mac Format, Append, Prepend, Backup files, to Files? Please tell we the command you used

@mohammadfalahi3369 2 года назад

Awesome and Helpful

@njtuts5818 2 года назад

very good clarification

@jasonhumphrey2464 2 года назад

Great Video!

@_Mandal_ 2 года назад

i am facing the same issue of loading welcome page

@SSSWorldClass Год назад

For every code changes in react js do we need to rebuild and restart nginx again and again.?

@breaker__ 5 месяцев назад

Latest node version isn't working (20) - any recommendations for specific node version to use?

@ethangordon3935 11 месяцев назад

Is there a reason we don’t just point nginx to the build folder within our react application? Why make a new directory and copy?

@agustinfeijoo1462 2 года назад

you are the best!

@mihirdoshi1262 2 года назад

Thank you so much:)

@mdshadab3470 2 года назад

Bro I'm new to linux just come for server part how should i give the root directory no idea

@anonymoustv8604 Год назад

For me, There is no code inside my root div. The files are being loaded in my Network tab and even sources. My favicon is being displayed properly but no code inside my root div

@asmaaat6266 Год назад

how can i deploy a reactjs project on the server if i have already the backend in the server

@smdjunaid1064 4 месяца назад

i want to add different port for different project dirs......how plz explain this too

@CharlyBGood11 Год назад

I love you Friend! New suscriber here!! :D

@bhargavitummala7690 2 года назад

Hi, npm run build was not working even after npm i

@SanketPatil 2 года назад

Thanks for video

@user-ux1mz9ox6j Год назад

It shows the default nginx at the browser... kill me

@dancruz7845 Год назад

me too

@tylertyler965 11 месяцев назад

is it necessary to do npm install if I copy my build file directly from my machine to ec2? That seems like the only reason we need npm run build from it. my ec2 keeps freezing when I run npm run build, maybe the memory is too small :(

@igorpostoev2077 4 месяца назад

Same thing happening. Built locally

@amarjeetsingh5473 Год назад

only working for home page but when clicking another link it is not working

@Mahesha999 Год назад

Hey super thanks for this crisp video. Also, have you created video explaining starting application from subpath which you said you will at the end of this video?

@EnricoPortolan Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6CjbezdbB8o.html Sure

@nagarajkalakutagi5717 2 года назад

Nice

@BP-qy2pb 2 года назад

May I ask what's the difference between react + express + nginx vs react + nginx?

@EnricoPortolan 2 года назад

Sure, in react + express + nginx express is acting as the web server, serve the React app and nginx is routing the traffic to express. In the other configuration, nginx is serving react as a static file so it’s acting as a “web server”

@DuyTran-ss4lu 2 года назад

Great

@mathieugrosso93340 Год назад

hello ! i have followed the tutorial but when launching on ec2 instance i get "500 Internal Server Error" does any one know why ? Thanks !

@patrickrios99 6 месяцев назад

@inhVanongFEFICHN 11 месяцев назад

I have a question for you. I deploy on server Ubuntu and domain points to IP addresses. If i type ip address on browser, it is Ok but no routing when i type domain. Can you explain??

@EnricoPortolan 11 месяцев назад

Have you added an A record on route 53 or on your DNS provider?

@user-ux1mz9ox6j Год назад

Hey man, ec2, ubuntu 22.04 LTS require permission to approach the folder ( in video ubuntu).......... I spent time a lot man

@mnyandeni Год назад

how did you fix the permission issue ?

@yashtibrewal4259 2 года назад

thanks

@Klausenitzer 3 года назад

hey everything worked for me except the end result. I still just get the default Welcome to Nginx! Only thing I did differently was I did the create react app/create react routes last, would that have any affect? please let me know anything i can check

@EnricoPortolan 3 года назад

Hey, did you run nginx reload to have your changes applied? if you have a Github repo I can have a look

@Klausenitzer 3 года назад

@@EnricoPortolan I did run the reload, i've just gone through it again but no luck. I did notice i did input the wrong root path during the last step, so corrected that but same result D: Might give the github repo thing a go but never used it.

@EnricoPortolan 3 года назад

@@Klausenitzer ok another thing you can do is to check the difference between my repo and your code: github.com/enricop89/react-app-expressjs-nginx

@Klausenitzer 3 года назад

The problem isn't running the app though, it works fine locally like at the start of the video. It's just the end result when you are going to the IP of the server. Mine still just points to the Nginx default page. Seems like there is an additional step to point nginx to use the react.conf insted of the default file? I'm really not sure.

@tanphan2899 3 года назад

@@Klausenitzer I am also having the same problem as you

@felipperian6710 Год назад

I did everything that you explain. But, my server dont shows the react application. The server is showing a starter page called "Welcome to nginx!". Can you help me?

@grandioso6668 Год назад

you fix?

@felipperian6710 Год назад

@@grandioso6668 no... Do you have the same problem?

@grandioso6668 Год назад

@@felipperian6710 yeah

@balasubramaniam7904 9 месяцев назад

is this automatic deployment

@srappytrex3946 2 года назад

Why do we run "npm run build" then " npm i" then "npm run build" again?

@EnricoPortolan 2 года назад

Probably I said it by mistake, you need only npm install & npm run build

@srappytrex3946 2 года назад

@@EnricoPortolan Thank you, this is indeed a very clear walk through, appreciate it alot pal! Yet I am still crying all over my error 500 after a night of testing T.T...could it be something related to that the npm start won't run in port 80?

@private6117 2 года назад

I have 500 internal error. Anyone could help

@ayeshazahid2421 Год назад

same here im keep on getting the same error

@jorgeramiroalarconvargas2580 Год назад

can you make your terminal smaller XD

@Ben-pv9yh 2 года назад

Why use an EC2? S3 with cloudFront is perfect for hosting static files. EC2 are so expensive

@EnricoPortolan 2 года назад

I totally agree with you, in fact I made a video about it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CQ8vzm1kYkM.html. Unfortunately some companies don't have the technology stack to deploy on S3 with Cloudfront and they prefer to use EC2 instances.

@edchelstephens 2 года назад

Thank you Enrico. Do you have a video for deploying the same app with docker?

@EnricoPortolan 2 года назад

Sure, check it out: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5lK_iFJsWv4.html

@simranbanwait 2 года назад

bro have font size for ants

@EnricoPortolan 2 года назад

LOL

@Rory-qu4cx 7 месяцев назад

Thanks! For anyone stuck on the Welcome Page - uncomment include /etc/nginx/sites-enabled/*, and anyone stuck on error 500 -> chmod +x each part of the path 'home/ubuntu/..../build'