Forem: Alyssa Mhie Matila

Deploy a Django App from GitHub on AWS Lightsail Using the Bitnami Django Stack

Alyssa Mhie Matila — Fri, 20 Dec 2024 11:22:31 +0000

In this tutorial, I'll walk you through deploying your Django web application hosted on GitHub to an AWS Lightsail instance using the Bitnami Django stack. Bitnami simplifies deployment by providing a pre-configured, production-ready environment that includes Django, web server (Nginx or Apache), and a database (PostgreSQL or MySQL).

By the end of this tutorial, you’ll have your Django project from GitHub up and running on AWS Lightsail with minimal configuration.

Why Choose AWS Lightsail for Django Deployment?

AWS Lightsail is an easy-to-use and affordable cloud service, ideal for hosting Django apps. It provides virtual private servers (instances) with simple management features like static IPs, pre-configured stacks, and predictable pricing. Here's why it's a great choice for Django:

Affordable Pricing: Low upfront costs with predictable pricing.
Simplified Setup: Easy-to-use interface for quick deployment.
Scalability: Scales well for small to medium apps.
Pre-configured Stacks: Simplified environment setup, including Django.

Step-by-Step Guide

1. Create a Lightsail Instance Using the Bitnami Django Stack

Log in to AWS Lightsail:

Go to the Amazon Lightsail Console.

Create a New Instance:

Click on Create instance in the Lightsail dashboard.
Under Applications, choose Django from the Bitnami stack options.

Select the Region closest to your target audience to reduce latency.
Choose an instance plan. The $5/month plan is suitable for small Django applications.

Name your instance (e.g., django-app-bitnami).
Download or use an existing SSH key to connect to your instance.
Click Create instance to launch your Django instance.

2. Access Your Lightsail Instance

Once your Lightsail instance is running, you’ll need to SSH into it.

Obtain the Static IP:

Go to the Networking tab in the Lightsail console.
Allocate and attach a Static IP to your Lightsail instance. This static IP will be used to access your Django application.

SSH into the Instance:

You can SSH directly from the Lightsail Console by clicking Connect, or use a terminal command:

ssh -i /path/to/your/ssh-key.pem bitnami@<your_instance_ip>

3. Clone Your Django Project from GitHub

Now that you're connected to your Lightsail instance, you can clone your Django project from GitHub.

Install Git:

First, ensure that Git is installed on your Lightsail instance:

sudo apt update
sudo apt install git

Clone Your GitHub Repository:

Now, navigate to the directory where you want to store your project (e.g., /home/bitnami/) and clone your repository:

cd /home/bitnami
git clone https://github.com/yourusername/your-django-app.git

Replace https://github.com/yourusername/your-django-app.git with the actual URL of your GitHub repository.

4. Configure Django Settings

Once you’ve cloned your Django project, you need to configure the settings.py file to ensure it works in the production environment.

Access the Django Application:

Navigate to the project directory. Bitnami installs Django in /opt/bitnami/apps/django/django-project/ by default, but your app will be in the folder you cloned from GitHub.

cd /home/bitnami/your-django-app

Edit the settings.py File:

Use a text editor like nano or vi to modify your settings.py:

sudo nano your-django-app/yourproject/settings.py

Change the following settings:

ALLOWED_HOSTS: Add your Lightsail static IP or domain (if you have one) to the ALLOWED_HOSTS list:

ALLOWED_HOSTS = ['<your_instance_ip>', 'yourdomain.com']

Database Configuration: The Bitnami stack uses PostgreSQL by default, so use the default database configuration if you're using PostgreSQL:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'bitnami_django',
        'USER': 'bn_django',
        'PASSWORD': 'yourpassword',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

Static Files Configuration: Make sure the following static files settings are correct:

STATIC_URL = '/static/'
STATIC_ROOT = '/home/bitnami/your-django-app/static'

5. Run Migrations and Collect Static Files

After configuring your settings, run migrations and collect static files.

Run Django Migrations:

Apply any database migrations:

sudo python3 manage.py migrate

Collect Static Files:

Run the following command to collect all static files into a central location:

sudo python3 manage.py collectstatic

6. Access the Application in the Browser

Once you’ve completed the above setup, your Django application should be accessible via your Lightsail instance’s static IP.

Open a browser and enter the static IP of your Lightsail instance:

http://<your_instance_ip>

You should see the Django welcome page or your application if you already have code deployed.

Try it with My Simple To-Do List App

Clone my Simple To-Do List Django App and follow these steps to deploy it on AWS Lightsail.

Conclusion

You’ve successfully deployed your Django application from GitHub on AWS Lightsail using the Bitnami Django stack. With this setup, you have:

A pre-configured, production-ready Django environment.
A PostgreSQL database.

AWS Lightsail with Bitnami provides a simple, cost-effective solution for hosting Django applications. Whether you're deploying a small personal project or a production application, this solution ensures that your Django application runs smoothly.

References

Building a Full-Stack Coffee Delivery App

Alyssa Mhie Matila — Fri, 06 Dec 2024 09:18:18 +0000

As part of our school project, we created a full-stack coffee delivery app for an existing business. The goal was to build a website where customers can order food online, track their orders, and pay seamlessly. We used a React JS frontend, MongoDB for database management, Express and Node JS for the backend, and Stripe for handling payments. Let’s walk through the main features of the app.

Project Overview:

The app is divided into four main subsystems:

Order Management
Inventory Management
Sales Management
User Management

We developed the Frontend (React JS), Admin Panel, and Backend server using Node JS, then deployed the entire application using Render.

Subsystem 1: Order Management

This subsystem allows customers to browse the menu, place orders, and track them in real-time.

Key Features:

Manage Products (Admin Panel): Admin can add new products and update the availability of items (e.g., a new smoothie or coffee). These changes reflect on the customer-facing menu instantly.
Order Placement: Customers can add products to their cart, choose between delivery or pick-up, and proceed to checkout. They can log in before completing the order.

Payment Integration (via Stripe and GCash): Customers can pay via credit card through the Stripe API or using GCash by scanning a QR code. After payment, the order is processed.

Order Tracking: Customers can track their order status (e.g., "Brewing your coffee" or "Out for delivery"). They can cancel an order if it’s still in the early stages.
Order Status Update (Admin/Employee Panel):

Admins and employees can update the order status—marking it as "brewing," "out for delivery," or "ready for pick-up."

Subsystem 2: Inventory Management

This subsystem tracks stock levels and manages ingredient supplies to ensure smooth operations.

Key Features:

Manage Ingredients: Admins can add, edit, or delete ingredients and supplies used in products.
Stock Management: Track stock in and out, and get alerts when the stock is low. This ensures that the kitchen never runs out of key ingredients.

Subsystem 3: Sales Management

This subsystem helps monitor sales and track revenue.

Key Features:

Sales Reports: Admins can generate sales reports, choose a date range, and export the data to a PDF for financial analysis. ---

Subsystem 4: User Management

This subsystem handles customer registration, login, and employee role management.

Key Features:

Customer Accounts:

Customers can create an account, log in, and view their order history. They can also reset their password if they forget it.
Employee Accounts:

Admins can create employee accounts with role-based access (e.g., rider, cashier, manager) to ensure the right people can access the necessary system features.

Technology Stack:

Frontend: React JS for a dynamic and responsive user interface.
Backend: Node.js and Express to handle server-side logic and API requests.
Database: MongoDB for storing user data, orders, and inventory.
Payment Gateway: Stripe API for processing credit card payments and GCash integration for mobile wallet payments.
Deployment: Render for hosting the entire app.

Challenges & Learning Points:

State Management in React: Using React Context and useState to manage the state across different components was essential, especially for handling cart details and order statuses.
Real-Time Updates: Integrating WebSocket or Socket.io to provide real-time updates for order tracking was crucial.
Payment Integration: The process of integrating Stripe and GCash required careful attention to security and handling payment flows correctly.

Conclusion:

This project helped us understand how to integrate different technologies into a full-stack application. It was an amazing learning experience, as we worked with everything from the frontend to the backend and managed the deployment process. Building a food delivery app also gave us insights into practical business workflows, such as order management, inventory tracking, and sales reporting.

If you're interested in building a similar project or just want to learn more about full-stack development, feel free to ask any questions in the comments!