1: Django + AWS Elastic Beanstalk configuration


Your web app should be complete and ready for development! Don't be concerned if you still want to make changes; this tutorial is designed for you to deploy your web app as practice. You will take the project down once you have successfully deployed.

 

Check your Django web app is functioning correctly

Before anything else, make sure the contact form, pages, and links all work correctly. Login into the admin page and make sure that works as well. With AWS Elastic Beanstalk, your Django web app can be deployed from the AWS EB console or the AWS Command Line Interface (CLI). For this tutorial, we will deploy from the CLI.

 

Configure your web app for AWS CLI

macOS Terminal

(Ctrl + C)

(env)User-Macbook:mysite user$

Windows Command Prompt

(Ctrl + C)

(env) C:\Users\Owner\desktop\code\env\mysite>

Ctrl + C to stop running your server. You should be in the first mysite folder with the virtual environment still activated. 

 

Create a requirements.txt

macOS Terminal

(env)User-Macbook:mysite user$ pip freeze > requirements.txt

Windows Command Prompt

(env) C:\Users\Owner\Desktop\Code\env\mysite> pip freeze > requirements.txt

Save all of your installed packages in a new file named requirements.txt. The command pip freeze > requirements.txt will automatically compile your installed packages and store them in the new file requirements.txt created in the mysite folder. 

 

View the requirements.txt file

env > mysite > requirements.txt

Django==2.1.15
django-crispy-forms==1.9.0
django-tinymce4-lite==1.7.5
jsmin==2.2.2
Pillow==7.1.0
pytz==2019.3

Open the requirements.txt file in Sublime to view all of the packages we installed.  Only edit the file if there is a package with version 0.0.0 and remove that line of code if it exists. Save the file if you made changes. 

 

Make an .ebextensions folder

macOS Terminal

(env)User-Macbook:mysite user$mkdir .ebextensions

Windows Command Prompt

(env) C:\Users\Owner\desktop\code\env\mysite>mkdir .ebextensions

Go back to the CLI and create a new folder called .ebextensions. The command mkdir .ebextensions makes a new directory or folder named .ebextensions in the mysite folder.

 

Create a new file named django.config in .ebextensions

env > mysite > .ebextensions > (New File) django.config

Create a django.config fileGIF

Open the new folder .ebextensions in Sublime and create a new file inside named django.config

 

Edit the django.config file

env > mysite > .ebextensions > django.config

option_settings:
  aws:elasticbeanstalk:container:python:
    WSGIPath: mysite/wsgi.py

Place the following configuration settings in the django.config file. Save the file. This short snippet of code allows AWS CLI EB to find the wsgi.py file that handles Web Server Gateway Interface in our Python project.

The WSGI is the standard interface for web servers to forward requests to Python web applications. 

 

Deactivate the virtual environment

macOS Terminal

(env)User-Macbook:mysite user$ deactivate
User-Macbook:mysite user$

Windows Command Prompt

(env) C:\Users\Owner\Desktop\Code\env\mysite> deactivate
C:\Users\Owner\Desktop\Code\env\mysite>

Return back to the CLI and deactivate the virtual environment. Stay in the desktop > code > env > mysite folder.








2: Deploying to AWS EB from the AWS EB CLI


Install AWS Elastic Beanstalk CLI

macOS Terminal

User-Macbook:mysite user$ pip install awsebcli --upgrade --user

Windows Command Prompt

C:\Users\Owner\Desktop\Code\env\mysite> pip install awsebcli --upgrade --user

Install the Elastic Beanstalk Command Line Interface (AWS EB CLI) in the mysite folder with the virtual environment deactivated.

 

Select your region in the AWS EB CLI

macOS Terminal

User-Macbook:mysite user$ eb init

Select a default region
1) us-east-1 : US East (N. Virginia)
2) us-west-1 : US West (N. California)
3) us-west-2 : US West (Oregon)
4) eu-west-1 : EU (Ireland)
5) eu-central-1 : EU (Frankfurt)
...
20) me-south-1 : Middle East (Bahrain)
(default is 3):

Windows Command Prompt

C:\Users\Owner\Desktop\code\env\mysite>eb init

Select a default region
1) us-east-1 : US East (N. Virginia)
2) us-west-1 : US West (N. California)
3) us-west-2 : US West (Oregon)
4) eu-west-1 : EU (Ireland)
5) eu-central-1 : EU (Frankfurt)
...
20) me-south-1 : Middle East (Bahrain)
(default is 3):

Run the command eb init and select your region.

 

Provide your AWS credentials in the AWS EB CLI

macOS Terminal

You have not yet set up your credentials or your credentials are incorrect
You must provide your credentials.
(aws-access-id):**********************
(aws-secret-key):**********************

Windows Command Prompt

You have not yet set up your credentials or your credentials are incorrect
You must provide your credentials.
(aws-access-id):**********************
(aws-secret-key):**********************

Open the previously created csv file with your AWS credentials and copy and paste them into the CLI. If you cannot find the file, create a new key pair.

 

Create your new application in the AWS EB CLI

macOS Terminal

Enter Application Name
(default is "mysite"): django-tutorial
Application django-tutorial has been created.

Windows Command Prompt

Enter Application Name
(default is "mysite"): django-tutorial
Application django-tutorial has been created.

AWS Elastic Beanstalk is comprised of applications and environments.  Think of applications as the folders that contain an environment or a Django project.  Multiple environments can be within one application. After entering your credentials, AWS CLI asks for an application name. We will call this application django-tutorial.

 

Specify your programming language

macOS Terminal

It appears you are using Python. Is this correct?
(Y/n): y


Select a platform version.
1) Python 3.6
2) Python 3.4
3) Python 3.4 (Preconfigured - Docker)
4) Python 2.7
5) Python
(default is 1): 1

Windows Command Prompt

It appears you are using Python. Is this correct?
(Y/n): y


Select a platform version.
1) Python 3.6
2) Python 3.4
3) Python 3.4 (Preconfigured - Docker)
4) Python 2.7
5) Python
(default is 1): 1

The CLI will ask if you are using Python. Type y to respond yes. Then it will ask for the platform version. select the default, 1.

 

Configure SSH security connection

macOS Terminal

Do you want to set up SSH for your instances?
(Y/n): y

Select a keypair.
1) aws-eb
2) [ Create new KeyPair ]
(default is 1): 1

Windows Command Prompt

Do you want to set up SSH for your instances?
(Y/n): y

Select a keypair.
1) aws-eb
2) [ Create new KeyPair ]
(default is 1): 1

Secure Socket Shell (SSH) is a secure connection allowing developers to remotely access a server. This connection allows users to safely access system administration and transfer files without the fear of an insecure network connection. AWS EB CLI allows you to automatically secure a SSH connection with the AWS access keys in your AWS account. Type y for yes.

Then select the keypair. Select 1 to use the same secret keypair already in use.

 

Create the environment for your project

macOS Terminal

User-Macbook:mysite user$ eb create django-env

Windows Command Prompt

C:\Users\Owner\Desktop\Code\env\mysite> eb create django-env

Run the command eb create django-env to create an new environment named django-env. The environment will initialize and begin to configure itself automatically based on the configuration files we added earlier to the project. This uploading process may take a few minutes. You can Ctrl + C during the process and nothing will be terminated. 

 

Check the status of the environment

macOS Terminal

User-Macbook:mysite user$ eb status
Environment details for: django-env
  Application name: django-tutorial
  ...
  CNAME: django-env......elasticbeanstalk.com
  ...

Windows Command Prompt

C:\Users\Owner\Desktop\Code\env\mysite> eb status
Environment details for: django-env
  Application name: django-tutorial
  ...
  CNAME: django-env......elasticbeanstalk.com
  ...

You can check the status of the environment during or after it has completed initializing. Either way, you need to run eb status to find the Elastic Beanstalk domain AWS has automatically created for your app. Look for the line of code that states the CNAME value. This is the Elastic Beanstalk domain name of your website. 

 

Add your custom EB domain name to settings.py

env > mysite > mysite > settings.py

ALLOWED_HOSTS = [
    'django-env.......elasticbeanstalk.com', 
    ]

Go back to your project in Sublime and open the settings.py file. Copy and paste the CNAME given by the eb status command under ALLOWED_HOSTS. Do not forget to place quotation marks around the domain name and save the file.

 

Change the Django debug settings in the .env file

env > mysite > .env

DEBUG =False

We have left DEBUG =True up until this point so we can still receive the yellow Django debugging page when an error occurs. But in deployment, we do not want users to get the debug page if they type in a nonexistent url, they should just get a 404 error instead.

Go into the .env file and change DEBUG =True to DEBUG =False. Save the file.

 

Upload the project to AWS EB

macOS Terminal

User-Macbook:mysite user$ eb status
Environment details for: django-env
  Application name: django-tutorial
  ...
  Status: Ready
  Health: Green

User-Macbook:mysite user$ eb deploy

Windows Command Prompt

C:\Users\Owner\Desktop\Code\env\mysite> eb status
Environment details for: django-env
  Application name: django-tutorial
  ...
  Status: Ready
  Health: Green

C:\Users\Owner\Desktop\Code\env\mysite> eb deploy

Run eb status again and find the phrases "Status: Ready" and "Health: Green" to make sure the environment initialization is complete. Then run eb deploy to begin uploading your Django project to the AWS EB server. This may take a few minutes.

 

Open the environment in the browser

macOS Terminal

User-Macbook:mysite user$ eb open

Windows Command Prompt

C:\Users\Owner\Desktop\Code\env\mysite> eb open

Run the command eb open to see your web app in the browser, deployed. You can also copy and paste the CNAME or ALLOWED_HOST in the settings.py file in a browser to view the live site. 

Deployed Django web app tutorial








3: Accessing Django admin in deployment


As of right now, you can use the Django admin in deployment but the pages lack CSS. We have to change the static files configurations to allow for the Django stylesheets. To do this, we need to gather the static files in a single directory to serve them easily in deployment. 

 

Update the project settings.py

env > mysite > mysite > settings.py

import os
from django.contrib.messages import constants as messages

...


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = 'static'

# STATICFILES_DIRS = [
#    os.path.join(BASE_DIR, "static"),
#    ]

...

Go to the settings.py file and add STATIC_ROOT, the new directory serving the files. Comment out STATICFILES_DIRS. Save the file. 

 

Reactivate the virtual environment

macOS Terminal

User-Macbook:mysite user$ cd ..

User-Macbook:env user$ source bin/activate

(env)User-Macbook:env user$ cd mysite

Windows Command Prompt

C:\Users\Owner\desktop\code\env\mysite> cd ..

C:\Users\Owner\desktop\code\env> Scripts\activate

(env)C:\Users\Owner\desktop\code\env> cd mysite

Go back to the env directory and activate the environment then enter the mysite directory.

 

Collect static in the CLI

macOS Terminal

(env)User-Macbook:mysite user$ python manage.py collectstatic

You have requested to collect static files at the destination
location as specified in your settings:

    .../env/mysite/static

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes

435 static files copied to '.../env/mysite/static'.

Windows Command Prompt

(env)C:\Users\Owner\desktop\code\env\mysite> py manage.py collectstatic

You have requested to collect static files at the destination
location as specified in your settings:

    C:\Users\Owner\Desktop\code\env\mysite\static

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes

435 static files copied to 'C:\Users\Owner\Desktop\code\env\mysite\static', 7 unmodified.

Run collectstatic to copy all files from your static folders into the STATIC_ROOT directory. When asked if you want to collect static type yes and wait for the files to be copied. 

 

Redeploy your project

macOS Terminal

(env)User-Macbook:mysite user$ deactivate

User-Macbook:mysite user$ eb deploy

Windows Command Prompt

(env)C:\Users\Owner\desktop\code\env\mysite> deactivate

C:\Users\Owner\desktop\code\env\mysite> eb deploy

Deactivate the environment and run eb deploy to push the static folder update. 

 

Access the Django admin page

Deployed Django admin with CSSGIF

Once deployed, open the browser with your deployed project and go to the admin page. It now has the CSS.








4: (Optional) Taking down your Django web app from AWS


It's time to take down the tutorial web app to make room for your real website.

 

Open the AWS Elastic Beanstalk console

Open the AWS EB consoleGIF

Login to AWS and select the region were you deployed your project. Then search for Elastic Beanstalk in the Management Console. Click on Elastic Beanstalk and your environments in that region should appear.

 

Terminate the django-env environment

Terminate AWS django-env environmentGIF

In the Elastic Beanstalk console, select "django-env", click the "Actions" dropdown menu on the right side of the page.  Select "Terminate Environment", enter the name of your environment to confirm, and click terminate.  

 

Terminate the django-tutorial application

Delete AWS EB applicationGIF

Once the environment is terminated, you are brought to the "Applications" page. Select "django-tutorial", click the "Actions" dropdown menu on the right side of the page and select "Delete application". Enter the name of the application to confirm and click delete. 






Quiz Questions


1. What will the following line create?

pip freeze>requirements.txt


2. Which command creates a connection to an AWS account by asking a user for their access keys?


Next lesson


Check out the comments and debug buttons if you get stuck.