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

[@Pmarmagne]

When I find myself in coding troubles, Very Academy comes to me, Speaking words of wisdom, Code with me!

[@veryacademy]

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)

[@OurStoryz123]

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

[@buti]

In awe for having all this invaluable content for free. Thanks Zander! When I get a job I'll join the community!

[@veryacademy]

Thank you kindly!

[@peterlilliegeo]

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.

[@gbrachetta]

This is definitely a very welcome video, Zander! Deployment is often neglected in courses or treated lightly. Really appreciate this one!

[@veryacademy]

Glad it was helpful! Will work towards a full deploy template

[@sharifahmed1925]

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

​@@veryacademy​ very informative video. thank you. Have you made a video for final deployment?

[@mdshabbirrr]

The content in the video deserve more likes and view..

[@afterlifeuseven1452]

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]

Hi, glad it was useful. Let me know if there is something missing or any other tutorial suggestions.

[@Djazeiry]

Zander thanks a lot for sharing with us all that knowledge its absolutely fantastic !!!!

[@veryacademy]

Glad you enjoyed it!

[@SoloPython]

thank you so much for all this zander!!! best teacher alive!

[@veryacademy]

You're very welcome!

[@javascriptwithjames810]

Excellent stuff. I followed everything through and it all work perfectly. Now to add some enhancements! ;) Really hoping you continue this series.

[@veryacademy]

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]

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

[@amundeep1]

I really do appreciate this video, every step was easy to follow along with. Perhaps an extension would be to manage django static files?

[@samlopezruiz]

Wow, amazing tutorial! Couldn't have been better and it deserves more likes.

[@esantix]

Definetly!

[@pullya66]

you saved all my nerves, thank you so much, everything is so clear and it works

[@ajitkumarpoolathodiyil6378]

Content is king. Thank you Zander. 🙏

[@rodolfokirchveiga5341]

Woowww!!!!! It worked just perfect! Thanks a lot for the easy explanation.

[@anatolys9203]

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]

Thank you, I have an interesting Django nginx cache tutorial coming up soon

[@leochuks1]

What a great tutorial!

[@omkarmore2198]

Your are doing very good job...love from india ...keep uploading

[@veryacademy]

Thank you so much 😀

[@MrGeomTech]

Thank for sharing these professional methods, go further

[@veryacademy]

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.

[@magetsi_ZW]

Awseome this helped lots, Thank you

[@veryacademy]

You're welcome!

[@ahmedabdelgawad2684]

Very informative vid. Thanks

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

[@davisdimalen3912]

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.

[@amirlevi9893]

Great Tutorial. Thank you for all your hard work, keep it up 😀

[@veryacademy]

Thank you!

[@Chespiritoish]

Thanks it helped me a lot. Amazing Tutorial

[@veryacademy]

Glad it helped!

[@for41]

This guide was perfect. thank you so much! It is exactly what I was looking for

[@VK-hs8qr]

Thanks for this wonderful tutorial

[@sonnix31]

Thank you very much sir 👌👏👏👏

[@bishwobhandari7219]

can you do a video where you deploy this in a real server like redhat or centos? what docker compose file would you use?

[@BaronXOfficial]

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!

[@shivan2418]

Thanks for all the good videos.

[@adriangonzalez7857]

You're so amazing dude, I really needed this video

[@veryacademy]

Glad I could help!

[@Bravemaster3]

Thank you so much for the video. I have a question related to production settings. What do I need to change when Debug is False? Because right now, when debug is false, nothing works. I would guess one needs to add to nginx directives for serving statics, and I tried that without success... I am wondering if it is supposed to work, just that the formating won't be nice? For me the backend doesn't work at all.

[@faridsalmani9484]

Amazing Video --- helped us too much

[@hamzadlm6625]

thank you very much !

[@veryacademy]

Glad it helped!

[@rangabharath4253]

Awesome as always 👍😀

[@veryacademy]

Thanks again!

[@ВладКупный-ч7х]

Ty man , it's very important info for beginners

[@veryacademy]

👍

[@muhammadsharif5526]

Thank you very much appreciated

[@veryacademy]

You are very welcome

[@Ks-oj6tc]

THis is awesome

[@tanbirirfan8463]

very very helpful video

[@veryacademy]

Glad to hear that

[@esantix]

Awsesome explanation!

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

[@aliras2709]

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

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

[@senayamdework3969]

🇪🇹thanks for the amazing video. found it very useful 👍

[@prakharkatiyar5893]

thank you sir it was very helpfull

[@phaniophrero8007]

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]

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]

@@veryacademy i see , at least could you tell me how can i setup the dockerfile and docker-compose.yml for Next.js ?

[@mohammadtabarestani3603]

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?

[@VK-hs8qr]

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

[@МарияПавлова-з4е]

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?

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

[@TheAlibigdeli]

can you make a video about deploying the django project with dockerized on a server or a vps?

[@veryacademy]

Yep, will do an updated Heroku and then Digital Ocean

[@TheAlibigdeli]

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

[@pythongee1114]

This is great. Thank you. I have a query though....after running docker compose up I get the error no module named core.

[@heinou1913]

Thanks!

[@dominikpios6944]

Will you show, how to deploy this kind of app?

[@veryacademy]

Sure, that's coming, we are building towards that.

[@hasibuzzamantonmoy8845]

First! Awesome content as usual

[@veryacademy]

👍

[@junzezhang7360]

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?

[@delta4v]

Can please you make a series or a video about nginx?

[@veryacademy]

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.

[@txcing9296]

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]

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

[@ResonantFractal]

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]

You don't need to copy over the node_modules - just rebuild it on the server?

[@ResonantFractal]

Indeed! I played around and noticed this a while after writing my question. I don't need the modules folder at all! Cheers!

[@creativetech8471]

was i only, who got this is error: can not modify /etc/nginx/conf.d/default.conf (read-only file system?)

[@oauth9728]

Great work, please do quick review on django 3.2 UPDATE

[@veryacademy]

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]

🤣You're a legend!

[@codebytaha]

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]

Hey where are you planning to run this nginx server on heroku?

[@EUU100]

thanks sir, may i ask why a volume was not created for the django backend?

[@MegaJagveer]

Does the volume map your local build output to the container? Or is it the build output of what's run inside the container?

[@samlopezruiz]

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]

Hi Sam, did you answer your question?

[@edchelstephens]

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]

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]

@@veryacademy wow, thank you so much! This is much appreciated. Looking forward to the series. God bless you and your channel!

[@sweetshoez]

Why are you so useful lol

[@nhwhn]

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]

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]

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

[@mmanime9446]

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]

Hello. Try to delete the volume and restart the container

[@luizmatthew1019]

For configuring SSL/TLS from this setup in docker, what would be the best practice?

[@deepdive429]

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]

nginx is not running as root user?

[@esantix]

Any particualar reason build files form React are on a volume and not just inside the container?

[@veryacademy]

no reason - just mixing it up

[@optymalista]

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]

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.

[@neharamakanth6796]

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

[@everdrone97]

Unrelated question: what theme is that?

[@skiliffon]

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]

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]

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.

[@nagarajkalakutagi5717]

Nice

[@kaushaldhungel4773]

Hello. How do I deploy this on Azure using postgres as the database?

[@veryacademy]

Thanks for the suggestion

[@ramiroramos8949]

Hi! great example, what's proxy_set_header Host $http_host? in ngnix-config. Thanks!

[@veryacademy]

have a look here and get back to me if you still need help docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

[@PatrykJagielski]

23:25 can you explain what this last parameter :ro is for?

[@veryacademy]

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

[@tluanga-ruatpuii-pa]

Please do serverless django google cloud deployment

[@webstackagroup6736]

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]

Hi, sorry I was out answering your question in the car. Will take another look.

[@Deeredman4]

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.

[@daniyalbasheer4263]

Unable to find the react/django setup codes used in this tutorial

[@veryacademy]

You and me both! Sorry. Just ask ChatGPT for an example

[@jhoanmartinezsilva2609]

How to deploy in digitalOcean?

[@veryacademy]

What would you like to deploy exactly?

[@webstackagroup6736]

FROM node:15.13-alpine WORKDIR /react COPY . . RUN npm run build

[@veryacademy]

Is it 15.13.0-alpine

[@webstackagroup6736]

@@veryacademy didnt work the same error

[@webstackagroup6736]

its node v 16.15.0 tried that; it isnt working either

[@veryacademy]

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]

@@veryacademy didnt work