Deploying a Django-Vue application on AWS EC2 using NGINX

A simple approach to hosting two Servers on a single EC2 Instance

• Port 80 - Vue.js frontend serve

• Port 8000 - Django backend serve

1. Create an EC2 instance

• Choose your desired Amazon Machine Image (AMI)

  • I chose Ubuntu 16.04

    • I love Ubuntu

2. Create a PEM key

• If you don't have a previously generated PEM key, you will be asked whether to create a PEM key after instance creation, and you can create one at that time

  • The PEM Key must be stored in a safe place!

  • Since anyone who possesses the private key can connect to the instance, the private key must be stored in a secure location!

3. Connect to EC2

3-1. Navigate to the path where the PEM key is stored

cd ~/[path where PEM Key is stored]

3-2. Change access permissions

sudo chmod 400 [PEM Key name]

• chmod is a command to change file access permissions

  • 400 grants read permission to the file owner

3-3. Connect to EC2 using the ssh command

1. In the AWS console's EC2 Instance list, select the instance you want to connect to and click Connect, and a modal window with connection instructions will appear

2. Copy the command that starts with ssh -i

3. Execute that command from where the PEM Key is stored

   • After doing this, you will be connected to the Ubuntu Bash!

4. Install the files needed for deployment on EC2

4-1. Install nvm

sudo apt update  # update

sudo apt install -y build-essentail libssl-dev
sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

• Node will actually be installed all at once later after running apt update and modifying & applying .bashrc

4-2. Install python 3.7

sudo apt install software-properties-common    # Install to use the add-apt-repository command on Ubuntu 16.04
sudo add-apt-repository ppa:deadsnakes/ppa     # Enter the package repository to install Python 3.7

sudo apt update
sudo apt upgrade # update & upgrade

sudo apt install -y python3.7    # Without -y, it asks yes or no
python3.7 --version         # python --version won't work yet

sudo apt-get install python3-pip # Install because it says pip is not found!!!!!

python3.7 -m pip install pip   # Install pip that uses python3.7
pip3.7 --version             # It's inconvenient to type pip3.7

4-3. Set aliases in .bashrc

$ sudo vim ~/.bashrc       # Use sudo for all vim commands
# Press uppercase G (shift + g) to go to the bottom
# Then press i to switch to Insert mode

• Enter the following aliases

  alias python="python3.7"
  alias pip="pip3.7"

• Save and exit with esc + :wq + enter

• Apply the modified values immediately with the source command

  source ~/.bashrc

4-4. Install node & npm

nvm install 12.15.0
node -v
npm -v

4-5. Install nginx

sudo apt install -y nginx

• Will serve the built files using nginx

5. Configure Security Group

: Configure the security group for the EC2 instance in the AWS console

5-2. Create Security Group

• Since this security group will allow ports 80 and 8000

  • The security group name is set to 80-8000,

  • and the description says "Allow 80-8000"

5-2. Set Inbound Rules

• Add Inbound rules for ports 80 and 8000

6. Check nginx status

sudo service nginx status

• Verify that Active: active (running) appears

• Copy the address that appears when you click on the instance in the AWS Console's Instance list and run it in the Browser; the following screen should appear

7. Clone the project to deploy

7-1. clone

git clone [project web URL]

7-2 Install required packages for Frontend & build

cd frontend
npm install
npm run build

8. Prepare for serving

8-1. Modify nginx.conf

cd /etc/nginx

ls # Verify that nginx.conf exists

sudo vi nginx.conf

• Change enabled to available in include /etc/nginx/sites-enabled/*.conf;

  • After modification: include /etc/nginx/sites-available/*.conf;

• Save and exit

8-2. Modify sites-available

cd sites-available

ls # Verify that default exists

sudo vi default

• Remove everything except comments, then add the following content

  server {
          listen 80;
          location / {
                  root /home/ubuntu/[project name]/frontend/build;
                  index index.html index.htm;
                  try_files $uri $uri/ /index.html;
          }
  }

• Save and exit with :wq

8-3. Restart nginx

sudo service nginx restart

• You can verify that the Frontend is being served by accessing the site URL

9. MySQL Setup

9-1. Install

sudo apt update && sudo apt upgrade # Update the apt package installer

sudo apt install mysql-server

sudo apt install libmysqlclient-dev

sudo apt install python3.7-dev

9-2. Set up root account

sudo mysql_secure_installation

• Set the password after entering the command

9-3. Try connecting with root account

sudo mysql -u root -p

• Enter the configured password after entering the command

9-4. Create database

mysql> create database [database name];

10 . Configure .env file

sudo vi .env

• Enter the required content and exit

11. Set up backend virtual environment

11-1. Install pipenv

cd ~/[project name]/backend

pip install pipenv --three

11-2. Activate the virtual environment

pipenv shell

11-3. Install required packages

pipenv install -r requirements.txt

pipenv install mysql-client

12. Configure gunicorn

12-1. Install gunicorn

pipenv install gunicorn

12-2. gunicorn

• web server gateway interface

  gunicorn django_server.wsgi:application -b 0.0.0.0:8000  --daemon

  • Adding --daemon runs it in the Background

12-3. Verify it is running properly

lsof -i TCP:8000

12-4. Restart nginx

sudo service nginx restart

Deployment complete~

+

Redeployment

With the current approach, redeployment is really, really inefficient! Planning to automate it!!!! I can't just leave it like this!!!!!!!!

When backend is modified

lsof -i TCP:8000

sudo kill -9 pid_number

git pull origin master

cd backend

pipenv shell

gunicorn django_server.wsgi:application -b 0.0.0.0:8000 --daemon

sudo service nginx restart

When frontend is modified

git pull origin master

cd frontend

npm run build

sudo service nginx restart