- Javascript
Your resume webpage should include a visitor counter that displays how many people have accessed the site. You will need to write a bit of Javascript to make this happen. Here is a helpful tutorial to get you started in the right direction. - Database
The visitor counter will need to retrieve and update its count in a database somewhere. I suggest you use Amazon’s DynamoDB for this. (Use on-demand pricing for the database and you’ll pay essentially nothing, unless you store or retrieve much more data than this project requires.) Here is a great free course on DynamoDB. - API
Do not communicate directly with DynamoDB from your Javascript code. Instead, you will need to create an API that accepts requests from your web app and communicates with the database. I suggest using AWS’s API Gateway and Lambda services for this. They will be free or close to free for what we are doing. - Python
You will need to write a bit of code in the Lambda function; you could use more Javascript, but it would be better for our purposes to explore Python – a common language used in back-end programs and scripts – and its boto3 library for AWS. Here is a good, free Python tutorial.
DynamDB
DynamoDB 설정
1. DynamoDB에서 테이블 설정을 클릭해줍니다.
2. 테이블 이름은 저는 cloud-resume-challenge라고 적어줬고, 파티션 키는 id, 문자열로 설정해주었습니다. 그리고 생성!
3. 테이블 생성 완료된 모습을 대쉬보드에서 확인할 수 있고, 표 항목 탐색 버튼을 눌러줍니다.
4. 항목 생성 버튼을 눌러줍니다.
5. 새 속성을 추가하여 views를 추가하고 값은 1로 설정해줍니다.
6. 결과가 나온 모습을 확인할 수 있습니다.
Lambda
1. 콘솔 창에 Lambda를 검색해서 함수 생성을 눌러줍니다.
2. 함수 생성 [ 저는 파이썬이 익숙한 편이라.. 런타임을 파이썬으로 실행했습니다 ]
3. 함수 URL을 활성화하고, IAM 인증없이 진행합니다. 호출 모드도 아래와 같이 체크해줍니다.
4. Lambda 생성 완료
5. 여기가 가장 중요한 부분입니다. class와 함수를 만들어서 코드를 생성하였습니다. 쉽게 얘기해서 DynamoDB 테이블에서 가져와서 1씩 증가해서 다시 테이블에 저장하는 그런 방법입니다.
6. lambda에서 역할을 클릭한 다음에 AmazonDynamoDBFullAccess를 권한을 추가합니다.
Javascript
// View Counter
const counter = document.querySelector(".counter-number");
async function updateCounter() {
let response = await fetch(
"lambda_function_url"
);
let data = await response.json();
counter.innerHTML = `<i class='bx bx-show'></i> Views: ${data}`;
}
updateCounter();
Javascript 코드에서는 중요한게 저기 lambda_function_url은 본인의 lambda 주소를 올려주시면 됩니다. fetch 함수를 사용해서 지정된 AWS Lambda URL로 HTTP 요청을 보내서, 조회수를 반환합니다. 이를 통해 HTML에 그대로 방문자 수를 확인할 수 있도록 합니다.
이로써 거의 resume를 완성하는 단계까지 왔습니다. 다음 포스팅 내용이 와..! 감탄이 나올 정도 였습니다. 간단하게 스포하자면, 저는 여태까지 일일이 수정된 부분은 S3에 수동적으로 올리는 작업을 진행했었는데... 자동으로 배포까지 하는 기능을 알게되었습니다..
혁명 그 잡채..
