A Beginner's Guide to Deploying Your First Web App on AWS: A Step-by-Step Guide πŸŒπŸš€

VivekVivek
5 min read

Deploying your first web application on Amazon Web Services (AWS) can be both exciting and overwhelming. With a wide array of services to choose from, navigating the AWS ecosystem can seem daunting for beginners. However, by breaking down the process into manageable steps, you can successfully deploy your application and harness the power of AWS. 🌟

In this guide, we’ll walk through the process of deploying a web application using some of AWS's most essential services: EC2, S3, and others. By the end of this tutorial, you'll have your web app running in the cloud, ready to scale and serve users worldwide. Let’s get started! πŸŽ‰


Prerequisites πŸ› οΈ

Before we dive into deployment, make sure you have the following:

  1. An AWS Account: Sign up for a free account if you don’t have one already. πŸ†“

  2. Basic Knowledge of Web Development: Familiarity with HTML, CSS, JavaScript, and a server-side language.

  3. AWS CLI Installed: This will help you manage your AWS services from the command line. πŸ’»


Step 1: Setting Up an EC2 Instance πŸ–₯️

Amazon Elastic Compute Cloud (EC2) provides scalable computing capacity in the cloud. It allows you to run virtual servers to host your web applications.

Create an EC2 Instance πŸ—οΈ

  1. Log in to AWS Management Console:

  2. Navigate to EC2 Dashboard:

    • Select EC2 from the Services menu.
  3. Launch Instance:

    • Click on "Launch Instance".

    • Choose an Amazon Machine Image (AMI). For beginners, the Amazon Linux 2 AMI is a good choice. 🐧

    • Select an Instance Type. The t2.micro instance is free-tier eligible. πŸ’Έ

  4. Configure Instance:

    • Add Storage (default 8 GB is sufficient for starters).

    • Add Tags if necessary.

  5. Configure Security Group:

    • Add a rule to allow HTTP traffic (port 80).

    • Add a rule to allow SSH access (port 22) for connecting to your instance.

  6. Launch and Connect:

    • Click Launch.

    • Create a new key pair or use an existing one to connect to your instance.

    • Connect to your instance using an SSH client with the following command:

    ssh -i your-key-pair.pem ec2-user@your-ec2-public-ip

Install a Web Server 🌐

Once connected to your EC2 instance, install Apache or Nginx to serve your web app:

# Update the package manager
sudo yum update -y

# Install Apache Web Server
sudo yum install -y httpd

# Start Apache Web Server
sudo service httpd start

# Enable Apache to start on boot
sudo chkconfig httpd on

Deploy Your Application πŸš€

  1. Transfer Files: Use SCP (Secure Copy Protocol) to transfer your web app files to the EC2 instance:

     scp -i your-key-pair.pem -r /path/to/your/webapp ec2-user@your-ec2-public-ip:/var/www/html
    
  2. Test Deployment: Open your browser and enter the public IP address of your EC2 instance. You should see your web application live! πŸŽ‰


Step 2: Storing Assets with S3 πŸ“¦

Amazon Simple Storage Service (S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. πŸ’ͺ

Create an S3 Bucket πŸ—‚οΈ

  1. Navigate to S3 Dashboard:

  2. Create a Bucket:

    • Click on "Create bucket".

    • Enter a unique bucket name and choose a region. 🌍

    • Adjust settings as needed and click Create.

Upload Assets πŸ”„

  1. Upload Files: Click on your bucket and then click "Upload" to add files.

  2. Set Permissions: Make sure your files are publicly accessible if they need to be accessed by your web app. πŸ”“

  3. Enable Static Website Hosting (Optional):

    • Go to Properties.

    • Select "Static website hosting" and enable it if you want to use S3 to host static files directly.

Accessing Files πŸ“

Use the S3 URL to link assets in your application, such as images, CSS, and JavaScript files:

<img src="https://your-bucket-name.s3.amazonaws.com/path/to/image.jpg" alt="Image">

Step 3: Configuring Domain and DNS with Route 53 🌐

Amazon Route 53 is a scalable domain name system (DNS) web service designed to route end users to Internet applications by translating human-readable names like www.example.com into the numeric IP addresses like 192.0.2.1 that computers use to connect to each other.

Register a Domain 🌍

  1. Go to Route 53 Dashboard:

    • Select Route 53 from the AWS Services menu.
  2. Register a Domain:

    • Click on "Domains" and then "Register Domain".

    • Enter your desired domain name and follow the steps to register it. πŸ“

Set Up DNS Records πŸ“‘

  1. Create a Hosted Zone:

    • In Route 53, create a hosted zone for your domain.
  2. Add DNS Records:

    • Add an A Record pointing your domain to your EC2 instance's public IP.

    • If using an S3 bucket for static hosting, add an Alias Record pointing to the S3 bucket.


Step 4: Scaling with Elastic Load Balancing and Auto Scaling πŸ“ˆ

Elastic Load Balancing βš–οΈ

Elastic Load Balancing (ELB) automatically distributes incoming application traffic across multiple targets, such as EC2 instances.

  1. Create a Load Balancer:

    • Go to the EC2 Dashboard and select Load Balancers.

    • Click on "Create Load Balancer" and configure it.

  2. Register Targets:

    • Add your EC2 instance as a target for the load balancer.

Auto Scaling πŸ“Š

Auto Scaling helps maintain application availability and allows you to scale your EC2 capacity up or down automatically.

  1. Create an Auto Scaling Group:

    • Define launch configurations for your instances.

    • Set scaling policies based on metrics like CPU usage.


Congratulations! You’ve successfully deployed your first web app on AWS using EC2, S3, and Route 53. 🎊 By leveraging these powerful AWS services, you can create a scalable, secure, and highly available web application infrastructure. 🌟

This guide provides a solid foundation for deploying web applications on AWS, but remember that AWS offers many other services that can enhance your application. Explore AWS's comprehensive suite of services to further optimize and scale your web apps. 🧰

Happy Deploying! πŸš€


Feel free to ask questions or share your experiences with deploying applications on AWS in the comments below! πŸ’¬

11
Subscribe to my newsletter

Read articles from Vivek directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Vivek
Vivek

Curious Full Stack Developer wanting to try hands on ⌨️ new technologies and frameworks. More leaning towards React these days - Next, Blitz, Remix πŸ‘¨πŸ»β€πŸ’»