Lambda로 페이지 생성
https://bklwoimztyyx2zbsmbpw72akvi0dpsad.lambda-url.ap-northeast-2.on.aws/#
simple-webpage
import sys
import os
from struct import pack
import json
import urllib.parse
import boto3
print('Loading function')
s3 = boto3.client('s3')
def lambda_handler(event, context):
response = {
"statusCode": 200,
"statusDescription": "200 OK",
"Access-Control-Allow-Origin" : "*",
"isBase64Encoded": False,
"headers": {
"Content-Type": "text/html; charset=utf-8"
}
}
response['body'] = """
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>인생네컷 X Bubble</title>
<style>
#title {
font-family: arial; color: #eb971a; margin-top:20px; text-align: center;
}
#artist_header{
font-family: arial; background-color: #eb971a; height:50px; color: #fff; text-align: center;
}
button {
background-color: #eb971a;
border:none;
color:white;
border-radius: 5px;
font-size: 13pt;
text-align: center;
}
#sentence {
font-size: 17pt;
margin-top:30px;
font-weight: bold;
color: #eb971a;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.nav-tabs {
margin: 20px 0px;
}
.nav-tabs > li.nav-item > a.active {
color: #363636;
font-size: 1.0em;
}
.nav-tabs > li.nav-item > a {
color: #575757;
}
.table {
width: 100%;
}
.table td {
vertical-align: middle;
}
.table > tbody > tr > th {
vertical-align: middle;
font-size: 0.8em;
height: 130px;
}
#artistListTb > tbody > tr > th {
padding: 15px;
}
#artistListTb > tbody > tr > th > img{
vertical-align: middle;
width: 100%;
}
.infoTb {
width: 100%;
}
.fs_top_menu {width: 100%;height: 5%;font-size: 14px;font-weight: bold;color: #ff0099;}
.fs_top_menu .lnb {display: flex;align-items: stretch;height:100%;}
.fs_top_menu .lnb li {display: inline-block;}
.fs_top_menu .lnb li a {display: flex;align-items: center;justify-content:center;flex-direction:column;width:100px;height:100%;color:#333;transition: 0.4s;font-weight: bold;padding: 5px;}
.fs_top_menu .lnb li a em {display: block;margin-bottom:5px;}
.fs_top_menu .lnb li a:is(:hover,:focus,:active) {background: #2b3969;color:#fff;}
.fs_top_menu .lnb li a:is(:hover,:focus,:active) img {filter: brightness(10);}
@media only screen and (max-width:1499px){
.fs_top_menu .lnb li a {width:100px;}
}
@media only screen and (max-width:1299px){
.fs_top_menu .lnb li a {width:90px;}
}
@media only screen and (max-width:1199px){
.fs_top_menu .lnb li a {width:72px;}
}
</style>
</head>
<body>
<!-- 메인 -->
<div id="body1">
<div id="bubble_header" >
인생네컷 X <b>bubble</b>
<hr id="lambda-line" color="#eb971a;">
</div>
<div>
<img src="https://life4cut-bubble.s3.ap-northeast-2.amazonaws.com/web/images/banner_BR.png" style="width: 100%;">
</div>
<hr id="lambda-line" color="#eb971a;">
<div style="overflow-x: auto;">
<!--
<button onclick="checkEvent();" style="width: 100%; height: 100px; text-align: center;">아티스트 그룹 선택</button>
-->
<nav class="fs_top_menu" id="fs_top_menu" style="width: 600px;">
<ul class="lnb" style="margin-left: -40px;">
<li><a href="#" class="lnb_title"><em>All</em></a></li>
<li><a href="#" class="lnb_title"><em>artist1</em></a></li>
<li><a href="#" class="lnb_title"><em>artist2</em></a></li>
<li><a href="#" class="lnb_title"><em>artist3</em></a></li>
<li><a href="#" class="lnb_title"><em>artist4</em></a></li>
<li><a href="#" class="lnb_title"><em>artist5</em></a></li>
<li><a href="#" class="lnb_title"><em>artist6</em></a></li>
<li><a href="#" class="lnb_title"><em>artist6</em></a></li>
<li><a href="#" class="lnb_title"><em>artist7</em></a></li>
<li><a href="#" class="lnb_title"><em>artist8</em></a></li>
</ul>
</nav>
</div>
<hr id="lambda-line" color="#eb971a;">
<div>
<table id="artistListTb" class="table" >
</table>
</div>
</div>
<!-- 프레임 -->
<div id="body2">
<div id="artist_header">
<table style="width: 100%; height: 45px;">
<tbody>
<tr>
<th style="width: 5%;">
<button onclick="backPage1();" style="text-align: center;">◀</button>
</th>
<th>
<b style="margin-top: 10px;">아티스트명</b>
</th>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<div style="width: 100%;text-align: center;">
<table class="infoTb">
<tr>
<th id="profilePic">
<img src="https://life4cut-bubble.s3.ap-northeast-2.amazonaws.com/web/images/profilePic1.png" style="width: 30%;">
</th>
</tr>
<tr>
<th id="profileInfo">
정보
</th>
</tr>
</table>
</div>
<hr id="lambda-line" color="#eb971a;">
<div>
<table class="table">
<tr>
<th>
<button onclick="getQrPage(1);" style="width: 100%; height: 100%; text-align: center;">프레임 1</button>
</th>
</tr>
<tr>
<th>
<button onclick="getQrPage(2);" style="width: 100%; height: 100%; text-align: center;">프레임 2</button>
</th>
</tr>
<tr>
<th>
<button onclick="getQrPage(3);" style="width: 100%; height: 100%; text-align: center;">프레임 3</button>
</th>
</tr>
<tr>
<th>
<button onclick="getQrPage(4);" style="width: 100%; height: 100%; text-align: center;">프레임 4</button>
</th>
</tr>
</table>
</div>
</div>
<!-- 결제 -->
<div id="body3">
<div id="artist_header">
<table style="width: 100%; height: 45px;">
<tbody>
<tr>
<th style="width: 5%;">
<button onclick="backPage2();" style="text-align: center;">◀</button>
</th>
<th>
<b style="margin-top: 10px;">아티스트명</b>
</th>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<table style="width: 100%">
<tbody>
<tr>
<th>
키오스크에서 QR코드를 스캔하고 결제해주세요
</th>
</tr>
<tr>
<th style="text-align: center;">
<div id="frameQR" style="width: 100%; height: 300px; ">
<button style="height: 150px; width: 150px;margin-top: 50px;">
결제 QR
</button>
</div>
</th>
</tr>
<tr>
<th id="frameInfo">
</th>
</tr>
</tbody>
</table>
<hr id="lambda-line" color="#eb971a;">
<div>
<button onclick="" style="width: 100%; height: 80px; text-align: center;">QR 다운로드</button>
</div>
</div>
<!-- 결제 -->
</body>
<script type="text/javascript">
let selArtistIdx = 0;
let selFrameIdx = 0;
$(document).ready(function() {
$("#body2").hide();
$("#body3").hide();
getArtistList();
});
// test 함수
function checkEvent(){
$.ajax({ type: "GET",
url: "https://l68m3mpdxd.execute-api.ap-northeast-2.amazonaws.com/dev",
dataType:'json',
success: function(data){
console.log(data.status + " " + data.name);
//$("#sentence").text(data.status + " " + data.name)
},
error: function (error){
alert('ERROR::');
console.log(error)
}
});
}
// step1 ----------
// 그룹에 속한 아티스트 리스트 가져오기
function getArtistList(){
// ajax 사용 하여 가져오기
let artistListTbHtml = "<tbody>";
for(let i = 1 ; i < 11 ; i++){
if(i% 3 == 1){
artistListTbHtml += '<tr>';
}
artistListTbHtml += '<th>';
artistListTbHtml += '<img src="https://life4cut-bubble.s3.ap-northeast-2.amazonaws.com/web/images/profilePic'+i+'.png" onclick="selectArtist('+i+');" style="width: 100%;">';
artistListTbHtml += '<br><em>artist - '+i+'</em>';
artistListTbHtml += '<br><em>group - '+i+'</em>';
artistListTbHtml += '</th>';
if(i% 3 == 0){
artistListTbHtml += '</tr>';
}
}
artistListTbHtml += '</tbody>';
$("#artistListTb").html(artistListTbHtml);
}
// 아티스트 선택
function selectArtist(idx){
console.log(idx);
selArtistIdx = idx;
// 아티스트 선택 로직
// ajax
$("#body1").hide();
$("#body2").show();
let profilepic = "https://life4cut-bubble.s3.ap-northeast-2.amazonaws.com/web/images/profilePic"+idx+".png"
$("#profilePic").find("img").attr("src",profilepic);
let profileInfo = "아티스트 " + idx + " 의 정보입니다.";
$("#profileInfo").html(profileInfo);
}
function backPage1(){
selIdx = 0;
$("#body1").show();
$("#body2").hide();
}
// step1 ----------
// step2 ----------
function getQrPage(idx){
selFrameIdx = idx;
// ajax
$("#body2").hide();
$("#body3").show();
let frameInfohtml = "아티스트 - " + selArtistIdx + " / 프레임 : " + selFrameIdx + "번 의 프레임 QR 정보입니다.<br>"
frameInfohtml += "<br>QR코드 인증번호";
frameInfohtml += "<br>유표기간 : yyyy.mm.dd";
frameInfohtml += "<br>잔여수량 : n 개";
$("#frameInfo").html(frameInfohtml);
}
// step2 ----------
function backPage2(){
selFrameIdx = 0;
$("#body2").show();
$("#body3").hide();
}
</script>
</html>
"""
return response'개발공부 > AWS' 카테고리의 다른 글
| AWS CloudFront를 이용한 CDN 배포 방법 (0) | 2025.02.13 |
|---|---|
| EC2 인스턴스에 HTTPS 적용 (elb:로드밸런서:대상그룹) (0) | 2025.02.13 |
| EC2 인스턴스에 HTTPS 적용 (도메인 구매하고 ACM 인증서 발급하기) (0) | 2025.02.13 |
| RDS 화이트리스트 설정하기 (0) | 2025.02.13 |
| EC2 크기에 따른 비용 절감 (0) | 2025.02.13 |
