Deploying Full-Stack Applications with Django and Vue on AWS Ec2

Part III | Part I | Part II | Part IV

Back-End Deployment_Steps 

Step 1: 

Login to Instance via Terminal 

ssh into Your EC2 Instance 

ssh <username>@<instanceip>

Login via key-pair

ssh -i /path/to/your/key.pem ubuntu@your_ec2_ip

Step 2: 

run prep-ubuntu.sh 

sh prep-ubuntu.sh

• Where prep-ubuntu.sh contains Following Commands

sudo useradd -m -s /bin/bash debian
sudo apt update -y
sudo apt upgrade -y
sudo apt install software-properties-common -y
sudo add-apt-repository ppa:deadsnakes/ppa -y
sudo apt update -y

sudo apt install python3.8 python3.8-dev python3.8-venv python3.8-distutils -y
sudo apt install gcc g++ make curl nginx supervisor \python3-certbot-nginx\postgresql git vim selinux-utils -y

icurl -sL https://deb.nodesource.com/setup_18.x | sudo bash -
sudo apt -y install nodejs

sudo apt install gnupg2 -y
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update -y  && sudo apt install yarn -y
 

Step 3

Switch to Django User  

sudo su - debian

Step 4

Clone Project 

If you have the project ready on Github, clone it under the same location: /home/ubuntu. Alternatively, use the SCP method to upload the data and extract it under the same location.

git clone https://gitlab.com/web/project.git 

followed by Enter Gitlab / Github User Name and Password.where https://github.com/web/project.git is the link to your repository

Step 5 

Set Up a Virtual Environment

It’s recommended that you set up a virtual environment for the installation of your project’s dependencies. In this case, the assumption is that you are in the location /home/ubuntu.

python3 -m venv env

source env/bin/activate

pip install --upgrade pip

pip install wheel

Step 6 

Install Requirements.txt file

pip install -r requirements.txt

pip install gunicorn

Where requirements.txt contains all dependencies like 

asgiref==3.8.1
Django==4.2.16
django-environ==0.11.2
django-recaptcha==4.0.0
psycopg2-binary==2.9.10
python-dotenv==1.0.1
sqlparse==0.5.2
typing_extensions==4.12.2

Step 7

Gunicorn  Configurations

Navigate to the supervisor folder, create file gunicorn.conf and add the gunicorn code as below:

cd /etc/supervisor/conf.d/

sudo vim gunicorn.conf

# then add the following

[program:project]
command = /home/debian/project/gunicorn_start.bash                   ; Command to start app
user =debian                                                         ; User to run as
stdout_logfile = /home/debian/project/logs/gunicorn_supervisor.log   ; Where to write log messages
redirect_stderr = true                                               ; Save stderr in the same log
environment=LANG=en_US.UTF-8,LC_ALL=en_US.UTF-8                      ; Set UTF-8 as default encoding
autostart=true
autorestart=true

The assumptions made:

• Your project sits on /home/debian/project
• Your project’s wsgi file sits /home/debian/project/project
• Your virtualenv is named env and sits in the path: /home/debian/env ;  Adjust the paths as needed to match your exact paths.

Step 8 

Create the folders that will hold the error log files

sudo mkdir /var/log/gunicorn

Step 9

Create Nginx File and place to following location

cd /etc/nginx/sites-available/

sudo vim projectname.conf

# then add the following code for Backend deployment of  Nginx Configuration

server {
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/css application/json application/javascript text/xml application/xml;
server_name chadura.com;
client_max_body_size 4G;
access_log /home/debian/myproject/logs/nginx-access.log;
error_log /home/debian/myproject/logs/nginx-error.log;
location /static/ {
alias   /home/debian/myproject/static/;
}
location /media/ {
alias   /home/debian/myproject/media/;
}
# Error pages
error_page 500 502 503 504 /500.html;
location = /500.html {
root /home/debian/myproject/src/templates;
}
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_read_timeout 300s;
proxy_connect_timeout 300s;
proxy_request_buffering off;
proxy_buffering off;
if (!-f $request_filename) {
proxy_pass http://unix:/home/debian/myproject/env/run/gunicorn.sock;
break;
}
}

# then add the following code for Backend deployment of  Nginx Configuration

server {
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 7;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
server_name dev.chadura.com;
root /var/www/html/project;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
server {
if ($host = <server name>) {
return 301 https://$host$request_uri;
}

At this stage, the website should be reachable. If you set up the server name as the IP, access your website using the IP; if you used both the IP and the domain, it should be accessible on the domain name as well: ensure to link your DNS records for your domain name with the server IP. See a video on how to point the DNS for your domain name to your Instance IP on Cloudlare

Step 9

Create a Symbolic link /etc/nginx/sites-available/ to /etc/nginx/sites-enable/

sudo ln -sf /etc/nginx/sites-available/project_backend.conf /etc/nginx/sites-enable/project_backend.conf

Step 10 

Switch into user : Postgress 

sudo su - postgress

connect to a PostgreSQL database

psql

Create a database

Create database project;

Create a User and Password

create user project_admin with password 'aaxfgbnlp@34';

Grand all Permissions to Database and User

grant all privileges on database project to project_admin;

Step 11

• The command python3 manage.py makemigrations accounts is used to create migration files for the specified app, in this case, accounts.

• What It Does: It analyzes the current state of your models (defined in models.py within the accounts app) and generates migration files that contain the necessary operations to apply those changes to the database schema. This includes creating new tables, altering existing ones, or removing fields

python3 manage.py makemigrations accounts

python3 manage.py migrate 

Step 12

# check or test nginx status 

sudo nginx -t

Step 13

python3/src/manage.py collectstatic --clear --no-input 

collectstatic: This command gathers all static files from various locations in your Django project (such as app directories and any specified static directories) and collects them into a single location specified by the STATIC_ROOT setting in your Django settings file. This is particularly useful for deploying your application to production, where a web server will serve these static files.

• Options Explained

--clear:

• This option tells Django to delete all existing files in the STATIC_ROOT directory before collecting the new static files. This ensures that outdated or obsolete static files are removed, preventing potential conflicts or issues with old assets being served.

--no-input:

• This option suppresses any interactive prompts during the execution of the command. It is particularly useful in automated deployment scripts or environments (like CI/CD pipelines) where user input is not possible or desired. By using this flag, the command will run without asking for confirmation, making it suitable for automated processes.

Step 14

Get SSL Certificate

sudo certbot --nginx

• Certbot: This is a client that interacts with the Let's Encrypt CA to automate the process of obtaining and renewing SSL certificates. It simplifies the management of SSL certificates, making it easier for web administrators to secure their websites.

• --nginx: This option tells Certbot to use the NGINX plugin to automatically configure SSL for your NGINX web server. The plugin will:

  • Automatically detect NGINX server blocks (virtual hosts) configured on your server.

  • Obtain a certificate for the specified domains.

  • Automatically update the NGINX configuration to enable HTTPS, including setting up redirects from HTTP to HTTPS.

Step 15

Restart Server

/home/django/ceroai/deploy/restart_server.sh

This is the path to the shell script that is intended to restart a server or service. The specific actions performed by this script depend on its contents.

Front-End Deployment Steps 

Step 1

Before that first check the nodejs version

sudo apt install nodejs

node -V

Node.js enables JavaScript to be used for server-side programming, allowing developers to build full-stack applications using a single language. It operates independently of the browser, making it suitable for various applications beyond client-side scripting

Step 2

run yarn

Yarn is a package manager for JavaScript projects that helps manage dependencies, run scripts, and maintain project configurations. 

yarn

yarn run build

Step 3

To create a Project related Directory 

sudo mkdir /var/www/html/project

Step 4

Copy all dist directory Files into this path /var/www/html

cp -rvf dist/* /var/www/html/projectname

Step 5

Create Soft link for nginix file

sudo ln -sf /etc/nginx/sites-available/projectname.conf /etc/nginx/sites-enable/projectname.conf 

Step 6

Create a logs Directory Under Following Path

mkdir /home/debian/myproject/project/client/logs/

Step 7

Check nginx Status

sudo nginx -t

Step 8

Create SSL Certification

sudo certbot --nginx