Building a Dynamic Café Website on AWS: Deploying an Online Ordering System with EC2

Posted by

Er. Bikash Subedi

–

Below is a completely beginner-friendly, step-by-step blog version, written in simple language, well-structured, and easy to follow even if someone is new to AWS.
I’ve kept it clear, practical, and educational, suitable for:

  • AWS Academy labs
  • Personal technical blog
  • LinkedIn / Medium
  • Students learning EC2, IAM, and AMIs

Author credit included as requested.

☕ Building a Smart Café Website on AWS EC2

A Beginner-Friendly Hands-On Lab Guide

By Er. Bikash Subedi

🌍 Introduction: Why Even a Small Café Needs AWS

In today’s digital world, even a small local café can benefit hugely from an online presence that goes beyond a static website.

By adding online ordering, a café can:

  • Delight customers
  • Reduce waiting time
  • Increase sales
  • Look more professional and modern

In this hands-on AWS challenge lab, we transform a simple static website into a fully dynamic café ordering application using Amazon EC2.

Customers will be able to:

  • Browse the café menu
  • Place online orders
  • Schedule pickups

All of this is hosted securely and reliably on AWS ☁️

🧪 What This Lab Covers

In this lab, we will:

  • Set up a LAMP stack (Linux, Apache, MySQL, PHP)
  • Secure secrets using AWS Secrets Manager
  • Deploy a PHP web application
  • Create an Amazon Machine Image (AMI)
  • Launch development and production servers in different AWS Regions

⏱ Estimated Time: ~60 minutes
🎯 Level: Beginner to Intermediate

🎯 Lab Objectives (What You’ll Learn)

By the end of this lab, you will be able to:

✅ Connect to a VS Code IDE running on EC2
✅ Configure a web server and database
✅ Deploy a PHP app using Secrets Manager
✅ Test online ordering functionality
✅ Create and copy an AMI across Regions
✅ Launch a production instance in another Region

🟦 Challenge 1: Preparing the EC2 Instance

AWS provides a pre-provisioned EC2 instance named Lab IDE running Amazon Linux.

🔍 Step 1: Analyze the EC2 Instance

Go to AWS Console → EC2 → Instances, then check the following:

✔ Instance Configuration Checklist

  • Instance is in a public subnet
  • It has a public IPv4 address
  • Security Group allows HTTP traffic
  • No IAM role is attached (initially)

🧠 Task 1.1: Answering Lab Questions (With Explanations)

❓ Question 1: Is the instance in a public subnet?

✅ Answer: Yes

Why?
The instance is accessible from the internet. That is only possible if:

  • The subnet has a route to an Internet Gateway
  • The instance has a public IP

❓ Question 2: Does the instance have a public IPv4 address?

✅ Answer: Yes

Why?
A public IP is required to:

  • Access the web app
  • Connect to the IDE from your browser

❓ Question 3: What inbound TCP ports are open?

✅ Answer: TCP port 80

Why?
Port 80 allows HTTP traffic so users can access the website.

🔐 SSH (port 22) is intentionally restricted for security.

❓ Question 4: Does the instance have an IAM role attached?

✅ Answer: Yes (later in the lab)

Why?
IAM roles allow EC2 to securely access AWS services like:

  • AWS Secrets Manager
    Without storing passwords in code.

❓ Question 5: Will EC2 reboot during AMI creation?

✅ Answer:
By default, yes, but you can choose No reboot.

Why?
Reboot ensures disk consistency, but AWS allows skipping it.

❓ Question 6: What root volume settings can be changed in an AMI?

✅ Answer:

  • Volume size
  • Volume type (gp2 → gp3)

❌ You cannot change Delete on Termination

❓ Question 7: Can you add more volumes to an AMI?

✅ Answer: Yes

Why?
AMI creation supports additional EBS volumes, even if the original instance had only one.

🟦 Step 2: Connect to the VS Code IDE

AWS provides a browser-based VS Code environment.

Steps:

  1. Open the code-server URL (from AWS Details)
  2. Enter the provided password
  3. You now have:
    • Terminal
    • File Explorer
    • Editor

No local setup needed ✅

🟦 Step 3: Configure the LAMP Stack

The server already has Apache and PHP, but we must configure it.

🔧 Change Apache Port to 8000

Port 80 is used by code-server, so we switch Apache to 8000:

sudo sed -i 's/Listen 80/Listen 8000/g' /etc/httpd/conf/httpd.conf
sudo systemctl start httpd
sudo systemctl enable httpd

🗄 Install and Start MariaDB (MySQL)

sudo dnf install -y mariadb105-server
sudo systemctl start mariadb
sudo systemctl enable mariadb

🔗 Link Web Root & Fix Permissions

ln -s /var/www/ /home/ec2-user/environment
sudo chown ec2-user:ec2-user /var/www/html

🧪 Test the Web Server

Create a test page:

nano /var/www/html/index.html

Add:

Hello from the café web server!

Open browser:

http://<public-ip>:8000

✅ If you see the message, Apache works!

🔐 Update Security Group

Add an inbound rule:

  • Custom TCP
  • Port 8000
  • Source: 0.0.0.0/0

🟦 Challenge 2: Installing the Café Application

Now we deploy the real café ordering app ☕🍔

📥 Step 1: Download Application Files

Run the following commands carefully:

cd ~/environment
wget https://aws-tc-largeobjects.s3.us-west-2.amazonaws.com/.../setup.zip
unzip setup.zip

wget https://aws-tc-largeobjects.s3.us-west-2.amazonaws.com/.../db.zip
unzip db.zip

wget https://aws-tc-largeobjects.s3.us-west-2.amazonaws.com/.../cafe.zip
unzip cafe.zip -d /var/www/html/cafe/

Install AWS SDK for PHP:

cd /var/www/html/cafe/
wget https://docs.aws.amazon.com/aws-sdk-php/v3/download/aws.zip
wget https://docs.aws.amazon.com/aws-sdk-php/v3/download/aws.phar
unzip aws
chmod -R +r /var/www/html/cafe/

🔐 Step 2: Store Secrets in AWS Secrets Manager

cd ~/environment/setup
./set-app-parameters.sh

This creates 7 secrets, including:

  • Database username
  • Password
  • Host
  • Application config

🔒 No hardcoding — best practice!

🗄 Step 3: Set Up the Database

cd ../db
./set-root-password.sh
./create-db.sh

This creates:

  • cafe_db
  • Tables
  • Sample menu items

⏰ Step 4: Fix PHP Timezone

sudo sed -i "2i date.timezone = \"America/New_York\"" /etc/php.ini
sudo service httpd restart

🔥 Step 5: Fix the Critical IAM Role Issue

❌ Problem

Visiting:

http://<public-ip>:8000/cafe

fails ❌

❓ Why?

The PHP app cannot access Secrets Manager without permission.

✅ Solution: Attach IAM Role

  1. EC2 Console → Select instance
  2. Actions → Security → Modify IAM role
  3. Choose CafeRole
  4. Save

🔑 CafeRole has SecretsManagerRead permission.

🎉 Result

Reload:

http://<public-ip>:8000/cafe

✅ Menu loads
✅ App works
✅ Secrets accessed securely

🧪 Step 6: Test Online Ordering

  • Browse menu
  • Add items
  • Submit orders
  • View order history

Everything works perfectly 🎉

🟦 Challenge 3: Multi-Region Deployment (Dev → Prod)

🛠 Step 1: Prepare Instance

sudo hostname cafeserver
ssh-keygen -t rsa -f ~/.ssh/id_rsa
cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

📸 Step 2: Create an AMI

EC2 → Instance → Actions → Create Image
Name: CafeServer

🌍 Step 3: Copy AMI to Oregon (us-west-2)

AMI → Actions → Copy AMI → us-west-2

🚀 Step 4: Launch Production Instance

  • Region: Oregon
  • Instance name: ProdCafeServer
  • Type: t2.small
  • Security group: TCP 22 & 8000
  • IAM role: CafeRole

🔁 Step 5: Recreate Secrets in us-west-2

Edit:

~/environment/setup/set-app-parameters.sh

Change:

region="us-west-2"

Run:

./set-app-parameters.sh

✅ Step 6: Verify Production

  • http://<prod-ip>:8000
  • http://<prod-ip>:8000/cafe

Place orders → works 🎉

🌟 Key Takeaways & Best Practices

✔ EC2 is powerful for PHP web apps
✔ Secrets Manager keeps credentials safe
✔ IAM roles are more secure than access keys
✔ AMIs enable repeatable deployments
✔ Multi-Region improves reliability

☕ Final Thoughts

This lab beautifully demonstrates how small businesses can use AWS cloud services to build secure, scalable, and professional web applications without heavy upfront costs.

Er. Bikash Subedi

Post Views: 7

Er. Bikash Subedi

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Recent Posts

Categories

Tags