Тёмный

Docker | Towards serving React (Nginx) with Django API (gunicorn) 

Very Academy
Подписаться 65 тыс.
Просмотров 49 тыс.
50% 1

This is a docker compose tutorial we take your first steps creating a deployment setup with React and Django running on a Nginx server, supported with gunicorn for Django. Having already created a basic React and Django application, see the link below for repositories, we first build the docker files needed for both Django and React before then building a docker compose file. This tutorial gives you a better understanding of docker volumes and bind mounts as we look at using both tools. We then build our nginx configuration to serve react from the root directory. Finally we expand the nginx configuration to include a proxy to the Django API.
00:00 Introduction and underpinning knowledge
03:36 Download code repo and get started
07:59 Django Dockerfile
09:38 React Dockerfile
12:14 Docker compose
25:55 nginx conf
35:15 Docker volume storage discovery
41:12 Final nginx conf with Django API proxy
Code Repository:
github.com/veryacademy/docker...
🐱‍🏍Would you like to SUPPORT US FURTHER so that we can make even more great content - Please consider joining our members community.
/ @veryacademy
👍SUBSCRIBE to get more free tutorials, courses and code snippets!
/ @veryacademy

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

 

21 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 142   
@Pmarmagne
@Pmarmagne 2 года назад
When I find myself in coding troubles, Very Academy comes to me, Speaking words of wisdom, Code with me!
@veryacademy
@veryacademy 2 года назад
Code up everybody say, When you hear Paul call you’ve got to get it underway, Zander, it’s the code word No matter where you say it at very academy you know you will be heard! (Word up by Cameo)
@buti
@buti 2 года назад
In awe for having all this invaluable content for free. Thanks Zander! When I get a job I'll join the community!
@veryacademy
@veryacademy 2 года назад
Thank you kindly!
@OurStoryz123
@OurStoryz123 3 года назад
Please take me as your discipline, Master! Thank you very much, I roam the whole internet world to find this explanation and your video has helped me a lot
@afterlifeuseven1452
@afterlifeuseven1452 3 года назад
Searched through the web for React/DRF/nginx deployment tutorial on windows machine, your video has been the best fit and most helpful to me! Thank you for uploading this comprehensive video👏
@veryacademy
@veryacademy 3 года назад
Hi, glad it was useful. Let me know if there is something missing or any other tutorial suggestions.
@samlopezruiz
@samlopezruiz 2 года назад
Wow, amazing tutorial! Couldn't have been better and it deserves more likes.
@esantix
@esantix 2 года назад
Definetly!
@gbrachetta
@gbrachetta 3 года назад
This is definitely a very welcome video, Zander! Deployment is often neglected in courses or treated lightly. Really appreciate this one!
@veryacademy
@veryacademy 3 года назад
Glad it was helpful! Will work towards a full deploy template
@sharifahmed1925
@sharifahmed1925 3 года назад
@@veryacademy yes please! I'm learning Django and React and I was intending to learn Docker for deployment. So this tutorial is exactly what I need :) Hope you create more tutorials like this
@robintewolde1992
@robintewolde1992 2 года назад
​@@veryacademy​ very informative video. thank you. Have you made a video for final deployment?
@mdshabbirrr
@mdshabbirrr 3 года назад
The content in the video deserve more likes and view..
@peterlilliegeo
@peterlilliegeo 8 месяцев назад
Sir you are a godsend. I've spent the past month struggling through various forums and websites trying to decipher the mysterious world of Django and Docker web serving. Your series has truly saved me so much frustration. I appreciate you.
@javascriptwithjames810
@javascriptwithjames810 2 года назад
Excellent stuff. I followed everything through and it all work perfectly. Now to add some enhancements! ;) Really hoping you continue this series.
@veryacademy
@veryacademy 2 года назад
Thanks James, meaning to get this all deployed next. It is an endless series really. Any suggestions what you would like to see next?
@rashidaliev9460
@rashidaliev9460 2 года назад
@@veryacademy Hey! First of all, thank you so much for all your efforts! You are helping so much to me! I would be even more grateful to you, if you could show and explain an example of a production level project that kind of brings together all the notions that you showed of "Docker Mastery with Django". I mean one project with Celery, PosgtreSQL, DRF, React.js, pgAmin -> All in one! And finally guide, how to deploy it on a server. Thank you again and again!
@for41
@for41 2 года назад
This guide was perfect. thank you so much! It is exactly what I was looking for
@rodolfokirchveiga5341
@rodolfokirchveiga5341 3 года назад
Woowww!!!!! It worked just perfect! Thanks a lot for the easy explanation.
@ajitkumarpoolathodiyil6378
@ajitkumarpoolathodiyil6378 Год назад
Content is king. Thank you Zander. 🙏
@pullya66
@pullya66 2 года назад
you saved all my nerves, thank you so much, everything is so clear and it works
@Djazeiry
@Djazeiry Год назад
Zander thanks a lot for sharing with us all that knowledge its absolutely fantastic !!!!
@veryacademy
@veryacademy Год назад
Glad you enjoyed it!
@anatolys9203
@anatolys9203 2 года назад
wow! that's a great tutorial! thank you very much for taking time to do it. it is very clear and useful! thank you!
@veryacademy
@veryacademy 2 года назад
Thank you, I have an interesting Django nginx cache tutorial coming up soon
@DarkMatter-zk3bo
@DarkMatter-zk3bo Год назад
This is extremely helpful and extremely well put together. Thank you so much for providing such videos for free. Will there be a tutorial on how to take this setup and apply it onto a server in the cloud?
@amirlevi9893
@amirlevi9893 2 года назад
Great Tutorial. Thank you for all your hard work, keep it up 😀
@veryacademy
@veryacademy 2 года назад
Thank you!
@adriangonzalez7857
@adriangonzalez7857 3 года назад
You're so amazing dude, I really needed this video
@veryacademy
@veryacademy 3 года назад
Glad I could help!
@omkarmore2198
@omkarmore2198 3 года назад
Your are doing very good job...love from india ...keep uploading
@veryacademy
@veryacademy 3 года назад
Thank you so much 😀
@VK-hs8qr
@VK-hs8qr 2 года назад
Thanks for this wonderful tutorial
@shivan2418
@shivan2418 2 года назад
Thanks for all the good videos.
@MrGeomTech
@MrGeomTech 2 года назад
Thank for sharing these professional methods, go further
@veryacademy
@veryacademy 2 года назад
Thanks, I will swing back over to this series soon. Nginx isn't my specialism but will get some ideas together to try and push this forward a bit. Think there is a good number of people who would like to see an Nginx series.
@BaronXOfficial
@BaronXOfficial 3 года назад
Hey Very Academy! First of all, thank you for putting together this great tutorial (and hopefully rapidly complete series :D) So far, excellent work! I had a quick question regarding the Git Repo - I cloned the entire repo and was searching through - the section labeled Part 1 does not exactly match this tutorial, it seems that the directory inside 6 -> starting repository is most exactly the place where this tutorial starts, namely that there is both a Django file and React file. I'll follow this tutorial and use that directory, just wanted to ask about this as it might be confusing for some. Really excited for this series, such a useful thing to learn and at such a great time!
@rangabharath4253
@rangabharath4253 3 года назад
Awesome as always 👍😀
@veryacademy
@veryacademy 3 года назад
Thanks again!
@Chespiritoish
@Chespiritoish 2 года назад
Thanks it helped me a lot. Amazing Tutorial
@veryacademy
@veryacademy 2 года назад
Glad it helped!
@senayamdework3969
@senayamdework3969 2 года назад
🇪🇹thanks for the amazing video. found it very useful 👍
@user-cn9ue7ff6j
@user-cn9ue7ff6j 3 года назад
Ty man , it's very important info for beginners
@veryacademy
@veryacademy 3 года назад
👍
@magetsi_ZW
@magetsi_ZW 6 месяцев назад
Awseome this helped lots, Thank you
@veryacademy
@veryacademy 6 месяцев назад
You're welcome!
@faridsalmani9484
@faridsalmani9484 2 года назад
Amazing Video --- helped us too much
@ahmedabdelgawad2684
@ahmedabdelgawad2684 Год назад
Very informative vid. Thanks
@esantix
@esantix 2 года назад
Awsesome explanation!
@sonnix31
@sonnix31 Год назад
Thank you very much sir 👌👏👏👏
@hasibuzzamantonmoy8845
@hasibuzzamantonmoy8845 3 года назад
First! Awesome content as usual
@veryacademy
@veryacademy 3 года назад
👍
@muhammadsharif5526
@muhammadsharif5526 3 года назад
Thank you very much appreciated
@veryacademy
@veryacademy 3 года назад
You are very welcome
@prakharkatiyar5893
@prakharkatiyar5893 2 года назад
thank you sir it was very helpfull
@mohammadtabarestani3603
@mohammadtabarestani3603 2 года назад
Thank you for your very informative tutorial, it was very helpful, I kind of new to nginx and I want to run an application with django and vuejs but I want to also use celery and redis for my asynch tasks...can you explain to me how can I dockerize all of this together?
@aliras2709
@aliras2709 2 года назад
Thank you for a great tutorial, Can you make one going a little bit further about adding django static and media files for development and production with docker and maybe explain about the permissions for different users through out docker, i was practicing and couldn't figure out how they work for example in development the images dont upload and get permission denied but the new user have permissions to the folder and so on...
@SoloPython
@SoloPython 3 года назад
thank you so much for all this zander!!! best teacher alive!
@veryacademy
@veryacademy 3 года назад
You're very welcome!
@amundeep1
@amundeep1 8 месяцев назад
I really do appreciate this video, every step was easy to follow along with. Perhaps an extension would be to manage django static files?
@user-yp7ue8tq2n
@user-yp7ue8tq2n 2 года назад
Great tutorial, thanks! I have to deploy the same web-server (backend on django and frontend on react), but using ubuntu. Will be the steps to do it the same as in your guide?
@tanbirirfan8463
@tanbirirfan8463 2 года назад
very very helpful video
@veryacademy
@veryacademy 2 года назад
Glad to hear that
@Ks-oj6tc
@Ks-oj6tc Год назад
THis is awesome
@hamzadlm6625
@hamzadlm6625 2 года назад
thank you very much !
@veryacademy
@veryacademy 2 года назад
Glad it helped!
@bishwobhandari7219
@bishwobhandari7219 2 года назад
can you do a video where you deploy this in a real server like redhat or centos? what docker compose file would you use?
@MegaJagveer
@MegaJagveer 3 года назад
Does the volume map your local build output to the container? Or is it the build output of what's run inside the container?
@VK-hs8qr
@VK-hs8qr 2 года назад
It would be nice if you create a docker-compose video for nextjs + django cause there is not any tutorial for this on the web . Nextjs needs the API to be run on it's build process and this is the challenging part (django DRF must be running before nextjs build) .
@bersekiel
@bersekiel Год назад
Very good and educative video. Thank you very much for doing this. Although seems like in linux the method is different I think because for some reason my localhost:8000/api/ is having problems with the static files. It's trying to load files in/static/rest_framework but every file responses with "Page not found (404)" even though debug=True, kinda strange.
@ResonantFractal
@ResonantFractal 3 года назад
Thank you for the great content! I'm new to react and nodejs. Quick question. Is it enough to just copy over the src, public, and node_modules/.bin folders along with the usual package jsons, to serve webpages? I've added this adjustment to my deployments and there is quite some time savings not having to copy the zillions of things inside the node_modules folder. Is there a limitation to this though? Or can I use this "optimization" in future deployments without worry?
@veryacademy
@veryacademy 3 года назад
You don't need to copy over the node_modules - just rebuild it on the server?
@ResonantFractal
@ResonantFractal 3 года назад
Indeed! I played around and noticed this a while after writing my question. I don't need the modules folder at all! Cheers!
@pythongee1114
@pythongee1114 2 года назад
This is great. Thank you. I have a query though....after running docker compose up I get the error no module named core.
@heinou1913
@heinou1913 2 года назад
Thanks!
@adneneguessoum2773
@adneneguessoum2773 Год назад
hi, thank you very much for this. however, cors seem not happy at all about this setup and systematically rejects fetching from the nginx server. should i add "localhost" to the cors policies in django core.settings ?
@codebytaha
@codebytaha 2 года назад
First of all thank you very much for your valuable tutorials, they are great. I have a question, how would you configure a project where Django (rest framework) is an indepandant API (let's say in Heroku) and consumed by an independant React app (let's say in netlify) using Axios ,how would you approach this with Nginx (to be able to display images, nothing fancy just statics), i tried and failed miserably to get images to display, again thank you
@haydencordeiro
@haydencordeiro 2 года назад
Hey where are you planning to run this nginx server on heroku?
@EUU100
@EUU100 2 года назад
thanks sir, may i ask why a volume was not created for the django backend?
@luizmatthew1019
@luizmatthew1019 2 года назад
For configuring SSL/TLS from this setup in docker, what would be the best practice?
@davisdimalen3912
@davisdimalen3912 4 месяца назад
Hi Zander. I can't thank you enough regarding how much this video helped me. I just got one issue it seems like whenever I do changes to my react files the previous build persists. No matter rebuild or decaching I did doesn't work. Can you have a look and test if it does the same on your local? I've done some experiment and what works is if I manually delete the build folder inside the frontend container and then do a rebuild. It works but since I need to setup github actions this solution will never work for me.
@mmanime9446
@mmanime9446 3 года назад
thank you for this very helpful video, I have one small issue when I change some content in my react app these changes not happened even I restart the container
@movielinks3991
@movielinks3991 2 года назад
Hello. Try to delete the volume and restart the container
@sweetshoez
@sweetshoez Месяц назад
Why are you so useful lol
@ningguo1932
@ningguo1932 Год назад
Hi, thanks very much for the tutorial! I encounter a problem when I used your final code. after I execute "docker-compose up", the react frontend will exit (exited with code 0), can you please help me with that?
@samlopezruiz
@samlopezruiz 2 года назад
Quick question: How is the port routing done to connect to a local mysql db form the django container? I had to create my database in AWS (mysql) and change the db django settings to get my app working.
@veryacademy
@veryacademy 2 года назад
Hi Sam, did you answer your question?
@optymalista
@optymalista 3 года назад
Hi, so django and react are runnuning on the same domain and csrf_token will work without needing to add CSRF_TRUSTED_ORIGINS etc. ?
@veryacademy
@veryacademy 3 года назад
Hi Pawel, sorry not to get back to you - if only everything was that simple. I will be deploying this soon so will take you through the configuration.
@nagarajkalakutagi5717
@nagarajkalakutagi5717 2 года назад
Nice
@creativetech8471
@creativetech8471 3 года назад
was i only, who got this is error: can not modify /etc/nginx/conf.d/default.conf (read-only file system?)
@junzezhang7360
@junzezhang7360 2 года назад
Hi, Thank you!!! I dockerize my app in this way and it cannot hot reload. Could I know is it an issue with this method or I did something wrong?
@deepdive429
@deepdive429 3 года назад
Hello thanks for the tutorial. I'm facing this issue info: can not modify /etc/nginx/conf.d/default.conf (read-only file system?) Any help will be appreciable.
@veryacademy
@veryacademy 3 года назад
nginx is not running as root user?
@ramiroramos8949
@ramiroramos8949 3 года назад
Hi! great example, what's proxy_set_header Host $http_host? in ngnix-config. Thanks!
@veryacademy
@veryacademy 3 года назад
have a look here and get back to me if you still need help docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/
@edchelstephens
@edchelstephens 2 года назад
Wow! Thank you for this awesome tutorial! Liked and Subscribed! :) Can you also do a video on deploying this app in AWS using the same dockerized containers approach? Can you do in 2 parts? 1. All in one ec2 instance 2. Separate servers - Django app server in it's own ec2 instance - Database on a separate instance - Static files and media files on s3 bucket - React server in it's own ec2 instance - and how can you hook them up together in an nginx server? Thanks in advanced!
@veryacademy
@veryacademy 2 года назад
I will most definitely be moving onto the content you suggested. I am working on some Nginx tutorials this week, this will be the start of us moving forward to deployment
@edchelstephens
@edchelstephens 2 года назад
@@veryacademy wow, thank you so much! This is much appreciated. Looking forward to the series. God bless you and your channel!
@esantix
@esantix 2 года назад
Any particualar reason build files form React are on a volume and not just inside the container?
@veryacademy
@veryacademy 2 года назад
no reason - just mixing it up
@neharamakanth6796
@neharamakanth6796 2 года назад
I am facing "standard_init_linux.go:219: exec user process caused: no such file or directory " while trying to run docker-compose in django project, could you please provide some pointers for resolving this
@phaniophrero8007
@phaniophrero8007 2 года назад
Hi , so now we can deploy this to our server , but we don't need to add our domain name to the nginx.conf file ? And by the way could you please tell me how would that setup be for a Django GraphQL and Next.js project ? Thank you I really appreciate the video !
@veryacademy
@veryacademy 2 года назад
Hey, lots to do! This was just an intro into this area which turns out to be very popular. Much to do, I will follow this up eventually.
@phaniophrero8007
@phaniophrero8007 2 года назад
@@veryacademy i see , at least could you tell me how can i setup the dockerfile and docker-compose.yml for Next.js ?
@TheAlibigdeli
@TheAlibigdeli 3 года назад
can you make a video about deploying the django project with dockerized on a server or a vps?
@veryacademy
@veryacademy 3 года назад
Yep, will do an updated Heroku and then Digital Ocean
@TheAlibigdeli
@TheAlibigdeli 3 года назад
@@veryacademy can you please add cpanel deployment too, i have been using it for quite long time for deployment its easy to work but the only problem is using it with integrated git system to deploy it every time automatically. Can ya consider this one too
@oauth9728
@oauth9728 3 года назад
Great work, please do quick review on django 3.2 UPDATE
@veryacademy
@veryacademy 3 года назад
Hi Oauth, there isn't really much to talk about to be honest. By the time I made it you could read it 10 times. 😂
@oauth9728
@oauth9728 3 года назад
🤣You're a legend!
@delta4v
@delta4v 3 года назад
Can please you make a series or a video about nginx?
@veryacademy
@veryacademy 3 года назад
Would love to Jason, it is a topic that desperately needs more tutorials. I have my hands full at the moment, but I would be excited to start at some point.
@everdrone97
@everdrone97 2 года назад
Unrelated question: what theme is that?
@skiliffon
@skiliffon 3 года назад
I noticed that the django admin does not show up correctly when using this setup with gunicorn. It appears the static files are missing. What would be the right approach to also deploy the django static files ?
@veryacademy
@veryacademy 3 года назад
Hi Wadii. You have a number of options. For example - do you want to even host your admin on your production site - seems like a good idea to run the admin somewhere else. Else maybe host via AWS or it shouldn't be too difficult to just configure in the settings - static files.
@skiliffon
@skiliffon 3 года назад
I solved the issue. I had to use -.django:/django for the nginx volumes, which maps my local django dir to the same on the nginx container, otherwise, the nginx container does not have any static files. Seems my original volume setup was not doing what it was supposed to - not sure why. I also added autoindex on; in the nginx conf: location /static/ { autoindex on; alias /django/static/; } This seems to work, but as you mentioned, may not be the best approach. Time to learn about cdn.
@PatrykJagielski
@PatrykJagielski 3 года назад
23:25 can you explain what this last parameter :ro is for?
@veryacademy
@veryacademy 3 года назад
First of all thank you for watching the tutorials so intently. That is one of the 2 big questions here - the other why try and make a react container in the first place - that is just for a visual learning purpose, all we need to do is build the react app locally and code the folder across to the nginx www folder. In short - the container has read only access to our conf file. Here we are making a bind between our conf file and the default conf - ./nginx/nginx-setup.conf:/etc/nginx/conf.d/default.conf with :ro (the text is not copied to the file for example) without :ro you will see the text from the our conf is copied across to the default.conf (remember the default.conf is the file that nginx is trying to read) if you like to have a look in the nginx terminal apt-get update apt-get install vim-tiny vi - etc/nginx/conf.d/default.conf
@kaushaldhungel4773
@kaushaldhungel4773 3 года назад
Hello. How do I deploy this on Azure using postgres as the database?
@veryacademy
@veryacademy 3 года назад
Thanks for the suggestion
@txcing9296
@txcing9296 2 года назад
Are you not possible to teach me how to deploy this app to Heroku? I have been watched your video " Django on docker to Heorku " and "Django and react on local to Heroku".
@veryacademy
@veryacademy 2 года назад
Hi Txcing. I have not made a tutorial so far on deploying Django with React. My focus is currently on the ORM content. I will no doubt be making some more tutorials on deployment in the future. Give this a go dev.to/mdrhmn/deploying-react-django-app-using-heroku-2gfa
@tluanga-ruatpuii-pa
@tluanga-ruatpuii-pa 3 года назад
Please do serverless django google cloud deployment
@dominikpios6944
@dominikpios6944 3 года назад
Will you show, how to deploy this kind of app?
@veryacademy
@veryacademy 3 года назад
Sure, that's coming, we are building towards that.
@nhwhn
@nhwhn 2 года назад
One question, There is this Nginx Error with the docker-compose.yml it returns, "/nginx/nginx-setup.conf" to rootfs at "/etc/nginx/conf.d/default.conf" caused: mount through procfd: not a directory: unknown: Are you trying to mount a directory onto a file (or vice-versa)?" how do we fix this??? I've been trying to figure this out for 3 days now
@veryacademy
@veryacademy 2 года назад
There are a crazy amount of reasons why this is. It is difficult to suggest, you probably have already been through stack overflow. Is this a problem you are experiencing with the code in the repository? If so what os and docker version you using? stackoverflow.com/questions/45972812/are-you-trying-to-mount-a-directory-onto-a-file-or-vice-versa
@nhwhn
@nhwhn 2 года назад
@@veryacademy Thank you for replying. For some reason wsl version was set to 1, and setting it to 2 solved everything. Thank you once again
@webstackagroup6736
@webstackagroup6736 2 года назад
failed to solve with frontend dockerfile.v0: failed to create LLB definition: dockerfile parse error line 1: FROM requires either one or three arguments Service 'backend' failed to build : Build failed
@veryacademy
@veryacademy 2 года назад
Hi, sorry I was out answering your question in the car. Will take another look.
@jhoanmartinezsilva2609
@jhoanmartinezsilva2609 2 года назад
How to deploy in digitalOcean?
@veryacademy
@veryacademy 2 года назад
What would you like to deploy exactly?
@Deeredman4
@Deeredman4 2 года назад
I don't believe that the diagram at 16:16 is saying that "volume" stores in memory I think it's saying that "volume" stores in "Docker area" I think it's saying that "tmpfs mount" is storing in memory.
@webstackagroup6736
@webstackagroup6736 2 года назад
FROM node:15.13-alpine WORKDIR /react COPY . . RUN npm run build
@veryacademy
@veryacademy 2 года назад
Is it 15.13.0-alpine
@webstackagroup6736
@webstackagroup6736 2 года назад
@@veryacademy didnt work the same error
@webstackagroup6736
@webstackagroup6736 2 года назад
its node v 16.15.0 tried that; it isnt working either
@veryacademy
@veryacademy 2 года назад
stackoverflow.com/questions/62388139/dockerfile-parse-error-line-1-from-requires-either-one-or-three-arguments-but it could be something crazy like this
@webstackagroup6736
@webstackagroup6736 2 года назад
@@veryacademy didnt work
Далее
Using docker in unusual ways
12:58
Просмотров 418 тыс.
Making Minimalist Web Server in C on Linux
10:23
Просмотров 235 тыс.
Building a Django Docker Container
34:11
Просмотров 22 тыс.