Nginx Reverse Proxy | Django Deployment | Docker | Staticfiles

hello my name is xander and welcome back to the  nginx mastery series this is the fourth tutorial   in this video series if you haven't found the  other tutorials then just head over to the main   home page go to playlists and you'll find a  tutorial series called nginx mastery and from   there you can then start from the very beginning  of this tutorial series if you haven't watched   any of the previous tutorials don't worry you  can start from this tutorial there is a link   in the video description which will take you  to the code or the base code so that you can   follow along in this tutorial in this tutorial  we take a look at using nginx as a reverse proxy   we are going to be utilizing the django framework  as a way of demonstrating this functionality but we aren't going to solely focus on actually  deploying django here but it is going to be part   of this process so here in this tutorial then  nginx what we focus on is the idea of building   a reverse proxy so i will try and give you some  background information although we're using the   django framework here this can apply to other  technologies some other topics that we need to   understand in order to set this up how to remap  urls to different directories other than the   root location so here in the django project we are  going to need to set up static files so that gives   us an opportunity to understand that now because  we are using a reverse proxy that allows us to   understand a little bit about the upstream module  so we go through that and then in addition to that   django also provides a default admin site now we  might want to protect that from others accessing   it so here we just go through the  basics of ip address location security   django's primary deployment platform is wsgi the  python standard for web servers and applications   so therefore we are going to need a wsgi server  in this case we're going to be utilizing g unicorn   so let me just take you through a visual  representation of what we're going to be   developing in this tutorial so we have a browser  here it's an optional step but what we're going   to do is build a dns server locally so we're going  to send a signal over to that we'll have a domain   name whatever that might whatever you might  want to choose there and that's going to send   a signal back so now we have the ip address of our  server our web server so we then fire off a signal   then to our nginx server so these boxes here  refer the outer box is referred to containers   that we're going to be building in docker so  we send our signal over to our nginx server   and then this is going to act as a reverse  proxy in this scenario what our proxy server   is going to do so our reverse proxy server  is going to do here is going to pass messages   over to in this case g unicorn so g unicorn then  is or green unicorn is a python wsgi http server   and that is essentially going to be able  to communicate with our django application both g unicorn and django are  going to be installed on the same   container here and essentially what's going to  happen is that http requests are going to be   passed into g unicorn and then that's going to  be allowed to then communicate with the django   application and then the django application can  then send back data through g unicorn over to our   server here our nginx server back to the browser  and that's how the web page is going to be served   so like many web pages or many websites we are  going to have static files javascript files   css files and images maybe so in this case static  files can be served directly from our nginx server   so we are going to store the static files  on the nginx server or in the container so   we aren't going to need to necessarily go  through the g unicorn server here to access   those files so we will in addition   set up the static files on the nginx server  here to be served directly from this container   so there is a link in the video description  that would take you over to the nginx series   repository and then what you're going to need is  the part 3 so we're going to work from the part   three code and build upon that so there are some  there are some code that's already been developed   some containers etc so if you do want to go  back and have a look at that please go back   to the previous tutorials and learn how to develop  that but we will be working from that and you can   work from this tutorial onwards uh so you don't  necessarily need to go back to understand what   it is we're doing in this tutorial but it can  be handy to have that underpinning knowledge   if you are following along with the code  this is what we've just downloaded from the   third tutorial repository so we have a  folder for dns and a folder for nginx   we have the commands file which i just throw in  a load of commands that we've utilized throughout   the tutorial series so far just makes it easy and  handy for you and then the doc compose file so   that can just consist at the moment of an nginx  instance and also we created a local dns server   you can see from the docker compose file  we're utilizing a few different volumes   that's just making it easy for us to actually  manage our instances of nginx and dns to have   the actual files locally here so this is why we're  using volumes here to mirror across if you're not   familiar with volumes in docker essentially we're  just going to mirror across these folders that   are defined here over to our container so we can  easily access critical or core components that we   might want to change or configure as we go through  the tutorial so this isn't necessarily something   that you would have there if you were going to  deploy this to your server just for development   so let's get started we're going to create  a new folder for our django installation   so we're just going to call this django and  then we'll go ahead and create a new virtual   environment so here on my mac  so windows is the same command   so create a virtual environment if you're not  too sure how to create virtual environments   there are individual tutorials on the site  on the youtube channel just type user search   in the channel to search for vmv and that should  take you to windows or mac installation guide   right so on a mac here i need to type in  source i don't need to do that on windows   so let's go into bin and activate again if you're  on windows it's going to be vamp and then source   and then activate so i think it's source  and activate top of my head so let's get   that activated so we have that now activated and  then we can go ahead and just pip install django   so we're not going to build a django project  here we're just going to use the default   uh so now we have django installed let's go  ahead apologies if you can't see my terminal there we go you see the whole terminal now uh so  now we've got that let's go ahead and actually   go inside of this folder so we're going to  need to change directory into this folder   and then we'll go ahead and start a  new django project so python 3 start oh   actually apologies django admin uh start  project and we're just gonna call this demo   okay so don't forget the full stop to denote  the fact we want to start the project inside   of the folder which we're currently inside  okay so we've now got a new project so let's   go ahead we've got the manage.pi file now  so we can utilize that to just migrate okay so that just basically sets up the database  and all the other tables that are needed to get   started though it's not necessarily needed  we've done that and in addition to that what   we're going to do is create our static files so if  you're not familiar static files are essentially   um they can be css files or javascript files or  images static files that the web page might need   now we're just going to get them auto generated  because if we are going to be utilizing the admin   panel in production then we are going to need to  have all the css files etc here in development   what's happening here is that all  those css files are in the actual django installation um that we downloaded so  if we go into vamp here for example and we're   looking for project in the in the library here go  to django and we went to admin we could find all   the css files there so that's what we downloaded  initially when we installed django so in local   environment that's what's going to be utilized  but when we go into development we are going to   want to copy those across into a static folder so  that we can utilize them on our deployment server our production server sorry so let's go ahead and  do that so here we're going to type in python 3d   management pi and then the command for this is  collect static so we'll go ahead and do that just uh type yes no problem so what we should have  now inside of our folder is a static folder um   oh we don't have a static root  apologies we need to do that first   so let's go ahead and do that so inside of our  django project apologies go to settings and we   just need to set up our static route now you can  see here that static url has already been set up   so we can add a slash here if we like uh but we  need to set up the static route first apologies   so what we have here essentially is this  is the url that's going to be utilized to   access the static folder but in actual fact  it's not going to be actually stored in a   folder called static uh the actual static files  are going to be in a folder called static files   they don't have to be but this is just the default  so what we need to do is also just define uh   exactly where to find the files on the actual  on the system so that's going to be the base   directory which is defined at the top of this file  and then slash and then we're going to create a   folder called static files and that's just the  default folder that's created in django static   so files there we go so now we have that in place  apologies we can now go ahead and run collect   collect static and you can see that we now  have this static files created with our css   fonts images and javascript and just by default  like i said that's needed for the admin panel   or sorry the django admin site because we are  working towards the idea of actually deploying   uh let's go ahead and set up a new folder here and  let's create our environment variables so inside   of here um we might have multiple environment  variables so one for development one for   production and so on we'll just create a new file  here i'm just going to call this development.emv and inside of here i'm going to set up  some different variables so for example   we could set up a secret key that would be one  thing maybe we set in our environment variables   and if you're not familiar with environment  variables this allows us to essentially remove   some of the critical or sensitive information  that would be found in our settings file because   anyone if anyone were to kind of break into  our website and they knew that we're using   django potentially that's the first place to  look for some information that they could use   to really perform some damage and so what we're  trying to do here is just hide the secret key   and also what we can do is define or redefine the  allowed hosts and also set the debug for example   so inside here we're going to set the secret  key we're going to set the allowed hosts   and then also let's change a debug or  define debug okay so secret key then   i'm just going to copy and paste a random  secret key i think that the project is using   allowed hosts so there's a few different allowed  hosts maybe that you want to set up here so   we're using the name and space so name and space  so you can see here i've defined the localhost   and we're going to be utilizing a domain called  main.com through our dns server that we're going   to set up locally so we're going to set that  to and that's pretty much it there so let's   go back to the top let's just get rid of  this and we're going to need to import os   and then we'll go ahead and change  some of these different settings here   so the secret key so now we're utilizing the  secret key in our environment variable so   we're going to need to define the fact  we're doing that so os dot empire on   environment.get and then we  just need to find our secret key so we're doing secret secret key there we go  okay so in addition to that we also set up   a debug and a loud host so uh let's just do the  allowed host first so they were separated by   um inside of here they're separated by  spaces so we get and then allowed posts and then what we'll do is a split okay so that will then be utilized in the allowed  house set that up nicely for us and then the debug   here we're going to be utilizing integers  instead of true or false so os dot environ   again dot get and then we're going to say debug  and then we'll set the default to zero there we go   now by default this won't work locally because  we've made these changes here and it won't pick up   the environment variables locally so it will need  to be worked and utilized within our container   so we were going to try it out but obviously we  can't at this point it is this is being set up   to be utilized in our container so what we need  to do now then is that's pretty much it for that   let's uh go back into our docker compose file and  i'm just initially i'm just going to highlight or   comment out sorry um everything we've done so far  and i'm just going to set out a new service called   web or django whatever you like and then next up we'll go for a build so here i  for some reason i use contacts i don't have to   you could do it directly after  the build statement there so   what i'm going to do here is i'm  going to create a new docker file inside of the django folder and inside of  here i'm going to just define what's going   to be needed to get this service running  and it's really quite simple so from   python uh we'll be on three  point it should go for 3.9 uh alpine so we're going to set our work in directory inside of a container so it's going to be user src  app and then we need to set up some environment   variables environment settings just to speed  things up here because i probably said this   many times if you've looked at i watched any  of the other tutorials kind of irrelevant for   this tutorial but we've got some different  environment variables so we're going to   run and install an upgrade and then we're  going to copy across a requirements file   to the container and then run that so that we  can run django in the container and then we're   just going to copy everything across to that  container so we are using the working directory   so everything's going to be copied across to  there so that's pretty much it for that we do   need to remember to create a requirements file now  here i'm inside of this folder the django folder   so make sure you're in the right directory  before you do this but i'm going to run   uh i'm going to run pip freeze  to create a requirements file okay so that basically just defines the packages  that are gonna be needed in order to run django   in the container right so that's that done now  so go back into the compose file so we've got   the context there which is essentially just  telling docker to have a look at that file   and run everything from that file so once that's  in place we're then going to need to make sure it   then runs so we'll just test this first so we'll  run a command to actually get things running so   that's going to be python managed manage.pi  and then run server so we're going to run   server and make it available so zero zero zero  zero and then that's going to run on port 8000   um that's pretty much all we need  there we are going to need some volumes   um so what we can do is if we wanted to work  within if we wanted to work uh on our django   application while we had this setup we could  set up a volume to do that so let's say dot   slash django so remember this file was here  and we need to go into the django folder   and we want to copy that folder over although it  will be anyway but this will allow us to work on   it live as we work as we run the container so  that's going to be user slash src remember this   is where we copied across everything in the docker  file back here we copied everything across over to   this folder so we're just basically going to make  a volume which is basically mirroring everything   across from here over to the container so that  we can work with it as we run the container   so that's that in place and then what we  can do then is just to find some ports   we're going to open up port 8000 in the container  and make it available so we can access port 8000   in the container where our server is running   right so i think that's pretty much it for now  of all actually we we have the environment file   so that was dot slash so remember dot slash this  directory dot slash defining a folder the folder   is called dot env and then inside of that we've  got a file called dev dot emv okay so that just   makes it the environment file available  so it can then be utilized via django   for defining the settings in the settings file  now remember here the whole point of these   environment files is this won't be accessible  by anyone this will be in the background and   then django can get this data from the server  and the idea is that we're kind of hiding these   uh important this important information sensitive  information so if anyone did hack in to our to   our website to our server it makes it hard for  them to actually see this sensitive information   so i'll make the assumption you have  downloaded docker desktop if you haven't   then go ahead and download dogger desktop  install it this is potentially what you're   going to be looking at once you've installed  dogger desktop so once that's installed i do   also have the docker extension in visual  studio code just type in docker into the   extensions here and download docker and then  you'll get a new little icon here and you'll   be able to manage all the containers and images  from this tab here right so we're ready just to   bring up everything so let's just say docker  compose and then build so we create our image   you can see that there are some issues here in our  file so let's take a look at what is wrong here so options command okay so i've tabbed  that out i didn't need to do that   so let's go back and build we don't need  to use build we could just say up here and   it would just build and then start the container  but that's going to basically download the image   we defined we're using uh alpine which is a fairly  lightweight image everything looks okay so let's   go ahead and up that'll bring up the container  so in a second this will refresh so we have our   image that we just created and now we brought up a  container it looks okay so let's go ahead and just   test this out see if it works so in your  browser let's just type in one two seven there's a 8 000 and there we go so  everything looks absolutely fine so what we've got so far then is our  browser we create a new container   and then inside of that we have the django  instance and then we started the server which is   essentially just a python lightweight server which  will allow us to communicate and work with django   in development so that's exactly what we have  so far now we want to obviously work towards   this diagram so next up let's go ahead and  install g unicorn and get everything started   with unicorn and then we go ahead and we'll bring  in the nginx server and set that up and then set   up static files and so on and then finally we  go ahead and it really is just an optional step   setting up our local dns server so that we  can serve it the website from our domain so i'm just going to press ctrl c just to close  that server there right so we don't need that we   don't need that so back into our files here let's  go into requirements so we are going to now also   need to install g unicorn so i'm just going to do  this manually and the latest version being i think   it's 20 20.1 so go ahead and have a look but i  think the latest version as a recording is 20.1.0   so that's now in the requirements file so what i  need to do now is just make sure so i'll go into   my containers here in docker desktop i'm just  going to delete the image that we created just   keep everything nice and fresh some of these steps  aren't necessarily needed but i'm just doing this   just to make sure that everyone  will have the same experience   okay so we don't have any containers or images  left remember we need to delete the containers   first before we get rid of the images so let's go  back into our code here and we'll run this again   but this time what we do is we just remove this  command we'll just add a new command so instead   of running the lightweight python built-in  server let's go ahead now and actually run   the to unicorn server now ultimately uh this isn't  necessarily how you're going to run your unicorn   on your server um but just for this scenario we're  going to set up in this very simplistic way so   we're just basically um setting the unicorn up  here to start so we're gonna bind to zero point   zero point zero zero eight thousand so essentially  what we've done here is we've started unicorn   we've identified the application that we want  to attach it to and then we basically set the ip   address which we're going to serve the application  on and that basically now runs the g unicorn   server so remember it's going to be installed  because we set up the requirements file   so let's just go back and we'll do another build  but this time we're not going to do a bill we're   just going to do up straight away because that's  going to build and bring up the container all at   once so it gives that a go so that takes a couple  of seconds and then what we're going to find   is that the server is now running so this  is a new setup we have so we just basically   replace the python server with g unicorn so  when we now go into the browser and refresh i'm taking its time let's think about it and then eventually it works not too sure  what happened there i just opened up a new   tab and i refreshed it looks like it's  okay it's taking its time isn't it um   interesting let's try again i think it's uh  definitely working so we can definitely check   let's go back into the code here um not found so you can't find the static  files because we've not set them up yet   that isn't a problem maybe that's why it  has taken a little bit of time okay um let's go back and just uh make a refresh   okay so if we try to go into the admin let's  just test this out what's going to happen is   we will be able to access the admin but the admin  requires some css files and some other images and   javascript and of course that isn't accessible at  the moment and this is why you're seeing this very   this page without any style so we're going to need  to sort that out shortly but let's first of all   focus on nginx so the question you probably have  at this point is well why do i need two servers   why do i need g unicorn and nginx so g unicorn i  like to think of it as an application server it's   providing in this case a service of uh loosely  speaking translating the requests that are coming   from the browser into something that django can  actually work with and vice vice versa so django   can't directly talk to the server the web server  it needs some sort of communication intermediate   tool or service and that's to unicorn nginx on the  other hand is a fully fledged optimized web server   so what one can do the other can't so they  go nicely hand in hand it isn't the only uh   server that you can utilize here to unicorn  there are others same with nginx maybe you   wanted to use for example apache or many of  the others i mentioned in the first tutorial   just thinking about features that nginx is going  to provide for example the security that it offers   so it's going to help you protect so it's going to  protect your website from denial of service attack   so it can do whereas g-unicorn doesn't necessarily  have those tools so both of these tools work   hand-in-hand nicely now one of the questions  that you probably might have is well having two   services here isn't that just going to  slow things down not necessarily that   isn't necessarily something that you need to  be worrying about at this point think of them   as complementary pieces of software or services  that are really kind of performing different roles   so let's get this set up now um  we've already commented out the nginx   configuration so let's just bring that back on  so here we have uh the contacts here the build   information so let's just go into the folder let's  go to that and you can see we have a docker file   if you haven't seen the previous tutorials all  we've done here and we're using the nginx latest   image and then we're making a few changes so  we're just copying across everything from the   html folder here and we don't actually need  to do that now um so we could actually remove   that so that was in the previous tutorial where  we're just setting up static web pages so we can   definitely get rid of that we don't actually need  this either in actual fact you could say we don't   actually need the dockerfile um at all because  we're just going to use the default nginx setup   um for this so we could just use or bring in  the image into the docker compose file but   i'm just going to keep them separate for  now let's just keep that on there for now   um i don't need this html folder anymore  so i'm just going to get rid of that like   i said if you're interested in setting up static  files have a look at the previous tutorials that   would take you through that so in addition  to that then let's go back in so we're going   to set this up on port 80 so he's going to be  working on port 80 so uh at the moment i think yeah i think we're okay with that um the volume so you can see the volumes you  have two volumes so we don't need this anymore   so we're just going to map across to the  configuration file so it just makes it   easier for us to set up the configuration file  and make any changes so that's why we're going   to um to create a volume there i think that's  pretty much it that we need to do at this minute so let's just take a look at what we're going  to be doing here so we've got a browser we're   going to be sending a request over that's going  to be utilizing uh port 80. so that's just the   default http port right so the default web port  for sending http traffic web traffic so we opened   up port 80 on the container support 80 is now open  on the container so we're going to pass in data   into the container for report 80. now g  unicorn is currently set up on port 8000   so what we're going to need to do here is set up  nginx to basically just forward things across uh   on maybe a different port so we're going to  forward things across on port 8000 so that's   what's going to happen there so that's what we  want to do we want to forward all the information   across on port 8000 and then of course port 8000  in our container is open and so it's accepting   requests on port 8000 or listening on port 8000  and then we can just uh do what it normally does   to unicorn can take over and then request the  files and then we can send all the data back so   that's how the ports are going to work here we're  using the default port 80 port on our server and   then that's going to be then converted if you like  or sent across on port 8000 and our container here   uh holding django and judo corn is open on port  8000 and everything works nicely so you don't   have to use these port numbers of course obviously  port 80 is the default port for http traffic so   you might want to use that but in the back here  you could set this to port 80 you could set it to   any of the other available ports that you want  to utilize so now we need to set up nginx as a   reverse proxy so a proxy server you may have come  across this before you may not essentially it's   a a go-between or kind of intermediate server  that forwards requests and that's essentially   what's going to happen here so we're going  to send a request to our server it's going to send the message across over to our other  container this nice little setup is going   to enable us later in further tutorials  to start thinking about cache or cache   depending on what part of the world you're  from in addition to that you're starting to see   some of the layers of security we can start  to now apply because we can see here we have a   proxy server a reverse proxy server and our nginx  server we can do a whole heap of different things   here in terms of security and this is just  going to provide one layer of security um   normally this server is going to be behind a  firewall uh and also that's going to be within   the operating system so your operating system may  have a firewall and then there might be an outer   firewall so there's loads of different layers here  that you're starting to see in terms of security   that of course is just expanding and adding to  the complexity of this uh whole deployment process   and it is a it is a big process ultimately if  you want to do this properly and now i i get a   lot of questions on how do you deploy this on a  production server um expecting me to be able to   explain every single component that you might  want to configure and i'm just really trying to   suggest that this is a very or can be a very big  process indeed so let's move on now and configure   our nginx server so as i suggested the main  configuration file if you're not familiar with   this is going to be the default.config file and  we are using a volume so we're mirroring across to   where the config file is stored in the container  so we do have it here this is the current setup   so i'm just going to comment this out we don't  need that so here on my keyboard i've typed or   use command forward slash depending whether you're  using windows or mac that just comments everything   out if you're not familiar with that so let's give  this a go so we're going to need a server block   okay so we are listening on port 80 remember  that's what we know so far so we're going to   listen to port 80 and then we want to do  something so we're acting as a reverse   proxy or a proxy so we want to pass data  across to somewhere so we use um sorry lo   didn't location uh location so slash so that's  kind of like the incoming location right uh so   if we go to the home page then basically  we want to send them somewhere else right   so where do we want to send them so we want to use  proxy pass and i think that makes sense uh where   do we want to pass them so proxy pass and then  we basically define where we want to pass them so   we say slash demo okay so we'll give it a name  a demo let's name kind of um place where we're   going to send them and then that can then act as  a reference point for us to define our upstream   okay so upstream um essentially here we're  referring to somewhere where we want to send   this information upstream so that's going to  be demo and that matches our demo here right so   upstream and then we can just define where we want  to send it so server uh our server is called web   so if we go back into here and we've called our  our instance here web and then we want to use port   8000 and there we go so essentially what we've  done here we said when we go to the home page when   someone requests our website we want to basically  pass them over upstream to the server on port 8000 now there's great expandability here um  many different options here now notice we   did use web as a reference to our web container  here but that might be replaced by the actual   uh domain name of where our server might  actually be um resolving to so we could use   dnser to resolve exactly where this server  is it could be an ip address for example   and here we can start to use a whole um different  setup we could start to use for example weights we   may have multiple servers reference yeah there's  a whole heap of things here um that we can set up   but this is really just a basic um baseline for  us to start understanding what's happening here   again hopefully in further tutorials we'll  start to expand this and learn a little bit more   and i'll start to drip feed more information so we  are going to want some information from the client   to travel all the way from the client potentially  to the server so that we can maybe perform   different actions so what's happening here let's  just think about this logically the browser or   the user may have an ip address 82.1.1.22 maybe  that's their internet address their browser so   when the browser makes a request to the server for  a webpage a whole host of information is sent over   to the server one of them might be the ip address  of the the user now the thing is this ip address   um is red and then nginx then sends that data  across now because nginx is essentially then   sending that across to the back end or this other  set of servers here it might be that nginx has   a difference ip address maybe it has a different  ip address it and then what happens is that nginx   sends a signal over to these servers here and  django and then it uses its own ip address so what   happens is that django thinks that the original  request is coming from this ip address it and   not the ip address of the browser so that might  not necessarily be a big problem but there'll be   occasions potentially where you do want to forward  everything from the browser over to your server   so it just happens the x forward four or x  fs request header is kind of the de facto   standard header for identifying the originating  ip address of the client so potentially we want   a way of kind of forwarding that across from the  nginx server across to maybe the django client   so it can then maybe perform different actions  based upon the original ip address of the user   so back in the code here we could potentially set  proxy set header export for proxy add x forward   four so essentially here what we're doing is  passing across the original ip address of the user   over to django and then of course the django  api can then determine the original client's   ip address instead of the ip address of the proxy  so there's a whole heap of other aspects here that   we can utilize and if you're looking for more  information in google if you just type in nginx   underscore http underscore proxy underscore module  um that would take you to a page the engine x   documentation which and it will show  all the different things you can pass   over so let's just go ahead and now just pass  through the host so proxy set header host   host this value equals the server name in the host  request header field or the primary server name   if the field is not present okay so with these settings let's give this  a go see if it works so we're just going to   close everything down and at the moment  we don't actually have this image set so   we don't need to shut everything down  here we have the the image here for the   proxy and your next proxy web okay so that's  our um our web server so let's just go ahead and   docker up so that should then  go ahead and build the new image   for our nginx server and then start it okay so you  can just see that our nginx server just came up   so hopefully now we can go through  the server and access our web page so back in the browser then um let's just see  if for instance if this still works so you can   still see that the 8000 port still works we can  go directly um let's just do it without 8 000   and you can see that the site cannot be reached  now remember we aren't trying to use port 80 here   so you would imagine that this by default is  using port 80 so that should send a signal   and or should be captured by  our container our nginx server   and then pass it that over to our django  server so there's something missing here   so if you go back into your docker file  let's just close everything down um so if we go back into the django docker file  here sorry docker compose file sorry sorry   let's go into our web here so what's  happening here remember is that   why could we access django still on port 8000 well  because we've opened the port up in the container   we're mapping across 8 000 port to the  container so that's still being recognized   as a way of entering the container and accessing  our website so we want to make a few changes here   so we want to go from ports and  now we just want to use expose so we just want to expose so we don't want to  map our computers 8 000 port over now to this   container we just want to expose 8 000 and  make that available to enter the container   so let's do that we'll just stop  everything and we'll give this a go   so i'll just go ahead and shut everything down  again this isn't necessarily something you have   to do i'm just starting from a blank slate um  so it will work in on the same page to avoid   any issues okay so i won't say that  again but i will continue doing that so   i'm just going to use docker compose up so  i'm just going to rebuild everything again so we go back into our browser here we'll just  use one two seven zero zero one so that's port 80   and it still looks like we've got issues   so in actual fact if we look at the configuration  of our containers either in the desktop container   section here in our docker desktop or else if  you're utilizing the extension docker extension   you can see the square this is representing the  fact that the container isn't actually coming up   it looks like we've got a problem so if we have  a look in here it actually tells us here that   there's a an error in our configuration so  unexpected uh curly brace there in looks   like line three so it looks like we've got some  sort of syntax error so let's just go back into   our configuration file and have a look so the  problem we've got here is a syntax error so the uh   semicolon hasn't been utilized there on line three  similar here we've forgotten our semicolon let me   just bring that back in so we can see more of the  code um so there's a few different semicolons that   we've missed out there so what we can do is just  reload let's have a look see if we can start up and there we go so you can now see that the  server has started with this new configuration   so let's go over to our browser and refresh and  there we go so we are just using port 80 so it   looks like everything is successful so now when we  try port 8000 you can see that it doesn't now work   so we can only access our server now  on port 80 through our nginx server   so we still have the problem of the admin static  files so if we go into admin and we can see that   the css files aren't being picked up it can't be  found it probably tells us if we go into the code   here it probably tells us it's not found yet so  the this is the web referring to the web container   it's telling us that we can't find the  static files because they don't exist yet   so let's go ahead now and create that  path uh an alias to those static files   so what we're going to do is we're going to make   a shared volume so we're going to share a volume  from the web container over to the nginx container   so let's make a new volume here so just going  to be called static let's just call it static   files or whatever you want and that's  going to be mapped across to user slash user slash src slash app static files so  if you remember user src app static files   let's go back into our dockerfile here remember  that's where basically on the container django   is currently installed user src app so what we're  doing here is we're getting that area user src app   and then the folder static files that we  created earlier so if you remember we built   the static false now those static files name that  incorrectly static file so that's the folder there   of static false and i want to mirror that across  if you like or make it available on my nginx   server apologies let's take that out of nginx for  now that should be sorry in the web apologies so   that's currently where the static files are so  now what i can do is i can now reference this in nginx container so this is the nginx  container i say static files again and   this time i'm going to place it somewhere in my  folder directory so i've got a folder called home   and then app and then static files so that doesn't  exist yet on nginx so we need to build that before   we actually copy that across that's going to be  important so let's just close everything down   and then in addition to that what i'm going  to need to do is just share those volumes   so let's just say volumes and then static  files okay so we've essentially just shared a location and the files are now kind  of being copied over to the nginx   uh image uh yeah container okay they're right  so the files are being copied across to that   now then let's go into nginx dockerfile because  what we're going to need to do here is basically   create when we start up the image or create  the image we're going to need to run the mkdir   so make directory now if we are making directories  with kind of multiple directories subdirectories   and then we're going to need to use  the p flag for that so we can do that   otherwise we get an error so home that exists so  we're going to make a new folder called app and   then a new folder in there called static files and  that's where we're going to keep the static false   right so let's go back into here let's go  back into our containers uh we're just going   to remove all the containers oh yeah nope one  second let's uh just remove all the containers   and then the image so we just start from  scratch again okay so that just removes all   the containers and images there's plenty of ways  of doing that again i'm just doing it manually   so let's go ahead now and just make sure  everything's going to be in place so we've   mirrored across the statics folder that's going  to copy across all the files okay so once that's   done we now want to serve them from nginx so let's  go into nginx configuration file and let's make a   let's make a new entry uh so what we're going  to need to do here then create a new location   i do that i said location and my brain just  writes localhost all right okay location   static um and then let's go ahead and create  an alias so basically what we're doing here is   we're saying this location static this address  we want to basically hook this to a location   in our folder system static files don't forget  semicolon okay so that's pretty much what we've   done there we basically um mapped across this  url that the user could type in over to this   folder location in our file system and that's  obviously then going to serve the static files so just before actually bringing that up  i just noticed that i've used a capital v   there that was in the doc compose file that  probably isn't going to work correctly so   made that change there in the docker and post file  lowercase v let's go ahead now and dock compose up   so again we're rebuilding all the images and  that's then going to bring up the containers   so hopefully this time we can now go over   and refresh on the admin page and you can  see now we have access to all the css files   and so on we've got the render correctly  rendered the page correctly rendered there we go   so for the final task and here's an optional  activity here we're just going to now re-enable   our dns server so this is already been set up  previously so i won't go through this uh step   by step because it's it's just already there but  first of all just close down the containers let's   bring up or back up the the code here for dns  and we'll just remove these volumes to the bottom okay so this basically will allow me to allow us  to create domain names actual domain names that   we can configure in our local area here in our  local development environment here in our machine   so we're just simulating a dns server if you  don't know what a dns server is essentially is   a way of translating an eye a domain name into an  ip address so it can be routed across the internet   and then access the services that you intend to  access so for example when you type in amazon.com   the internet router devices they cannot understand  or root that name it needs to be translated into   an ip address first so that's where the dns server  comes in right so this allows us to make up any   domain name we want because we're going to be  working locally right so everything that's already   been set here you can see that it uses port 53 the  default port and then we've got some configuration   files here which we're going to utilize and  this is basically just starts the service   so let's go into our dns here we've got  some zones so zones basically represent   domains in this case so let's just remove  secondary.com and then in addition to that   let's just make sure that we've removed it  from our zone here in our name.config file   so there's nothing we need to change here in this  file here if you want to know a little bit about   this then head back to the previous  tutorial while go through this step by step   um so that's our domain that points you can see to  our zone information here so originally we set up   this domain as ns.main.com so we're just going to  use main.com in this case um so here we have the   name of the uh domain we have an email address  notice it uses dot and not the at that's just   the format we utilize some parameters about how  this will get updated via other dns servers etc   and then here we have information which will help  us then point towards the ip address that's kind   of hosting that information related to the domain  so here let's get rid of ns so here what we have   is at ns nameservermain.com and this is at the  moment what we have we're pointing to this ip   address so anyone who kind of requests the name  main.com it comes to this dns server and then it   translates it into this ip address which is just  our local host so let's just turn that into an ad   oh we'll do press wrong button let's go back so at  and then in a okay one two seven so we could also   include www in so this is an a record 127.0.2.1  so if anyone uses like www.main.com it's going to   um get translated to this id address okay so  that's pretty much all the configuration we need   to do at this point for that now for the triggy  bit so here i'm using mac okay so um i do need to   go into the network preferences and i will need to  change the network preferences so here i'm using   um a connected lan connection so i need to go  to advance here and just go ahead and go to dns   and change my dns so i need to change that to  my local host and that's basically just telling   the computer this is where the dns server is  so if i press apply um now my machine should   be utilizing that dns server which is obviously in  the docker container and that should then resolve   or return essentially to my browser one two seven  zero zero one and then that would take me then   over to my nginx server and then resolve the web  page request and then should return the web page   so let's just test to make sure i've  opened up a new bash shell so don't   forget sorry i didn't mention i did already  go ahead and bring the server up so i did a   docker compose up again to bring up that  container that new container sorry if i didn't   do that so once that's done i've opened up  a new bash shell ns.lookup oh sorry nslookup   and then main.com and you can see that's now  returning a result so namemain.com is at this   address here so it looks like everything's  okay so if you're on windows it's gonna be   slightly different you'll need to go into  network settings and set up dns that way   um apologies i don't show you in this tutorial  how to do that but it's it's gonna be slightly   different on windows right uh so once that's  done let's go back into now our browser and   we should now just be able to type main.com and  there we go so there's our website so we should   still be able to serve the static content yep  there we go and there we have it so that was   uh setting up engine xn as a reverse proxy  utilizing django that does take us on our   way or on a pathway if you're thinking about  deploying django that does take us um forward   in terms of actually starting to think about  deploying django utilizing nginx and g unicorn so there we go we now have this exact setup here  so our browser sends our dns request to our dns   server which is in a container we then return  the ip address which can then send a signal to   our nginx server which is also hosting our static  files obviously it passes our reverse proxy server   passes that data across as well as some other  information header information over to our g   unicorn server which can then communicate  with django and then of course django then   checks the url so if it matches an existing url  that it has um already configured and then it   will send information back through rg unicorn  nginx and our browser so we will utilize this   setup further to explore a little bit more about  nginx we could have a look at caching or caching   and that's something that we can definitely  now have a look at uh utilizing nginx so we'll   continue this series looking at other aspects  uh utilizing this and any other setup that you   might want to um request so please if you  have any requests you want to set this up   with react or any other framework then please  let me know and i'll try and accommodate you   thank you very much for listening just a big thank  you to the channel members thank you for your   continuing support if you do wish to support the  channel further you can do by potentially joining   our channel membership or potentially following  us on patreon if you would like to you can also   follow us on any of these socials twitter facebook  tiktok and of course we do have a discord channel   i do try and hang out now and then but i can't  guarantee that i'm ever going to answer your   questions on any of these socials here because  it's way too much for me to do but i do try as   best i can particularly the channel members  so if channel members do ask questions um   typically in youtube um i do try and access  those first and reply so thank you very much for   listening i do hope you enjoyed the tutorial  and i hope to see you in the next tutorial

Channel: Very Academy

Views: 40,061

Keywords: nginx, nginx tutorial, docker nginx, nginx django, nginx reverse proxy

Id: N2t7L_K5LXo

Length: 56min 46sec (3406 seconds)

Published: Sat Apr 30 2022