728x90
커비가 더욱더 날아다닐 수 있게 도와주세요!
여러분의 오토마우스와 매크로라면 할 수 있어요!
우리 모두 함께 레츠고~!!
vpc - 2AZ, 2 public subnet, 2 private subnet
rds - 2 rds subnet, aurora-mysql
ec2 - bastion, webserver, webserversub, ALB, auto scaling group
s3 - all allow(x), VPC endpoints-connect
html코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Viewer</title>
<style>
body {
margin: 0;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
#clickCount {
position: fixed;
top: 10px;
right: 10px;
font-size: 18px;
}
#rankings {
position: fixed;
top: 10px;
left: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="clickCount"><h1>Clicks: <span id="counter">0</span></h1></div>
<div id="rankings">Top 10 Rankings:</div>
<img id="mainImage" src="버킷ARN/image1.jpg" onclick="changeImage()">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
let clickCounter = 0;
const rankingsDiv = document.getElementById('rankings'); // 전역 변수로 이동
function changeImage() {
const mainImage = document.getElementById('mainImage');
const counterSpan = document.getElementById('counter');
clickCounter++;
counterSpan.innerText = clickCounter;
// Update rankings
updateRankings(clickCounter);
if (clickCounter % 2 === 0) {
mainImage.src = "버킷ARN/image1.jpg";
} else {
mainImage.src = "버킷ARN/image2.jpg";
}
}
function updateRankings(clickCount) {
console.log('Sending AJAX request with clickCount:', clickCount);
$.ajax({
type: 'POST',
url: 'update_rankings.php',
data: { clickCount: clickCount },
success: function(response) {
console.log('AJAX success. Response:', response);
rankingsDiv.innerHTML = "Top 10 Rankings: " + response;
},
error: function(xhr, status, error) {
console.error('Error updating rankings:', error);
}
});
}
</script>
</body>
</html>
PHP 코드
<?php
error_reporting(E_ALL);
$servername = "RDS_ENDPOINT";
$username = "DB_USERNAME";
$password = "DB_PASSWORD";
$dbname = "DB_NAME";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$conn->set_charset("utf8mb4");
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$clickCount = $_POST['clickCount'];
// Update database with click count
$sql = "INSERT INTO click_counts (ip, clicks) VALUES ('" . $_SERVER['REMOTE_ADDR'] . "', $clickCount) ON DUPLICATE KEY UPDATE clicks = $clickCount";
$result = $conn->query($sql);
// Get top 10 rankings
$sql = "SELECT ip, clicks FROM click_counts ORDER BY clicks DESC LIMIT 10";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$rankings = "<ol>";
while($row = $result->fetch_assoc()) {
$rankings .= "<li>" . $row["ip"] . " - " . $row["clicks"] . " clicks</li>";
}
$rankings .= "</ol>";
echo $rankings;
} else {
echo "No rankings available";
}
$conn->close();
// RDS_ENDPOINT, DB_USERNAME, DB_PASSWORD, DB_NAME 등을 실제 값으로 변경해야 합니다.
?>
아 안되네 ㅋㅋ 로드밸런서까지는 되는데 ajax가 static으로 파일을 가져와서 파기 cdn 부터는 안됨
ip 로드밸런서 vip 가져와서 노잼
견적은 나왔지만 php 로 대충 만들어서 파기
728x90
'Amazon Web Services > Architecture' 카테고리의 다른 글
| 졸.업.작.품. (0) | 2024.10.10 |
|---|---|
| 얼굴 포켓몬 (0) | 2024.05.13 |
| 2주면 완성하는 웹 크롤링 아키텍처 (0) | 2024.03.28 |
| NAT GW, Bation, Private EC2, ALB, Auto Scaling 구성 아키텍처 (0) | 2024.02.09 |
| Amazon S3에서 VPC Endpoint를 통해 Private EC2배포 아키텍처 (0) | 2024.02.05 |