Dockerizing a React application with Nodejs Postgres and NginX | dev and prod | step by step
HTML-код
- Опубликовано: 30 июл 2024
- In this tutorial we are going to create a multicontainer application which will be running in docker containers.
We will create both the development and production version of Docker files.
Locally we will use a docker-compose file that will run the backend, front-end, postgres and nginx proxy. And you will be able to start the whole construction with one command.
For front-end we're going to use React, for backend we are going to use Node.Js
and we are going to use Postgres to store the data in the database.
We are going to use Nginx for 2 purposes, we will use it as a router in front-of our front-end and Node.js express server, and also we will use Nginx as a HTTP server which will serve our builded React front-end code.
You can find the final source code here: gitlab.com/codeching/docker-m...
In my next tutorial, we will deploy the whole solution on Kubernetes, so stay with me, it will be very exciting :)
00:00 - Intro
01:26 - Arcthitecture
02:15 - Setup project basics
03:25 - Creating the back-end Node.js application
09:12 - Creating the front-end React application
17:56 - Creating the dev env Docker files
20:18 - Creating the docker-compose file
27:15 - Creating the prod env Docker files - build images and push them to Docker hub
31:32 - Summary
------------------------------
My name is László Leber
Webpage: lebersoftware.hu
Facebook: Codeching-11...
Twitter: / codeching
Instagram: / laszlo_leber 
Наука
If you really liked this video, now you can say thank you with the 'super like' button as well, you can find it under my video! Thank you for watching this :)!
Your tutorial is good for those who already know docker and nginx but dont know how to glue all these things up in production.
Good job. Carry on
Thanks! :)
Thank you so much. I was having some trouble configuring nginx proxy requests to the backend in a personal project of mine but looks like this tutorial clears it up. Thank you
Very good to hear if it helped for you :) You're welcome!
excatly what i was looking for
Great video. I really appreciate the content. Great job!
Thank you for your response!
Thx so much for your work!
I really love your tutorial!
I had some problems setting up the client.
I am using react 18 and i had to change some things in App.js to make it work:
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
And also:
Thank you that you shared it! It will be useful for others.
Under rated video. This was really helpful!
Thanks 😊!
Great video, Sir.
Thanks for all the shared info.
Thank you! :)
Is there different configuration doing this tutorial with vue.js because i followed up to this point and I am getting bad gateway. My backend is working but my frontend doesnt seem to expose the port 5173
this was very helpful, thank you
You're welcome! :)
Great videos, very well explained concepts.
Thank you so much!
awesome explanation. thank you💯💯
Thanks! :)
Thank you for your tutorial, I have a question, I have cloned your project and trying to start it, I am using windows and my hot reload is not working, when I make changes and save it reflects inside the container, but no reload happens, not on the front nor on the server.
You're welcome! Yes, I updated the source code of docker compose file. I added CHOKIDAR_USEPOLLING environment variable with true value to the client. In case of React application (Created with CRA) it's the way to restart the application inside the container when we save the code in dev environment. However, the volume is also important, but it's already set up in this project. In case of node js it should be working because the Docker file set up start script "nodemon" already.
Thank you..Very helpful Video....Can you make more videos like this.please
Thank you so much! I will do my best in the future too :)
I'm getting 404 from nginx ..if I reload the page
Thanks for the video! Great explanation. I feel Im missing something though. When you present the architecture, there is an nginx for routing, I dont see the production version. Is it the same as for local? regards
Yes, in prod we have 2 nginx config, one for routing and one for HTTP server to serve the HTTP content. I'm speaking about it from 27:16
Hi, Great video and very informative! I'm having an issue when we run docker-compose up --build though. It loads the nginx page instead of my react app and I cant figure out why not?
The development one or prod? In prod we have 2 nginx config, one for routing and one for HTTP server, check both. Also check the Dockerfile of the client, does it build the React succesfully? But I guess it's something about nginx configurations.
Thanks for the video, I've learnt a lot. I hava a problem which is cors policy. When I tried to register from my front end I see The same origin policy error all the time. I've tried so many configuraitons but still the same. Any suggestion?
Have a nica day!
great tutorial, one thing i didn't understand was the point of the rewrite
Thanks, it's just a rewrite. So when we map the whole application to /api then it could be required if in your application you have route only e.g for '/cars'. When we call /api/cars, then it will call /cars on your application.
Great content. can we also use pm2 with nginx or nginx will be enough for load balancing?
You can use anything that you want :)) But I think nginx could be enough. We are using it in real envs. Of course when we moved to Kubernetes environment, there is an Ingress loadbalancer there above it.
Great tutorial so far. I have one question - why do we need the client/nginx/default.conf for production? Can we not just do this: COPY --from=development /usr/client/build /usr/share/nginx/html.
Thanks. It could work if you just overwrite the index.html there (and copy all the files) and you're ok with the basic nginx configuration. We're creating a new configuration here where you could set many things. I haven't tried just to overwrite the html but it could work however I think it's a better solution if you create an own nginx config too where you can set up things e.g. port in my case. Usually in normal prod we're using port 80 but here I set 3000 inside nginx config just for demo purpose.
@@codeching Thanks for that. That does make sense. And I've finished the other video with K8s (which was fantastic by the way) and I have another question: Lets say we only want to expose the client route to /, and not expose the server under /api like we do in the ingress-controller. How would we achieve this?
Saved me
Good to hear :D
what if we we use webpack as http server for react?
The stack of the applications doesn't matter from the Docker aspect.
is there any way to achieve this without using docker-compose
Yes, there are many ways, but this is the good in docker compose, you can run everything together and it has numerous advantage.
so efficient coding
I tried this but whenever I run "npm start" for the client it compiles successfully but nothing shows on localhost:3000, please any idea what could be wrong?
It could be lot of things. E.g. wrong port mapping, wrong front-end (not running), wrong port for your front-end application, wrong nginx config etc. I can't help you in this in detail sry.
can access front end:- localhost:3050/
Awesome video +++++++++++ 🙂
Thank you! :)))
Why don't we setup nginx for the api as well?
At 23:33 we set it up, or what do you mean?
If you are talking about the production stack, there in case of client we do that because we would like to serve a static html and we are using nginx as a HTTP server in that case. For node it doesn't required, because we are using node server.
But in the global Nginx config we put our node application behind /api route.
@@codeching I see, thanks!
@@codeching How about sockjs-node in nginx? I don't understand why it is there
@@Lindaine It's used to make the web sockets connection be able to connect to dev server., This is the devserver proxy path if you would like to use it. The webpack sends the update messages through a socket to hot reload.
On the playlist the order of the video 7 and video 8 could be changed. It will make more sense if Kubernetes is after docerizing the app.
I tried to edit it but it's hard because I have multiple videos about these topics :) The order is not so important because the videos are mostly random and not all are built in top of the previous one. But I tried to order it a little bit now. Thank you for your response!
@@codeching thank you.
hmm...maybe you can change the speed on the RUclips menu control. if at .50, and still too fast. maybe it's a you issue because I watched this 2.00 and this video was fine.
Hi, there is no speed problem here.
Oh man. you go too fast it's difficult to follow you
Thank you for watching! :) it's a video, maybe you can pause it any time.
@@codeching And I paused many times indeed. It's very informative I did learn a lot.
hmm...maybe you can change the speed on the RUclips menu control. if at .50, and still too fast. maybe it's a you issue because I watched this 2.00 and this video was fine.
in Nginx file you mentioned
"proxy_pass client"
"proxy_pass api;"
but where are you actually mentioning the urls or ports like this?
eg:
server:
container_name: nanomedicine_server
restart: unless-stopped
image: nanomedicine-server-image:1.0.0
build:
context: nanomedicine-backend
target: production
dockerfile: Dockerfile
ports: #outside:inside(container)
- 8080:8080
networks:
- shared-network
depends_on:
- postgres