🚀 Deploying an Expense Tracker WebApp with Nginx and MySQL

Introduction

In this guide, we will deploy the Expenses Tracker WebApp using Nginx as a reverse proxy and MySQL as the database. This project helps users track their expenses efficiently and is built using a frontend-backend architecture.

🔗 GitHub Repository: Expenses Tracker WebApp

Prerequisites

A Linux server (Ubuntu 22.04 recommended)
Domain name (optional but recommended for SSL)
Basic knowledge of Linux commands

Step 1: Setting Up the Server

Update and upgrade your system:

sudo apt update && sudo apt upgrade -y

Install required dependencies:

sudo apt install -y git curl unzip nginx mysql-server

Step 2: Clone the Project Repository

git clone https://github.com/LondheShubham153/Expenses-Tracker-WebApp.git
cd Expenses-Tracker-WebApp

Step 3: Configure MySQL Database

Start MySQL service:

sudo systemctl start mysql
sudo systemctl enable mysql

sudo mysql -u root -p

Create a new database and user:

CREATE DATABASE expenses_tracker;
CREATE USER 'expense_user'@'localhost' IDENTIFIED BY 'StrongPassword';
GRANT ALL PRIVILEGES ON expenses_tracker.* TO 'expense_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

Step 4: Configure Environment Variables

Edit the .env file in the project and update MySQL credentials:

DB_HOST=localhost
DB_USER=expense_user
DB_PASSWORD=StrongPassword
DB_NAME=expenses_tracker

Step 5: Set Up the Backend

Navigate to the backend directory and install dependencies:

cd backend
sudo apt install -y python3 python3-pip python3-venv
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Run database migrations:

python manage.py migrate

Start the backend server:

python manage.py runserver 0.0.0.0:8000

Step 6: Set Up the Frontend

Navigate to the frontend directory and install dependencies:

cd ../frontend
sudo apt install -y nodejs npm
npm install
npm run build

Step 7: Configure Nginx as a Reverse Proxy

Create a new Nginx configuration:

sudo nano /etc/nginx/sites-available/expenses_tracker

Add the following configuration:

server {
    listen 80;
    server_name your_domain_or_ip;

    location / {
        root /path_to_project/frontend/build;
        index index.html;
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Enable and restart Nginx:

sudo ln -s /etc/nginx/sites-available/expenses_tracker /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Step 8: Secure the Server (Optional)

To enable HTTPS, install Let's Encrypt SSL:

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d your_domain_or_ip

Step 9: Test the Deployment

Open http://your_domain_or_ip to access the frontend.
The backend should be accessible at http://your_domain_or_ip/api/.

Step 10: Final Out Put

Conclusion

Congratulations! 🎉 You have successfully deployed the Expense Tracker WebApp using Nginx and MySQL. This setup ensures efficient handling of requests and a structured database system for tracking expenses.

Let me know in the comments if you face any issues! 🚀