DEV Community

Yash Sonawane
Yash Sonawane

Posted on

2 1 2 2 2

Deploying a Web App with Nginx, MySQL, and AWS: A Step-by-Step Guide

Introduction

Imagine you’ve built an amazing web application, but now comes the crucial part—deployment. You need a scalable, high-performance, and reliable way to serve your users. This is where Nginx, MySQL, and AWS come into play.

In this guide, we’ll walk you through deploying a web app using Nginx as a reverse proxy, MySQL as the database, and AWS as the cloud provider. Whether you’re a beginner or an advanced DevOps engineer, this guide will help you set up a robust deployment pipeline.

Web Deployment with Nginx and AWS


Table of Contents

  1. Prerequisites
  2. Setting Up AWS EC2 Instance
  3. Installing and Configuring Nginx
  4. Setting Up MySQL Database
  5. Deploying the Web Application
  6. Configuring Domain and SSL
  7. Troubleshooting Common Issues
  8. Real-World Use Cases & Comparisons
  9. Resources & Further Reading

1. Prerequisites

Before we begin, make sure you have:

  • An AWS account
  • Basic knowledge of Linux commands
  • A web application ready for deployment
  • A registered domain (optional but recommended)

2. Setting Up an AWS EC2 Instance

Step 1: Launch an EC2 Instance

AWS EC2 Instance

  1. Log into your AWS account and navigate to EC2.
  2. Click Launch Instance and choose an Amazon Linux or Ubuntu AMI.
  3. Select an instance type (t2.micro for free-tier users).
  4. Configure security groups to allow HTTP (80), HTTPS (443), and SSH (22) access.
  5. Launch and connect using SSH:
   ssh -i your-key.pem ec2-user@your-ec2-public-ip
Enter fullscreen mode Exit fullscreen mode

3. Installing and Configuring Nginx

Step 1: Install Nginx

Nginx Logo

sudo apt update && sudo apt install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure Nginx as a Reverse Proxy

Nginx Reverse Proxy

  1. Open the Nginx config file:
   sudo nano /etc/nginx/sites-available/default
Enter fullscreen mode Exit fullscreen mode
  1. Update the file with:
   server {
       listen 80;
       server_name your-domain.com;
       location / {
           proxy_pass http://localhost:3000; # Change port based on your app
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
Enter fullscreen mode Exit fullscreen mode
  1. Restart Nginx:
   sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

4. Setting Up MySQL Database

MySQL Database

sudo apt install mysql-server -y
sudo mysql_secure_installation
Enter fullscreen mode Exit fullscreen mode

Creating a Database and User

CREATE DATABASE webapp_db;
CREATE USER 'webapp_user'@'localhost' IDENTIFIED BY 'yourpassword';
GRANT ALL PRIVILEGES ON webapp_db.* TO 'webapp_user'@'localhost';
FLUSH PRIVILEGES;
Enter fullscreen mode Exit fullscreen mode

5. Deploying the Web Application

Cloning the App and Running It

Deploying Web App

git clone https://github.com/your-repo/webapp.git
cd webapp
npm install # or pip install -r requirements.txt
ohup npm start &
Enter fullscreen mode Exit fullscreen mode

6. Configuring Domain and SSL with Certbot

SSL Configuration

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-domain.com
Enter fullscreen mode Exit fullscreen mode

7. Troubleshooting Common Issues

Troubleshooting
| Issue | Solution |
|--------|----------|
| Nginx not starting | Check logs: sudo journalctl -xe |
| MySQL connection error | Verify credentials and user grants |
| Web app not running | Check app logs: cat nohup.out |

8. Real-World Use Cases & Comparisons

How Companies Use This Setup

  • Startups: Deploy scalable applications quickly
  • E-commerce: Handle high traffic efficiently
  • SAAS Products: Secure, optimized database and web server setup

Comparison: Docker vs Virtual Machines

Docker vs VM
| Feature | Docker | Virtual Machines |
|---------|--------|-----------------|
| Performance | Faster | Slower |
| Resource Usage | Low | High |
| Isolation | Limited | Full |

9. Resources & Further Reading


What do you think? Comment below!

Subscribe for more DevOps insights and follow us on LinkedIn!

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

DEV is better (more customized, reading settings like dark mode etc) when you're signed in!

Okay