Django Deployment: How to deploy Django app to server using Nginx + Uvicorn | Django deploy tutorial

this video is about how to deploy django project with the postgres sql database on a remote server with nginx and uvicorn and you can see here this django app deployed it's merely django template that renders a vue.js object and this vue.js object works as a bunch of static files that were generated by webpack this django project is based on the video about integration view and jungle this one but for the sake of demonstration i will repeat the project in this video the project is deployed on remote ubuntu server 2004 this ubuntu is running on virtual machine but actually it doesn't matter because the process of junk deployment will be absolutely the same for any ubuntu instance whether it is a running on digital ocean server or online nodes or fastvps server doesn't matter all you need from your vps provider is an ip address login and password of your user and the ssh should be enabled of course if you want to practice a bit on a virtual machine you need to set up in the settings network top breached adapter in the description to this django deployment tutorial i'll put time codes for your convenience and links to the gist with the commands and the code by the way if you'd like to watch another video about django deployment in a certain configuration let me know about it in the comments but anyway please don't forget to leave a comment and to like the video it helps to promote the channel so my plan is first of all i need a jungle project with vue.js front end then i have to prepare my jungle project for deployment i will use a dot and file to store sensitive information like a secret key i'll show how to do it then i have to clone the github repo with this django project and then i need to configure the server machine so let's start with creating a new jungle project with the view for django projects i need to create a virtual environment usually i use virtual and but now i'll create it with built in end so python m the f and the name of the virtual environment is the vm now i have to activate it i need the source in the end folder bin user top to get autocomplete for paths and file names it's activated we can see the name of the virtual environment here within parenthesis and now i need to install jango in vue.js okay there's d to install it globally okay then i want to create a folder for the project let's say it will be the app folder you can use make their command then i need to get into this app folder and inside the app folder i want to create a new jungle project drag view for example django admin start project dj view and i want to rename this folder to backhand backend now i want to create a view app again within the app folder you create front and let's say it'll be view three okay i want to open autumn and now in the backend folder on the level of the manage py file i want to create the templates folder and the static folder templates static and then in the settings py file i want to append that there's last of the templates list with the templates folder on this one it will be base der and capital join path and templates and for the static folder i have to create the static files there's list join path static the next step is to create two templates so in the templates folder i want to create the base html file and the index index.html the npm run build command will produce some html file by default it's an index.html that will use all vue.js static files javascript and css and so our task is to extend ajangas base html file template with html that will be bundled by view as i said by default index html too but we will rename it so the base html file is the main file of our project and i want to start with it i need a block it will be html then i need standard layout something like this and then i want to wrap the body with the sun block body block and inside the body block i want to have the content block then i need the extending template it will be the view index.html that we can find in the front and folder inside the public this index.html this index.html will extend janga base html file extends base html then again i need a block html and i want to wrap this code with a html block then the body tag here i want to delete the mount point cut cut it and of course i need the body block let's delete it too and i want to use a blocks uber here block super means that here will be pasted the content of the body block of the base html file that's it this file will be renamed by the pack to the base view html file we will configure it later and the last template i want to use is the index html template the index of jungle templates and it's very simple it will extend the base view html file view right now it's the index file in the front and public folder but we will rename it later and then i need the content block content where i want to define an h2 header for example with a some content for example and i need an amount point of view object it's just a dev with the app id and that's it and now i need a view in the root urls pwi file let's import the template view and the the handler of all requests to the root url will be the template view i need a new route so it's the template view i'm calling the as view method and its argument the template name will be index html and the last thing i have to do i have to configure webpack in the front and the folder i have to create view config js file here i want to paste the code from my guest the link will be in the description and in this config the important thing is outputter it's the directory where the pack will bundle all static files now this part is the configuration of the dev server so let's test it so first of all i need the front-end folder npm run server and then let's run the jungle server okay okay now we can see our django template h2 and vue.js object okay css of django admin works well great let's change something for example this header source i need an app view and for example the message will be janga and wjs deployment yep we can see that the header was changed great everything is working let's stop our front-end server and let's build static files run build okay we can see in the static folder the dist directory with the static files let's refresh the page control f5 nothing changed and we can see django uses static files generated by webpack okay the second part of my django deployment tutorial now i have to prepare the jungle project for production the preparation is actually depends on the project itself but there is a official deployment checklist ojanga you can read it but for this tiny project i have at least to hide the secret key from settings py file this one and a good practice is to use dot n file to store such sensitive data to load them automatically we can use python.nf package let's install it let's stop django pip install python and by the way let's install also postgres sql python driver cycle pg2 and its binaries i go pg to binary let's create the requirements txt pip freeze requirements in the backend folder and here i want to delete all except the packages i installed manually so i need janga and that's it okay let's create dot and file in the janga backend folder dot n and here i want to move the secret key and in the settings vy file let's import the auth module mouse and let's import the load.nf function from dot and package import load the 10 let's call it the dot and package reads the dot n file and loads its content as environment variables and then we can define the secret key this way let's delete it i need the environ dictionary it's a dictionary i call the get methods and i want to get the value of the secret key otherwise we can use some random string as the default value okay and of course we need to hide the secret key before the initial commit and the last thing i have to do here i have to define the static root variable what is the difference between static files and static root the static files doors stores our custom static files that can be used anywhere in our projects and also in this directory we pack bundled vue.js static files as we described in the viewconfig.js file as you may probably know when we deploy django project we have to execute the collect static command and the collect static command will gather all static files from entire django project including static files theirs and we'll put them into the static root directory if the static root will be the same as the static files there's it will cause an error because the collect static command will get into the recursion but django won't select you to execute collect study command if the static root and static files theirs will match so i have to define this path usually static files are stored in var www directory but it depends on your hoster for this project i will use just the static files directory so i need again the the base dir variable it's an instance of the path class and the new directory will be static files and of course we can add media folders the same way so media url will be just media media root now i want to emit a git repo in the root directory of the project view creates a git repo by the way i want to delete it from front end folder and i want to move git ignore to root directory of our project so let's add the dot and file also by cache pi c files maybe sqlite and that's it let's get opera to the app folder get in it and i think it's time to make a commit git and hit commit and initial commit okay now i need to create a public github repo so it will have the short name jungle view i am choosing ssh and i want to use this command paste it here enter and let's push it get push your origin master okay f5 we can see our project in github repo then i need to configure this server i want to remind you that you need from your vps provider an api address of the server or the domain name if you have one and also you need to know the login the username and the password and of course ssh should be also enabled on your server i will use ubuntu server 2004 that is running in a virtual machine but again it doesn't matter if you want to practice in deployment or just in linux administration it's a quite good option so ubuntu is loaded and i need to get its ip address just input in the terminal ip editor command ip sorry and here in this output you will see the line with the i net and then some ip inet is the ip of version 4. i net 6 is the ip of the version 6. i need the inet address i wrote it down on a sheet of paper and now i am opening a new terminal and the input ssh then i have to specify the user name of the server it's a django in my case ads and then i have to specify the ip address or domain name yes the password okay we can see that the command prompt is changed it became janga and after the add character the name of the server first of all we have to update the system so sudo opt update and end sudo opt up grade and yes yes for all sudo it's a short for super user do it means that the following command will be executed by an administrator opt is a package manager for ubuntu like pip for python or npm for node.js and this process will take some time the clear command to clear the screen or just ctrl l now let's look around what we have here python dash v not found python3-v okay they have python38 then pep no pip pip three no bip okay and get i have get so now we need to install some packages so don't opt again install command and we need pip python pep python dev sorry three python three python 3 vm then we need lib pqdf it's a library for psycho pg2 and then we need a post grassql itself postgres sql contrib then we need the engine x and super visor we need of course pip we need it's uh some python headers to compile packages uh python virtual environment it's a library for postgres python driver postgres itself engine x to handle our static files and supervisor is the process manager it will be responsible for starting and restarting our jungle app that's it yes okay ctrl a to clear the screen so i want to check whether the postgres sql is running service post rescue status okay it's running then i want to create a postgres database i have to enter into the database shell with a postgres user that is already created during the installation process so i need sudo dash you user post ingress and psql and we can see that the shell prompt is changed and we are in postgresql okay let's create a database we can do it with a create data base command then it gets the name of the database as an argument let's say it will be test db semicolon we can list all databases with the backslash l our database then i want to create a database user for example it will be jango user create user the name django underscore user with the pass word and it will be a very easy password for the sake of this demonstration semicolon then i have to set a default encoding for this jungle user because by default it is not utf-8 alter role jang user set client the score and according to utf-8 semicon then um i think that i want to set the isolation level to read only committed changes again alter rule jung user set i pressed the up key to get the last inputted command so the default underscore transaction underscore isolation to read committed semicolon miss print okay control a and at last i want to grant all privileges to our jungle user grant database name it's the test db to whom to jungle user semicolon and that's it backslash q to quit now let's clone our project from github code i want to use https copy it git clone ctrl shift v to paste the length okay let's get into it and then here i want to create a virtual environment so again 3 v python 3 m v f v f okay let's activate its source v and top b top ac tab we got activated virtual environment we end now let's get into our back-end folder cd back-end and let's install all python requirements pip install there are requirements.txt okay and now in the backend folder i want to create dot n file and to edit files i will use them you can use nana editor for example nano dot f this way dot n and here i won't just copy the content of the dot n file ctrl c paste column w to write and q to quit and by the way i need to update the settings poi file to use postgresql database instead of sqlite so i need a drawing view folder and i need settings py settings py databases default postgresql on the score cycle pg2 then the name of the database it's the test underscore db then the user it's a jungle underscore user the password one two three four of course this data the name of the database the username the password should be in the dot n file the host it's a local host the host is the local host because the postgres sql is hosted on the same server as our jungle project and the port it's five four three two the default ports of the postgres sql and uh write and quit so now let's apply migrations we need manage py file python manage py or jazz dot and manage py migrate and we can see that everything is all right and it means that we configured our postgres sql right now i want to collect static files manage py connect static we can see that 135 static files copied two static files there we got the static files directory and we can see that there are admin and this directories okay then i think we need to install uv cord tip install uv corn before jungle 3 django was synchronous and we used g-unicorn as a v-interface between server and our python code django project of flask project and django 3 became asynchronous and deployed jungle 3 with due unicorn became a bit tricky so it's more convenient now to use a uv corner so let's test where the uv corner can connect to our janga app python m uv corn and then i have to specify the path to the application a variable drag view it's a it's a folder where settings py is located and there is a ask apy file and it has the application definition and i have to specify the path to this variable sorry yep python m ufcorn we need djangoview folder dot osgi colon application uv corner will use sockets so i need uds argument uds it's a unix domain socket it means that uv corner will work via socket in unix world everything is a file sockets are files too so we need to specify the path to the file i think it will be the tmp folder temporary folder and the corn dot sock info info info and it means that everything is all right ctrl c to stop it and now we need to configure the supervisor process manager i want to set that uv recorder have to work with our jungle app so let's open this supervisor config file so do all them etc folder supervisor supervisor d dot conf and somewhere at the bottom i want to add a new section program column jungle and the first setting here is the comment command that equals that equals to the command that we just used in the shell and the first part of this command is the path to the python interpreter in the shell we used just python because we are working from inside the virtual environment but here we have to specify the absolute path to the python interpreter we used and to get the full path to get the absolute path we can use pwd linux command so i want to save it and quit and i need our vm folder cd vnf then cd bin and we can see here python 3 and python binary files this is the files that virtual environment uses so pwd command and i need this path copy doesn't matter actually supervisor deconf and here let's paste it python python 3 maybe m uav corn then i have to specify the path to the ascii application drag dot sock yup then the directory the directory is the directory where our jungle project is located it's in the back end folder so we need drag view back and that's it then also if jungkook will raise an exception i want to see it so i have to set the log files just copy and paste it from my guest the link will be in the description and that's it now as we changed supervisor settings we so need to restart it sudo service supervisor restart okay and let's look at the error lock the tail command var logger long error lock everything is in and it means that everything is all right the tail is the linux command that displays the end of the file very useful because the logs can be really huge and with the tail command we can see what happened recently and we can see here that everything is all right and it means that the supervisor starts our jungle app now i need to configure engine x first of all let's back up default nginx config file so do cp to copy we need etc engine x sites available and it's the default file name and i want to copy it to the same folder defaults but back up then i want to open it with bim and here i want to comment all these lines and again i just want to paste settings of engine x from my guest paste so the server will lessen the 18th port the server name is the domain name or ip address you use the charge set utf 8 the client max body size it's uh the maximum file size that can be uploaded to our django app then the important thing it's the location of our static root directory to get the absolute path we can use the pwd comments as we did before so jungle view back and static files the same for media and the location of the route then location of the route all requests to the root address will be proxied by uv corn proxy pass http uv corn and the upstream server unix tmp uv coordinate stock that's it w q took with to save and quit and then we have to restart engine x so do service engine x restart so now let's open our browser and input our domain name or in my case i will use ip dissolved host at i have to specify my ip address or domain name in allowed hosts so let's open under settings py file back end jungle view then settings and gg if you use vm to get back to the start of the file and here the allowed hosts variable and i have to specify here my ip address let's restart supervisor and again oops i have no view so let's check our paths ssh jungle anjangar is running but they have no vuo js object and it means that these static files are not loaded so something wrong with the path and i want to check it cd djv cd backhand i need the static files directory cd static files pwd command and this is the absolute path to this static files command okay let's look at the engine x um configuration why engine x because engine x handles the static files the supervisor is running normally and the uv cord is running normally because we can see janga page so we need nginx so do them ekc engine x sites available default okay and the static folder is different i miss print drag view but i have to use a djv the same for media okay let's check it w to write and q to quit and let's restart nginx and the next restart let's check it now ctrl f5 and we can see our static files now let's get to admin panel and we can see that the admin panel has its own css everything is all right but by the way it's a good idea to move the admin panel address to another route to something different from admin so nevertheless it's working and the last thing i have to do i have to to change the debug variable to false ls lam settings and i need false i want to restart supervisor sudo service super visor restart okay and then it's working let's get something wrong okay i hope that this video was useful for you please let me know about it in comments also if you have suggestions let me know about them too if you like the video please leave a like and subscribe to the channel thanks for watching you

Channel: Red Eyed Coder Club

Views: 1,202

Keywords: django, deploy django, django deployment, deploy django on server, django deploy, django vue deploy, deploy django website project of server, red eyed coder club, django deployment nginx, django deploy uvicorn, django nginx, deploy django project, deploy django app, django nginx static files, nginx django deploy, deploy django using nginx, django server setup, django production server setup, server setup for django, django nginx uvicorn, django uvicorn, uvicorn django

Id: TLhkmXnmguI

Length: 50min 4sec (3004 seconds)

Published: Mon Oct 04 2021