Docker 101 - Dockerize your React app and serve your build artifacts through Nginx
HTML-код
- Опубликовано: 10 июл 2024
- 🔥 Today's topic 🔥
Full hands-on tutorial about: How to put your React App into a docker image, run your app as a container and finally serve your static build artifacts through a Nginx webserver, which of course, is also dockerized.
#docker #dockertutorial #cloudversity
Feel free to ask any questions in the comments down below and give me your honest feedback.
⏰ Timestamps ⏰
0:00 Agenda & Intro
0:26 Pre-Requisites
2:25 Create React App
4:56 Create a Dockerfile
9:30 Build React Docker image
11:40 Run the React App in a container
12:55 Create a Dockerfile for production
16:45 Comparison of React and Nginx Docker images
19:15 Like and Subscribe
🔥 GitLab Repo 🔥
► bit.ly/2MsWsZj
🔥 Support 🔥
👉🏼 Buy me a coffee: bit.ly/36vJhh4
👉🏼 Become a patreon: bit.ly/36wXquA
🔗 cloud-versity.com 
Наука
What an amazing video!
Great video thanks. I've watched a few on this subject and yours is the clearest by far. Keep up the good work.
As a junior really this is helping me, after an interview, the recruiter advised me to learn docker, I got any idea about it so and realized that it's very important, I started to read and did online courses, but this topic was still terrifying me, practically this is the first video I watched till the end on youtube about docker, definitely I'm your new subscriber. so please don't forget to cover more fundamentals for us beginners, btw if you have some good documentation it will help a lot.
great content
Love this!
Awesome! Thanks!
Glad I could help!
Really useful! Thanks a lot
I'm glad that it was interesting for you :)
Awesome video ++++++++++++++++++ 🙂
Thanks a lot. Best explanation
Thank you for the great feedback :)
Why did you stop making videos ? You are probably one of the best teachers out there on youtube. Hope you did not die or something.
Hej dude, I'm still alive. Many thanks for your compliment, that was awesome!
I can call myself a father now, this is what consumes most of the time right now. I really want to come back and create more content, but it may takes a couple of months until I've enough time again to do so ;)
@@CloudVersityOfficial Thats good to hear. I am sure you are doing as good a job being a father as you did being a teacher :)
Hey CloudVersity, thanks a lot & keep up the good work :) This tutorial really helped me through the process. No questions open.
In addition, for me it would be helpful if you pasted the commands in the description, so I don't have to rewatch the video to find them again.
Thank you :) I'll keep that in mind and try to add the commands next time.
Good video 👏
Please upload higher quality next time
its just 5 minutes of the video I have seen, and I'm all confident to HIT/SMASH/BLOW the LIKE button. I am also dying to SUBSCRIBE the Channel which I will do by the end of the video, coz I want to be extra sure about the channel...
Hope this video teaches me DOCKER FINALLY... kudos Cloud Versity
Wow, thank you for your great feedback!
Let me know if you are missing something in that video or if you want to have some more in depth videos about Docker in general.
Thanks for helping me grow a little bit more by subscribing :)
Hey, thanks for the video, but with that nginx setup if you have multiple routes in the app and you go to some route and refresh the page you will get 404. To fix this an nginx.conf is needed.
I just recognized, that I linked to the wrong Twitter profile in this video :D
🔥 Social Media 🔥
Twitter ► twitter.com/cloud_versity
Instagram ► instagram.com/cloudversity
Thanks brother, but can you please make complete series on Kubernetes and docker?
Hi there, I could but there are a lot of resources already out there. Are you interested in a specific part or a real Docker and Kubernetes 101 starting with the basics?
Let me know, if you have any questions or if you want me to cover a specific topic in one of the upcoming videos :)
⏰ Timestamps ⏰
0:00 Agenda & Intro
0:26 Pre-Requisites
2:25 Create React App
4:56 Create a Dockerfile
9:30 Build React Docker image
11:40 Run the React App in a container
12:55 Create a Dockerfile for production
16:45 Comparison of React and Nginx Docker images
19:15 Like and Subscribe
Could you create a video showing how to add ssl? Also could you make a video about deployment to AWS ecs fargate?
Hello I have a question.. This docker production file, is it any different from docker compose ? / better ? Because I have seen other videos with docker compose instead so I am a bit confused now..
Thank you for the video, I learned a lot !
It is just a Dockerfile ;) I just named it like that so it's clear when to use what. docker compose is different, it relies on an already existing image or points to a Dockerfile which builds the image. In a compose file you you can start multiple services at once, a Dockerfile alone is just there to build an image. Think of this little app, maybe it needs a database in the future? You need to build the image with the Dockerfile but with a compose file you can start both, the app and the db, at the same time, stop them, delete them etc. Hope that helps :)
After running docker im getting error ERR_EMPTY_RESPONSE
Helloo, when you say a static page do you mean a landing page? What if I want to host in the server a dynamic webpage that interacts with the user? Also how can the port of Nginx be changed to the domain? What else should be considered to deploy a real web application with nginx? Thanks!
Urgh, I think my wording was incorrect here. I meant to say that we will serve static files, so those files located at /usr/share/nginx/html. So css, html and ofc your fancy javascript stuff. You can build a full blown dynamic page with this.
Not sure what you mean by "changing the port of nginx to the domain". If you'd like to host the production build, you will need a server, a domain pointing to the server and probably a SSL cert. That would be the next step but it's fairly straight forward. If you don't like to mess around with this, there are also some platform which will help you a lot serving your content really fast like: heroku and netlify. But if you want to use those providers in the first place, you don't need Docker.
My build fails at COPY --from=builder /app/build /usr/share/nginx/html with the message "failed to compute cache key: failed to walk /var/lib/docker/tmp/buildkit-mount783879661/app: lstat /var/lib/docker/tmp/buildkit-mount783879661/app: no such file or directory". Any ideas on how to fix this ?
Hej dude,
did you change anything in the prod.Dockerfile? Maybe you changed the "workdir" in line 3 on accident / purpose, so there is a missmatch of the directories in the copy statement later on. Just did a clean checkout and it still works flawlessly.
@@CloudVersityOfficial Yh, I just looked at it again and I've seen the issue. Came from a mismatch in workdir name and nginx. It builds now