Django, React project deployment on AWS EC2 using Nginx as webserver and Gunicorn as wsgi server

In this tutorial we will follow the steps of deploying our Django backend & react frontend project on an AWS(ec2) instance.

Step 1: Create an AWS ec2 instance
open AWS console>create EC2 instance>select ubuntu

Step 2: Add security group and create instance

Note: leave all default settings as it is and create an instance. Once an instance is created it will be a remote Ubuntu machine which you can access using an SSH key(SSH key can be downloaded during instance creation)

Step 3: Accessing AWS instance using Terminal, Putty , Mobaxterm or any other tool of your choice. here we will go with Mobaxterm.
open Mobaxterm follow
create new session>fill remote host(copy from instance property-> public IPv4 DNS)> import SSH key and hit OK

Step 4: You can access your instance by choosing from the list appearing at left panel of Mobaxterm window
it will open a terminal, the terminal will ask you your username , default for Ubuntu is “Ubuntu”(default username may be different for different types of instance)

Step 5: Check for python3 (which is already present at Ubuntu OS)
hit command

~$ sudo apt update (to update the apt)
~$ sudo apt-get install nginx
~$ sudo systemctl start nginx

Go and check public DNS address

Step 6 : (skip this step if the Nginx server is running on a public DNS server)
check is it running internally or not by

~$ curl localhost 

If this gives you html code then Nginx is working internally now issue is with your security groups > allow inbound port 80 , protocol TCP and source Anywhere
check again Nginx should be working now

Step 7: Django project directory setup
create new directory

User:~$ mkdir myproject

Install pip for package management

User:~$ sudo apt install python3-pip

Install the virtual environment for keeping isolate our project package version with other projects/global package

User:~$ sudo apt install python3-virtualenv

Create virtual environment

User:~$ virtualenv venv

Pull project from github repository

User:~$ git clone <address>

or drag drop project from local to myproject directory by using Mobaxterm

Activate virtual environment

User:~$ source venv/bin/activate

Step 8: Install all required package of your project

A better way is maintaining library list file in our project to install required libraries with supported version. in Node we maintain package.js and in Django we create a requirement.txt file, this file holds list of libraries which are in use during development.

we can create requirement.txt file at local by freeze command

pip3 freeze > requirements.txt 

Installing packages either one by one or by using requirement.txt file

pip install -r djangoproject/requirement.txt

Now you can run your WSGI server like you use during development

python3 manage.py runserver 127.0.0.1:8000

but at production we use Gunicorn wsgi server because it provides parallel processing, locking and security

Step 9: Install gunicorn

pip3 install gunicorn

Start gunicorn server

gunicorn — bind 0.0.0.0:8080

Now we need to move to Nginx configuration for proper handshaking with gunicorn. before that just collect all static files in Django

python3 manage.py collectstatic

give the static_root folder address in settings.py, we are going to configure the same name at Nginx

Step 10: Configure Nginx

cd etc/nginx/sites-available
etc/nginx/sites-available :~$ sudo vi default

We need to configure three things here gunicorn port, static files and media files address as shown

Steps 11: If you have followed all steps correctly and today your luck is good then I’m dame sure your project will be running on the public DNS address.
Good luck ! have an energetic day.