Deploying Django and Next.js to Digital Ocean with Docker - AirBnb clone fullstack tutorial

okay so it's finally time for the deployment thir thing is to set things up on GitHub so you need to create an account on gab.com and create a repository I have already done this for my project um but you only need to click plus your repository and then for example I want Jango BNB for the front end you see this already exist and I have a Jango BNB back end as well um let me just do this so I can show you what else you need to do then you click click repository keep this public if you want or private if you want to just have this for yourself and when you click this you can see down here how you can initialize this on your computer so we can do this to create a simple read me file then initialize it then you add all of the files and push it to the repository you created anyways so I have already done this so when you have created one repository for the front end Jango BNB and one for the back end Jango BN bore back end you ready to continue so I will just close this again now and set this to Da since I've already done that if you have any questions feel free to leave a comment below and I will try to answer you as soon as I can um on my channel here on YouTube I also have a few guides on how to use GitHub so you can try to just search of them on how to do that for the rest of this deployment this is very new to me so bear with me if I do mistakes and if I have to go back and forth a little bit I have done a lot of deployment before but I have actually never tried to deploy Django with Docker before and also never deployed a node js or next JS application but hopefully everything will be okay so let's say that we now have created git and everything there's okay so if I just stop the server here as a git status there you can see that everything is up to date with my main this is the front end and get status this is the back end um next up done is to create a server on digital lotion I will add a link in the description below if you click that you will receive $200 on digital oans where you can test out their servers for free in 60 days this also helps me and if you continue to use it after the 60 days I will earn $25 so let's go to digital ocean and create an account or sign in if you already have an account so right now you can see here I'm on my team code with Stein I don't have any servers right now so let's just create one so I create one and I select droplets a droplet it's sort of like a virtual private server or a node as someone call it and they have a few different names but here they call them droplets first you can select your location I like to use one of these two because they are the closest one to Norway where I am located so Frankfurt then you can select data center Frank only has one uh next step is to select an image I like to choose ubben 2 and 2204 you can see this has LTS which stands for long-term support which means that this version of UB 2 will be updated for many years from now on next is the size um for this tutorial I will just use the regular with disp SSD because I don't need any one of these I don't need Intel or AMD processors so I just keep it at this and the size can be the smallest one I think that will be enough for the docker applications and the nodejs front end if not we can always upgrade to this one later um so I do not need any more space here you can enable automated backups if you want to do that next is how you want to connect to the server the most secure and simplest way is to just use SSH keys but for this tutorial I would just stick to a password so that was a good and secure password Here we can enable metrix if you want to do that so you can keep track of how much memory the server is using how much CPU how much available space you have on similar and if you reach a specific threshold you'll receive an email from digital ocean you need to check out what it is um I only want one droplet and then you can add the host name if you want to do that this is uh typical to use because now you can see how many CPUs you have how much RAM you have where it is located and similar but you can also call it something cool if you want to do that or you can call it your name or whatever I would just keep this as it is uh and the project Cod Stein maybe you don't have any project um I just have a list here of other projects that I use so then create server and then this will just take a few minutes think I can go back here and set this to done or maybe I should set up the server and make it ready first yes let's just wait for this to finish okay so now that the IP address appeared here everything should be all right um sometimes it takes a few more minutes before you can connect but let's try to do it now so just click the copy and head to a terminal then I open up a new tab here and I can say SSH rout at the IP address if you have Windows you maybe need to download um put uh or maybe you have this built into newer versions of Windows I'm not sure I haven't used it for many years and just hit enter and yes I want to add to continue and I need to type in the password that I used and hit enter okay so now you can see that I'm logged in and here are already a few updates that needs to be installed so we can do that first AP update this will just make sure that um all the references to the packages and similar are um k get lock filed this might be because the server is still getting up and running I actually never seen this before held by process it might be because there are already something running in the background since the server was just created so I will just log out by hitting contrl D and log in again and see if that works so then I run the command again AP update if you didn't get this message then you can just continue if you did get this I will try to reboot the server and see if that works so you can see that that was now thrown out and if I try to connect again I will not be able to do that until the server is ready again great so now I should be able to log in again and then I can again try to run this command APD update so now it's reading some packages list and similar updating great so now you can see there 185 packages that can be upgraded so let's run this AP upgrade so now everything on the server should be up to dat when this is finished running it will take a few minutes okay when you're prompted with this pink screen you can just hit enter Because I want to keep the local version and I think there will come one more okay so just hit enter and enter again and then we should be ready with the setup great so then I can go to my to two list set this to done next I've done is to set up the backend I when creating the environment um maybe I should say instore all Docker compose instead and set up a Tucker compose file for prod um and a few other things so um we can begin by installing Docker compost so let's go back to the server and say EP install Docker Das compose so yes I do want to install this okay and okay and now we should have this install and if I said Docker you can see that it's installed because now I get the help for what commands and similar are available great so that means that I can set this to done again and we can set up a Docker compost file for production um if I find the back end here we already have this Docker compos which is for the loow cool environment here um here I need to just make a copy of this paste it and save it as Docker D compost. prod. yml so now we have one for local and one for production um here I want to set up one more service I want to set up something called enginex which is a web server we are going to use inside Docker to host the project and build and this is going to build a folder called mine X so you're going to have a separate Docker file for this and engine X configuration ports and um here I want this uh engine X to use a specific Port we can take 30 and 37 which is leit uh doesn't mean anything it's just a random port I want to use for this project and I want this to go to Port 0 so this will be the port out of this project and 80 will be the inside into engine X and then we need to set up what this depends on so depends on and then we can just pass in web and the web is already depending on this which means that everything should be working there there um I also want to do a change to the command we are using to run Jango just remove these three here and say G unicorn or gunicorn if you want to say that D Jango BNB backend colon sorry wsgi colon application so this will now point to the folder that we have in in here and to this file which is entry points for the web applications so this sort of just sets up a Jango application and take you further into the URLs file and similar at the end here we say D- bind and we bind this air to the URL 000000 8,000 Um this can just be like it is but instead of having ports here we want to expose Port 8,000 and I want to have one more service that this depends on and that is defne uh def um de is the we have already installed this previously it sort of is the websocket server for D Jango and we can set it up as well so defy Cola on this should build inside the same folder as the jangle project because we want to run it from there oops Jango BMB back end and the command we want to run is Def space D- bind and we want to bind the address 0 0 0 to port or P 802 so the address for the websocket will be 0 802 at least internally on this server and then this should point to Chango BMB backend. asgi which is a synchronous uh entry points for the web server colon application and here we can say ports uh 8,000 and2 802 so we get 802 in and we get 82 in which points to this one so I think that was everything I needed to do in here let's try to save this nothing will happen yet but at least this is what we need to do here for now um I also want to do a change in the settings.py file um if I hear find the um website URL uh should probably be like this if thebug then the website URL is that else the website URL should be something else and that's where I want to get the IP address for the server which it be col 1337 at least this is the website URL for the back end not the front end so that can be like that um scroll down in the course allowed Origins here we need to add this here like this and we can also add HTTP cons sl3 37 just so that we have everything this will be the front end or uh nextjs and this is the back end you can also make a copy of this and rename this to course trusted Origins just so that we know that everything is okay and one3 one which will be um course um Origins course Origins underscore white list um so some of these might do the same thing I'm not quite sure this is usually what I do and it usually works so that's why I just want to keep it like that so we should still use here you can see we pointed WSI and ASG we still use the environment to get these variables so it looks okay dum dum dum yes okay so let's save this now this can also be closed so we don't have to think about that um close this and close this and then in here in this back end folder we will have these two let's create a new folder called engine X and in there a file called Docker file so this is where I want to install engine X on the server there might be a solution to do this in the other looker file as well but I'm not sure but this is the way I have learned to do it so from engine X colon 125 so this will in create an image or install engine X version 125 run and when this is run I just want to delete the default configuration for engine X so RM Etc slinx SLC con. D deault docon just so that's not doing anything we don't want to it and then we can say copy engine x.c to Etc SL xc. D so what this do and now you're going to copy this file and put it in there so then we obviously need to create this engin x.c so engine x.c and this isn't very complicated um we need to create an upstream which will point to the web application or Jango so Upstream space hello Jango or you can call it Jango bmbb backend for example Jango BMB back end which makes a little bit more sense and then server web colon 8,000 what this points to is web which is this name and it points to this 8,000 uh Port that is exposed next we create a server so server semicolon no C Li say listen 80 so now we listen to Port 80 and if I go in here again um yes you can see that we are the server are exposing P Port 80 here on the engine X built next we set up a location that will point to the D Jango BMB back end so location so all urls beginning with Slash should go into proxy undor PA HTTP colon SL SL and then Jango BMB back in SC so this just sort of um forwards all of the traffic into this one and we need to set up something called proxy set header x-4 worded D4 proxy underscore addore xcore 4 War deore 4 so this also just forwards traffic into where we want it need to do this one more time proxy set header host host so we send in the domain name I think it is proxy redirect off and then close the location so if you don't understand this just relax and know that I don't really either is just something that I know has to be done every time that I deploy a Jango application in engine X so this sort of just forwards all of the traffic in to here where we are running gunicorn and then below here we need to set up one more location for the for the web socket so location this is a little bit different we added uh this sign in Norwegian we call it TI maybe TI not sure what it's called in English and then this one which is another sign I'm not a carrot I think it's called /ws slash so all traffic begins with this will be located to this proxy pass instead so proxy pass http/1 1270 01 colon 8000 2 so now this is the local address on the server and 80002 is the port we are exposing down there then we can do some proxy pause things here as well um this is a little bit different here we say proxy underscore hpor version 1.1 and proxy set header is something we need to do here as well proxy set header upgrade space httpcore upgrade one more proxy at header which goes to connection upgrade and proxy set header host host and proxy uncore cach by pass dollar sign HB colon upgrade so hope it's not too confusing and I hope that you are able to understand this even though it doesn't really make much sense but it's something that you usually need to do every time you deploy a project so now that this is add this is addent I think we are ready to go to this server um so if I go back here where I have the project somewhere there is the back end I can say get status and you can see that I have done changes to this file this file is new and this folder is new so I need to Commit This to the server get commit sorry get add Dash to add everything um unable to create permission denied sud sudo get status so you can see that this is added and this is not okay get status so I was in the wrong folder so I need to be in this backend folder here where we have the do compos and similar so let's try to run get add again still get that permission denied get status now you can see that everything of this will be sent to get up so I can say get commit server files sudo hopefully you don't need to use sudo maybe I done something wrong when I've been switching between my users or similar sudo get push invalid username or password okay so let me try one more time now okay I need to set up a access token on my GitHub so github.com this is something you might need to do as well if you are new so go to settings and find somewhere you should have the developer settings and open up personal tokens token classic and then you can generate a new token and this is just for sending stuff to GitHub so generate new token classic code with st uh you can set an exploration if you want to do that I usually use the no exporation and you usually just need this one so then we can scroll down and say generate token and and then I can copy it here and then this will be the password that I'm going to log in with so it's not your normal password what is wrong okay so now everything is up to date I'm sorry about this mess it's just because I have multiple users here on the Mec and usually I'm I use the other user for committing things to get and not this codit Stein user but now it looks good so if I go here now and find this repository Jango BNB back end then I have the project here and you can see here that 2 minutes ago I updated this this and this great so now I need to get this code into the server so I just want to go to the Todo list and set this to done because now I want to get it there um to do that I just click code here and I can copy this link go into the terminal find the server again here a PVD you can see that I'm in the root folder that can be okay but I think I want to go to MK there/ web apps and then go there as well because that makes more sense to me to have all of the projects here so now I can say get clone and paste in the address that I copied from GitHub so this will download everything there and if I go into jungle back BNB back end you can see that I here have this Docker compos prod nice before I continue I just want to say thanks to all of my patrons if you do want to support me you will find a link in the description below so I think we could try to build the container now and see if it works to do is a Docker Das compose that should be working yes good and DF Docker compost Das U dot Pro yml up D- build so now we want to build this um it's invalid because service engine export contains invalid type it should be an array darn I did something wrong I forgot to add the space there so I just want to do this locally so I don't have to do anything of this on the server so just add a space there go back back to the terminal back here if I have a get status again you'll see that this changed so so you do get add that commit and then changed uh Docker compose file sud sudo get push so I need to use the here again darn it's gone usually the command line remembers this so it probably do that with you um so it should be this one you can regenerate this yeah regenerate okay no expiration and then copy this again paste hit enter and now this should be up to date again and if I go back to the server I can say get pull to pull down the newest version you can see here that there was some changes to this file so if I just click the arrow keys two times up I find this command again and can hit enter so now I can see that this actually starting it's pulling down libraries like Python and you can see now that it's uh setting up everything that we did in the file it's installing netcat um a few things like that it's installing a lot of things that I have no idea what it is now it's trying to install from requirements which reminds me I know there is something wrong but I will come back to that we can try to see the error first okay so now it's going to Def continue building that setting up the entry points and it looks like things are working so far that's good good so now it's downloading engine X going to death step so it's setting up everything I think that it will crash soon now yes yes okay so first of all you can see that there is a problem with postar SQL and also for exle this you can't split it because um Jango don't find this in the system it can't find the environment variables um so it's running the database stuff okay G unicorn not found so we need to fix the G unicorn and we need to fix the environment variables so just click contrl C to stop everything here now and we can go to Google Chrome and say pip install gunicorn I need to find the latest version of this that's 2120 so let's go to visual studio code open up Jango BNB back and open up requirements txt and a Pand it here Gorn equals equals and that one okay so then we need to go here again and commit these changes get add that um changed or for example added G unicorn sudo get push like that and go back here and say get pull so now I have that if I run LS Lord you can see that I have a file here called EnV dodev this should actually not be there and um it should be added into this git ignore file but that's a little bit late right now but if I just take this now CP env. and rename ITV this EnV file contains the password and similar for poster SQL it import uh has some allowed hosts which we need to change so to change this and this is something I only want to do here on the server because I actually don't want to have this on git then I can say VI for this editor here and EnV and if I go into the list of allowed hosts I need to add the IP address for the server we created so copy this one and paste it and add the space in the middle secret key should also be something a little bit more secure since this is in a production um site feel free to add even more secret key there so to save you just click escape and type colon WQ as you can see down in the corner and hit enter this will right and quit and when that is done we can just click up a few times until we find this built command and try it again this will go much faster this time because everything should now be downloaded and similar it will just do the changes for uh what we uh did for G unicorn for example okay so there are still some problems here because it can't find the environment file but at least now it didn't comment that the gunicorn wasn't working you can see here that the G unicorn is actually working um I think if I try to visit the URL in the browser it will definitely not work but you can see what we get yes I need to add this to the allowed hosts um I thought I did that open up the settings file not there of course yes it's not added to the allowed host because the environmental file doesn't work so let's stop this again with contrl c and then I can copy that file by saying CP stands for copy do EnV try to move it into the Jango sorry D Jango backend folder there I can try to rebuild again see if that helps so it went much quicker now and it's still can't find environmental folder or things okay maybe we need to inall I have no idea why um it will not work so I can do some changes here for example I can install something called EnV I just need to find the correct version um pip install um EnV actually it's python. dnv and the version is 101 10 do one and save and if we now open up settings.py we can import it here from EnV import load. EnV and then we run it by saying load. EnV right below there let's try to commit this and get it to the server so get add and then commit added. EnV to get Push by the way if you have any idea why the docker here won't read this but it does it locally feel free to leave a comment below that would be really helpful so do get push and then my username and password there again so now it's pushed and then I can say get pull here then I got the new settings and I got the new requirements so then we need to rebuild this again and now it will probably take a little longer because now it needs to install the python. EnV so this is sort of a helping library for reading environmental variables okay so now everything is installed database is up and running great no migrations so it looks like things actually is working now perfect so you can see that it's listening there on Port 8000 and listening TCP 802 and 802 is then the defy backend server so if I refresh here now you can see that this is not added to the settings file maybe I forgot to do that but okay so let's just stop this for now and we can do that so VI um Jango backend. EnV I think it's this one 64 226 81 it is added there so why is it not being okay you know what I just do this manually take the IP address go into VI Jango backend settings Jango settings and then instead of having this split on this I have no idea why it doesn't work then I create a new array here and then I add the IP address there there so then I can save and quit this if I now rebuild this let's see if it works then should go quick so starting starting no changes so now it is running there and I can refresh and now it looks like it is working okay so um let's try to go to the front end now and just run that project so this can just stay in the background to you see that everything is working um so here I can mpm run Dev if I now go back here and find a project there refresh this should not load anything because it can't connect to the back end that's okay um but if I find Chango BNB and the file called env. local instead of having this address I can take the server IP address and paste it here no slash at the end and save if I then go back here again and refresh there are no errors but there are no content either so let's try to create a new user submit so then this was posted looks like it was working if I open up the terminal and just see on the server nothing happened here that might be dumb or it might be good maybe we just don't uh post anything in the log right now let's try to create a new house submit it so it was sent there the image doesn't load but we will come back to that but at least it was added in the database which means that the server in the back end is working great okay so now that we know that we can connect to the back end and similar we know that it is running which is good um let's go here now just stop it by saying contrl d contrl C okay it actually just stopped responding for me that's why we might not see any output here so I just got the phone call so it might just killed my internet connection that was probably why we didn't see anything here so I can try to log in [Music] again rout at at address and then the password I used to create the server CD web apps jangle back end and then um this is now running in the background so it should be okay if no it's not okay fetch failed um I try to start this again but now I want to add one command-d here which will run everything in the background that's not correct DD so now this will start up so we will see that everything is okay but it will go back in the background so if I now refresh you can see that is not working why bad gateway remove the build and run just this command and we will see what's wrong so it looks okay okay I was just probably a little too soon to refresh there so if I refresh now you can see that it's getting this from the database okay so contrl Z now and we should stopping why refresh and now we get the error again but okay sorry run this command now can remove the build probably but Dash D so that is running in the background that we maybe need to wait a little bit again so I know that I don't have to do that refresh okay so now it is running again we get the data there and it's in the background there okay so that was the back end um if we wanted to we could replace this address with the domain name that should be fairly simple I'm not going to do it now but if you want to do that it will just be in here where we are listening to Port at itle be server name uh code with stein.com and then just point that domain to your IP address okay so now we can continue and find my to do list there set this to done this to done and this to done because now the back end is finished okay so now that the back end is working we can set up front end so I'm going to use the same server but I'm not going to use Docker for this before I do anything on the server I want to make a few changes in the front end so let me find the env. local here and you can see that this is the correct address for the backend server um just hit control C here because I want this to be the EnV local file but I can create one new file here just copy this and say env. prod because for production I would have a separate EnV file um here um the address should be the IP address for the server 13 37 and I want to add one more here next public WS host which is the web socket host which is this URL 802 this is not used anywhere so if I search it it will just return this but if I search this you can see that we use it in the API service so we can copy this here where we use environmental variable and if I find the conversation detail you can see that here we are using this address instead um so in there onti in WS SL slash of course and then this should be automatically put in to here so we just say process. EnV next public WS host I think that should be correct I can copy and paste just to be 100% sure and save so that was sort of it for making this ready no there is one more thing um inside the next config we can't load images like this anymore or we can do it but I want to append the IP address for the server here 13 37 because this is really going to load images from this will not make this work but at least it should now be ready for production okay there's something that failed what is that connection refused local lost 8,000 why does it try to use local out 8,000 where does it get that from yes because we are trying to use the local server it is not running that is why if I see here on Docker desktop you can see that this has paused and were exited so just don't worry about that this is what will be used in production so um then I think everything should be ready there so now we can log on or go back to the server here and do what we need so just go up one folder LS you can see that we have the back end there and then I want to do the same thing for the front end so let's first just get the code from get if I find a repository the address is this one for mine and then copy this address go back here and say get clone and paste in um now we need to install and Gen X so um there might be a better way to include this in the same Docker configuration as Jango but I have not been able to do that so I don't know how to do that so we can install Eng Gen X by saying AP install Eng Gen X so now this will be installed locally on the server as well so we have it together with the docker compose hit enter and enter then we can see if this is running or we can at least started by saying service and Genex start if I go back to Chrome now you can just see that the back end is still doing what it did at this port but for the front end we just want to use port 80 or 8,000 and then we don't have to specify anything so this is the default welcome page for engine X we can get rid of that by going to CD to change there to engine x no sorry ETC engine X it's enabled and say RM default so we just delete this just like we did in the in the engine X setup for the docker container if you remember what we did that somewhere in the docker not that one sorry but in this one we removed it from there so we did that now locally here as well and then we can create a new one new configuration for the front end so touch front end docon and then edit it by saying VI uh frontend docon and here we want to create a server so server and we want to listen on Port 80 Port 80 is just HTTP so you don't have to specify this in the address we can set up the server name just so that we have it not sure if we need it though but I like to do it and then add the semicolon at the end and then we use the same sort of style that we did inside the engine X for the jungo project we had a location and we set up a proxy pass proxy uncore pass HP colon SL Local Host 3000 and this is where um the nextjs project will run in the background and then we pass in the proxy set so and then we pass in the proxy httpcore version 1.1 just like we did for the web sof get and proxy set header upgrade pass in it should beore upgrade do one more time with this proxy set header and set the connection oops connection to be upgrade one more time where reset the host to be host and proxim cash bypass hdp up great then we can close this and we can close this if I now try to say service engine X restart it will probably not work because there are nothing on 4 3,000 that's okay this is still working and here we get a bad gateway because we not have anything locally running on Port 3000 so that will be the next step um before we continue I just want to stop this locally and say get status then you can see that we have added this file and we have changed these two so sud sudo or get add let me try to do that get commit um um ready for prod that did not work pseudo and then sud sudo get push my username stand headset then the password okay so now everything should be pushed and ready there if I go to the server I can say CD web apps Jango BMB as I get pull to get those changes you can see here that those that are these and then we have code and we probably need to install node yes we don't have that so AP install nodejs we need this to build the newest version of our project here yes I want to install this so if I then just wait for this to finish okay and okay then hopefully I can say node Das V I see that I'm running node 12 which sounds very old I should locally have node 20 so why does it install this old version um install node 20 you B I have no idea what it gave me such a old version I have run this okay it might be because I have not done this which is a different sort of repository for installing uh node so just copy everything there go back to server paste these three lines yes and add that to this one so copy everything here that one first and that one paste so now that was added then I need to run this update command again so that all of the references and similar are correct and if I then go down there try to install it again like that can also install development no thank you no thank you okay okay and okay hopefully now the new version is installed so no d v gives me 2012 perfect okay L Lord you can see that I'm in here now I have the EnV prod um okay so I don't have the node uh packages or node modules folder so you need to install this pressing mpm install this should now install all of the packages that we have locally but now here on the server okay so everything there is installed I think I might need to say mvv prod adjust. EnV so that is the Environmental file if I a cat. EnV you can see that we are pointing to the correct addresses perfect and to build the node application I just say npm run build and this will now give me a production already build of everything looks like this can take a little while okay compile so now it's linting and checking that all of the code is valid and good okay there's something wrong with the code here scroll top does not exist on type never um okay it's probably good that it gives me this um open up conversation detail can see here that the error is there property scroll top um but what does that mean okay I think that this message is is this ref maybe we need to change this to be a HTML um HTML div element save scroll down okay that looks a little bit better um scroll height with Capital H okay errors are gone nice um maybe maybe there are more we'll see so get add Dot and get commit fixed scroll error get push sorry I need this sud do you probably don't need that and sud do get push okay so code is pushed and then I can say get pull and we try to build this again so it's sort of nice that it actually checks that everything is okay before it goes to production so that you if you missed an error like I did then this will tell you it linting looks like okay collecting page data generating static Pages blah blah blah okay so everything looks like it's okay so next up then is the mpm start so this should start the local server in production on Local Host 3000 um if I now go here and refresh you can see that I'm on this page now and it's actually getting this one great um fetch failed not sure why this came it's probably the image that is showing there that's okay but it is working now great let me try to log in with one of my users so I could not log in okay there now I was logged in no did I was logged in but the cookie seems to be something wrong with the cookie hm why so I have been Googling a little bit and I think that I might know what the issue is then I said um that secure is set to true if we are in production and I think the problem with that is that I am not uh on https so I think that's the problem so I can just default these two faults and you should not do that if you have a domain where have a SSL certificate but I will just do that for testing now so save that stop this server and add commit sud commit and push and then I will try again getp and build and when that is done we need to start it again just to see if it is working now so uh when you are in production you usually create a domain https c/ code stand.com and that will make sure that the browser will understand that the cookies are supposed to be secure and similar but since this is just testing and I just use the IP address for Server as the address it will not work okay so now that should be done and we can say mpm run or mpm start again now it is running there Let me refresh okay looks good so far try to log in so I was logged in and now the cookie is set yeah so that was the problem um inside the inbox I have a conversation here and I can try to send messages and the messages are sent and are stored in the database and the reason why there are no names here is just because I haven't added a name to my user um so that's the reason why there are no names there and same on the inbox there is a missing name refresh you you see the name is also missing here just because the users that I have registered doesn't have a name yet yet um okay so now this is running and everything seems to be okay we are just missing the media files now um I don't think the image the image was probably uploaded but we are not serving it yet so we need to do some changes to this um if I go to Media um and don't remember the folders we uploaded this to if I open up uh models.py in the property it should go to uploads /properties there are nothing right now um the image I uploaded actually we should just stop the server now and create the super user so that we can log into the admin interface so let's go back here now into there and into the jungle back end there if I here want to create the super user I use the command Docker D compose DF Docker um Docker compose prod sler compose prod exec web Python manage.py and then create super user I think yes I need to specify name admin admin. and name admin password okay so it was created successfully great if I now go to admin then you can see here this is missing the the CSS similar that will be fixed later admin at admin. ano and then the password I use to create this user okay does not match any of the trusted Origins darn forgot to add this there I thought had to have done that so let's find the settings. P trusted Origins it is there not course actually this is not supposed to be course trusted Origins but it's supposed to be csrf csrf trusted Origins okay so that should be done and I just want to check before I commit this code okay so when that is said set we can go to the command line go to the back end folder here and say get add sorry sudo for me so get add Dot and Commit This and push like that go to the server again make sure you are in the backend folder and say get pull your local changes needs would be overwritten I haven't done anything get status get add so you see here that the EnV sorry the media file is at least uploaded so let's just add this reget get commit settings changes uh could not okay I need to tell them who how this will not work sorry get diff I need to find the changes I did to this folder why does that not work okay get check out like that get status so now that file changes to be committed sorry about this Mass here get status get restore maybe get status yes so now there are no changes there I think and if I open up the settings file here then I just need to do the same thing I did there and that is to add the IP address up here save so now need to commit the code again I know that this has been a little bit of a mess tutorial but hopefully it was it's able you're able to follow along um now we can say get pull to get the code yes and then we need to run the build command that is this one need to go up one folder then run it recreating so it looks like everything is okay if I go here now it gives me a bad gateway but that's just because I need to wait a little bit and now it's up again so I can try to log in and now I'm logged in great so find the properties list and the property that we just added scroll down and find this image so now you can see that we're actually showing images there so that means that we are serving the images um but why are they not throwing in the front end now we get a bad gateway on this one service engine X Resto yeah that's because the let's go up one and see the Jango BMB npm start it's because this wasn't running that's okay so the image is not loading there but why is it not loading internal server error it's trying to find images from the Local Host 8000 that's weird so we can stop this and say cat. EnV so the URLs here are correct um local poost yes I know where the error is it's actually using this URL instead of this from the settings file um we need to set the debug to be false in production so we can try to do that going to Jango BMB back end and VI Jango EnV set this to zero so that should hopefully work if I now run the build command again it should hopefully run in production I just need to wait to make sure that it is running now give us this bed Gateway again now we are in production perfect the images are still loading there and then we just need to fix the front end where we now get this but that's because we need to go into here and say mpm start to run this and I will soon make this run in the background there we have it no image you can see it's still using this one which which means that it doesn't look like the environmental file was working as it should okay so maybe we should just set it to false and just ignore this let's try that so now we need to commit this code again commit and push go to the server into the back end see jle back end get pull and build this again hopefully for the last time now and while this is starting up again we can go back to Jango BNB and say mpm start like that and then can go here refresh still gives my bad gateway but no it's running and now we don't serve the media files any longer since we are in a production okay okay so to fix that let me just here say mpm start and add the end emper sign at the end there that did not work the best way to make this running in background is to use something called pm2 so npm install DG pm2 and then we just um instruct this to run Noe in the background so we just need to wait for this to finish and then we just pm2 start npm D- name and the name for this can be Jango BNB start so now this should be running in the background refresh there were no errors which means that is now running last thing we need to fix then is why this IM image is not showing for us so I think we need to do some changes to the engine X config file here we just set up a location SL media so all urls beginning with this one should go to Alas slash and then I just need to find the correct path and that you go to us slsrc Chango BMB backend media slash so if we save this now I hopefully can commit this and pull the code just go into correct folder for the backend get pull and build this again so let's go back to the front end where we have this cannot be reached okay there's something wrong with the engine X so I think I just need to do one more change for the engine X config so this looks to be correct but I need to find the docker compost prod and add a volume here so for the web I can add media volume colon slash and then I pend this URL and add media at the end forget this one without that slash and copy this and append it actually I can take this whole thing put it in for the engine X and just remove this one I think I hope that is it so I just push all of this again and try to build it again looked a little bit better okay see one more time there's an unexpected error on line 17 don't think there are 17 lines yes there are so I forgot to add a semicolon there so let's rinse and repeat one more time head commit and push get pull and build one more time is you in service but no Declaration was found in the volumes section okay forgot one thing probably and that was to copy this media volume and append it at the end there with a colon so one more time get commit get commit and push get pull and build okay it's building now it's starting starting starting starting come on start engine X yes nice so I get a bad gateway now so we just have to wait a few seconds for everything to start so there we have it if I refresh here now you can see the image there perfect if I refresh the image is also loading here perfect which means that now we have the project running on a live you been to 20 20 sorry 2204 great if I go to through list because this to done this to done this to done and say thank you for following along I hope that it wasn't too messy with this deployment if it was try to just go over it a few times yourself and you probably will get more hang of it and what we did now for the media files you need to do with the uh static files if you want to get the admin area to work properly anyways thanks for now if you have any questions feel free to leave a comment below and I will answer as soon as I can see you in the next video

Channel: Code With Stein

Views: 2,014

Keywords: code with stein, django, learn django, django tutorial

Id: 1A1secJNA7w

Length: 78min 1sec (4681 seconds)

Published: Mon Apr 08 2024