laporanmusa
Deploy Infrastruktur LAMP Stack di AWS dengan RDS
Nama : Musa Azka Falfila
Kelas : XII TKJ A
No : 24
1. Membuat VPC
- Buat VPC dengan CIDR block 20.0.0.0/16.
- Create VPC
2. Membuat Subnet Publik dan Privat
- Tambahkan dua Public Subnet ( 20.0.1.0/24 dan 20.0.2.0/24) dengan AZ ( a dan b)
- Buat satu Private Subnet (20.0.3.0/24) dengan AZ ( a )
- Create Subnet
3.Konfigurasi Internet Gateway dan Route Table
• Hubungkan Internet Gateway (IGW) ke VPC
.
4. Buat Route Table Publik dan Route Table Privat
- Route Table Private
-Route Table Publik
- Edit routes : Pilih Internet Gateway yang sudah dibuat
- Save Changes
- Edit Subnet Associations : centang kedua subnet > save asociations
4. . Membuat Security Group
- Create Security Group
- Nama : SG Stack
- Masukan VPC
- Izinkan akses SSH (port 22)
- Izinkan akses HTTP (port 80)
Create Security group yang kedua :
- Izinkan koneksi MySQL (port 3306)
- Create
5. Membuat dan Mengonfigurasi Instance EC2
• Buat Instance:
- Isi name
- Pilih Amazon Linux 2
- Pilih t2.micro
- Buat key pair
- Masukan vpc
- Masukan subnet
- Auto-assign public IP : enable
- user data :
#!/bin/bash yum update -y
yum install -y httpd mariadb105.x86_64 php php-mysqlnd
systemctl start httpd
systemctl enable httpd
echo "" > /var/www/html/index.php
5.Membuat Database RDS
- Pilih engine MariaDB
- pada templates pilih freetier
- isikan password
- vpc isikan vpc yang dibuat tadi, pada sg pilih sg rds yang sudah disediakan untuk rds, seperti gambar dibawah ini:
- nama : musadb
- username isikan admin
- isikan password
- Bagian vpc, isikan vpc yang dibuat tadi
- Pada bagian sg, pilih sg rds yang sudah disediakan untuk rds
6. Connectkan EC2
- sudo yum install mariadb -y
- mysql -h copy endpoint -u admin-p
- cd /var/www/html
- nano index.php
- Isikan pada nano index.php ( bisa diganti nama dan foto produknya)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toko Online</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.product {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 250px;
text-align: center;
padding: 20px;
transition: transform 0.3s ease;
}
.product img {
width: 100%;
border-radius: 8px;
}
.product:hover {
transform: scale(1.05);
}
.product h3 {
font-size: 18px;
margin: 10px 0;
}
.product p {
font-size: 14px;
color: #555;
}
.price {
font-size: 20px;
font-weight: bold;
color: #28a745;
}
.btn {
display: inline-block;
background-color: #28a745;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
.btn:hover {
background-color: #218838;
}
footer {
text-align: center;
background-color: #333;
color: white;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>SCARLET WHITENING</h1>
</header>
<div class="container">
<div class="product">
<img src="https://via.placeholder.com/250" alt="Produk 1">
<h3>Produk 1</h3>
<p>Deskripsi singkat tentang produk 1.</p>
<p class="price">Rp. 100.000</p>
<a href="#" class="btn">Tambahkan ke Keranjang</a>
</div>
<div class="product">
<img src="https://via.placeholder.com/250" alt="Produk 2">
<h3>Produk 2</h3>
<p>Deskripsi singkat tentang produk 2.</p>
<p class="price">Rp. 150.000</p>
<a href="#" class="btn">Tambahkan ke Keranjang</a>
</div>
<div class="product">
<img src="https://via.placeholder.com/250" alt="Produk 3">
<h3>Produk 3</h3>
<p>Deskripsi singkat tentang produk 3.</p>
<p class="price">Rp. 200.000</p>
<a href="#" class="btn">Tambahkan ke Keranjang</a>
</div>
<div class="product">
<img src="https://via.placeholder.com/250" alt="Produk 4">
<h3>Produk 4</h3>
<p>Deskripsi singkat tentang produk 4.</p>
<p class="price">Rp. 120.000</p>
<a href="#" class="btn">Tambahkan ke Keranjang</a>
</div>
</div>
<footer>
<p>© 2025 SCARLET WHITENING</p>
</footer>
</body>
</html>
ctrl+o
ctrl+x
- Hasil
.png)