Building a Django Digital Clock App with CI/CD using GitHub Actions and Deploying to AWS

Building a Django Digital Clock App with CI/CD using GitHub Actions and Deploying to AWS

May 29, 2023ยท

3 min read

Play this article

๐Ÿ“ Introduction:

In this tutorial, we will create a simple Django digital clock application, set up a CI/CD pipeline using GitHub Actions, and deploy the app to AWS Elastic Beanstalk. We will walk through each step, from creating the Django app to deploying it on AWS.

๐Ÿ”น Prerequisites:

  • Basic knowledge of Python and Django

  • A GitHub account

  • An AWS account

๐Ÿ”น Step 1: Create the Django Digital Clock Application

1.1. Create a new Django project named digital_clock by running the following command:

django-admin startproject digital_clock

1.2. Create a new Django app named clock by running the following command:

python manage.py startapp clock

1.3. In clock/views.py, add the following code:

from django.shortcuts import render
import datetime

def digital_clock(request):
    current_time = datetime.datetime.now().strftime('%H:%M:%S')
    return render(request, 'clock.html', {'time': current_time})

1.4. In digital_clock/urls.py, add the following code:

from django.urls import path
from clock.views import digital_clock

urlpatterns = [
    path('', digital_clock, name='digital_clock'),
]

1.5. Create a new folder named templates inside the clock app directory and a new file named clock.html inside it. Add the following code to clock.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock</title>
</head>
<body>
    <h1>Current Time: {{ time }}</h1>
</body>
</html>

๐Ÿ”น Step 2: Add Pytest Tests

2.1. Create a directory named tests inside the clock app directory and a file named test_views.py inside it. Add the following code to test_views.py:

import pytest
from django.urls import reverse
from django.test import Client
import re

@pytest.fixture
def client():
    client = Client()
    return client

def test_digital_clock(client):
    response = client.get(reverse('digital_clock'))
    assert response.status_code == 200
    assert b'Current Time:' in response.content
    assert re.search(rb'\d{2}:\d{2}:\d{2}', response.content) is not None

๐Ÿ”น Step 3: Create the GitHub Actions Workflow

3.1. In your project's root directory, create a new directory named .github and a subdirectory named workflows. Inside workflows, create a file named ci-cd.yml. Add the following code to ci-cd.yml:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Python
      uses: actions/setup-python@v2
      with:
        python-version: 3.8

    - name: Install dependencies
      run: |
        python -m pip install --upgrade pip
        pip install -r requirements.txt

    - name: Run tests
      run: pytest

  deploy:
    needs: build-and-test
    runs-on: ubuntu-latest
    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Python
      uses: actions/setup-python@v2
      with:
        python-version: 3.8

    - name: Install dependencies
      run: |
        python -m pip install --upgrade pip
        pip install -r requirements.txt

    - name: Install AWS CLI
      run: |
        sudo apt-get update
        sudo apt-get install -y awscli

    - name: Configure AWS credentials
      run: |
        aws configure set aws_access_key_id ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws configure set aws_secret_access_key ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws configure set default.region ${{ secrets.AWS_REGION }}

    - name: Deploy to AWS Elastic Beanstalk
      run: |
        eb init -p python-3.8 digital-clock --region ${{ secrets.AWS_REGION }}
        eb deploy

๐Ÿ”น Step 4: Deploy to AWS Elastic Beanstalk

4.1. In the AWS Management Console, navigate to Elastic Beanstalk. 4.2. Click on "Create Application" and enter a name for your application. 4.3. Click on "Create Environment" and select "Web server environment". 4.4. Choose a platform that supports Python 3.8 and click "Create environment". 4.5. Once your environment is created, click on "Configuration" in the left-hand menu. 4.6. Under "Software", click on "Edit". 4.7. In the "WSGI path" field, enter digital_clock/wsgi.py. 4.8. Click on "Apply". 4.9. In your GitHub repository, go to "Settings" > "Secrets" and create three new secrets named AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, and AWS_REGION. 4.10. Paste your AWS access key ID, secret access key, and region into the value fields of the corresponding secrets.

๐Ÿ“ Conclusion:

Now you have successfully created a Django digital clock app, set up a CI/CD pipeline using GitHub Actions, and deployed the app to AWS Elastic Beanstalk. Whenever you push changes to your main branch, the workflow will automatically build, test, and deploy your Django app to AWS Elastic Beanstalk.

๐Ÿ”น Checkout GitHub Repository for projects:

๐Ÿ”— github.com/sumanprasad007

Did you find this article valuable?

Support Prasad Suman Mohan by becoming a sponsor. Any amount is appreciated!

ย