[AWS] 서버리스 기반 URL 주소 단축 서비스 구현 - (3) 도메인 연결, S3 정적 웹 호스팅

[AWS] 서버리스 기반 URL 주소 단축 서비스 구현 - (3) 도메인 연결, S3 정적 웹 호스팅공부/DevOps2024. 9. 24. 19:28@leejinwoo1126

Table of Contents

앞서 키 생성과 포워딩 람다를 각각 기능 구현하고, API Gateway 연결하여 호출하는 내용을 다루었다.

이번 포스팅에서는 도메인 주소를 AWS Route53 연결하여 원본 주소보다 길어지는 문제를 해결하고,
사용자 입력을 받을 정적 웹 호스팅(s3)을 다뤄본다

참고.
https://dev-ljw1126.tistory.com/463

[AWS] 주소 축약 서비스(shorten url) 구현 - (1) 키 생성 람다

이번 포스팅에서는 AWS 인프라를 활용해서 주소 축약 서비스를 만들어보려 한다.참고로 주소 축약 서비스는 긴 URL을 짧고 간단한 형태로 변환해주는 도구이다. 장점은 아래와 같다① URL 가독성

dev-ljw1126.tistory.com

https://dev-ljw1126.tistory.com/464

[AWS] 주소 축약 서비스(shorten url) 구현 - (2) 포워딩 람다 구현

앞서 긴 주소를 입력했을 때 키 생성(축약 주소)하여 반환하는 기능을 구현해보았다. 이번 포스팅에서는 축약 주소를 요청했을 때 원본 주소로 포워딩하는 기능을 구현해본다. 참고. https://dev-l

dev-ljw1126.tistory.com

1. 도메인 구매

카페 24에서 원하는 도메인을 구매했다. 카페 24를 선택한 이유는 우선 대중적이기도하고, 테스트 용도이므로 비용이 저렴했으면 좋겠다고 생각했기 때문이다. 마침 특가 이벤트를 하고 있어 550원에 1년간 도메인 이용가능했기 때문에 바로 결제 했다

2. AWS Route53 생성

"호스팅 영역 생성"을 선택하고 명칭은 구매한 도메인(ex. thinadr.store)으로 설정한다

생성 완료되면 아래와 같이 두 개의 레코드가 생성되는데 NS(네임서버)에 있는 4개 주소를 카페24 도메인 관리에서 네임서버 변경을 해주는데 사용한다

3. 도메인 NS 설정 변경

카페 24 도메인의 NS를 AWS Route53에서 생성된 NS 주소로 변경하는 이유 ?
① DNS 관리 이관: 해당 도메인의 모든 DNS 설정을 AWS Route53에서 관리할 수 있게 됩니다. 이는 도메인과 관련된 레코드(A, CNAME, MX 등)를 AWS에서 관리할 수 있도록 하는 과정입니다.
② 유연한 DNS 레코드 관리: Route 53은 강력한 기능을 제공하며, 트래픽 라우팅 정책(예: 지리적 위치 기반 라우팅, 가중치 라우팅, 상태 확인)을 설정할 수 있어 트래픽을 더 효율적으로 관리할 수 있습니다.
③ 통합 관리 유연성: AWS의 다른 서비스(예: EC2, S3, CloudFront)와 연동하여 도메인을 손쉽게 설정하고 관리할 수 있습니다.
④ 성능 및 신뢰성: Route 53은 글로벌하게 분산된 인프라를 사용해 빠르고 안정적인 DNS 서비스를 제공합니다. 따라서 도메인 이름 해석 속도와 서비스 가용성을 높일 수 있습니다.

[카페 24 접속 > 로그인 > 나의 서비스 관리(우측상단) > 도메인 관리(좌측 메뉴) > 도메인 정보 변경 > 네임서버 변경] 메뉴로 이동

- Route53에서 확인된 NS(네임서버) 주소를 기재 후 "변경하기" 버튼을 누른다
- 알림으로는 24시간 이상 걸린다고 표시되었는데, 30분 정도 기다리면 된다

4. AWS Certificate Manager(ACM) 생성

AWS Certificate Manager(ACM) ?
SSL/TLS 인증서를 관리하는 AWS 서비스

SSL 보안을 적용하려면 ACM에서 인증서를 발급받아야 한다. 발급받은 인증서는 CloudFront, ALB(Application Load Balnacer), API Gateway 등에서 연결하여 HTTPS로 웹 사이트를 보호하게 된다

- "Route53에서 레코드 생성"버튼을 클릭하여 서비스를 연동한다

- 인증서 검증 되는데 약 30분 정도 기다려야 한다

*인증서 검증 성공

*Route53 레코드에 생성된 결과

Custom Domain Names 생성

API Gateway 에서 사용자 지정 도메인 이름을 생성한다. 용도는 Route53과 API Gateway를 연결하는 중간 다리 역할로 API Mapping 정보를 설정하게 된다. 이름은 도메인 주소(ex. thinadr.store)로 설정하였다

람다 함수 맵핑 정보를 설정하는데 경로가 충돌나면 안되기 때문에 /create경로를 추가하여 구분했다

Route53 레코드 생성

생성한 사용자 지정 도메인 이름(Custom Domain Names)을 Route53에 연결한다. 메뉴 이동 후"레코드 생성"버튼을 누른다

d-0mq*로 시작하는 건 사용자 지정 도메인 이름(Custom Domain Names)에서 생성한 "API Gateway 도메인 이름"이다

(Route53 - 사용자 지정 도메인 이름 - API Gateway..)

레코드 생성 후 Postman 호출을 하니 정상적으로 실행된 결과를 확인할 수 있었다

참고로 축약 주소 생성 요청 주소(/create/shorten-url-lambda)가 저런건 API Gateway에서 아래와 같이 만들었기 때문이다

index.html 생성, S3 업로드

VSCode로 주소 입력을 받을 index.html을 간단하게 만들었다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>S3 Static Hosting</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin-top: 100px;
        }

        .container {
            text-align: center;
            width: 500px;
        }

        input[type="text"] {
            width: 500px;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 10px;
            font-size: 16px;
            transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
        }

        input[type="text"]:focus {
            transform: scale(1.05);
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
            outline: none;
        }

        .response {
            margin-top: 20px;
            font-size: 14px;
            color: #333;
            word-wrap: break-word;
            opacity: 0;
            transition: opacity 0.5s;
        }

        .response.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Make Shorten URL</h2>
        <input type="text" id="urlInput" placeholder="주소를 입력하세요">
        <div class="response" id="response"></div>
    </div>

    <script>
        document.getElementById('urlInput').addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                const url = event.target.value.trim();
                
                if(url) {
                  generateURL(url);
                }
            }
        });

        const API_GATEWAY_URL = "https://thinadr.store/create/shorten-url-lambda";
        async function generateURL(url) {
            const el = document.getElementById('response');
            el.classList.remove('show');
            el.textContent = ''; 

            try {
                const response = await fetch(API_GATEWAY_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ 'native_url': url })
                });

                const data = await response.json();
                el.textContent = `https://${data.forwardUrl}/${data.shortId}`;
                el.classList.add('show');
            } catch (error) {
                el.textContent = 'Error: ' + error.message;
                el.classList.add('show');
            }
        }
    </script>
</body>
</html>

앞서 AWS Toolkit Extension 설치해뒀기 때문에 우클릭해서 s3 루트 경로에 index.html 파일 업로드한다

S3 정적 웹 호스팅

AWS 공식 자습서 참고하여 index.html을 호스팅 하였다

참고. 공식 자습서: Amazon S3에서 정적 웹 사이트 구성

자습서: Amazon S3에서 정적 웹 사이트 구성 - Amazon Simple Storage Service

이제 Amazon S3가 Amazon S3 관리형 키를 사용한 서버 측 암호화(SSE-S3)를 Amazon S3 내 모든 버킷 암호화의 기본 수준으로 적용합니다. 2023년 1월 5일부터 Amazon S3로의 모든 새 객체 업로드는 추가 비용 없

docs.aws.amazon.com

우선 S3의 모든 퍼블릭 엑세스 차단 체크 박스를 해제해야 하고, 버킷 정책 설정해줘야 한다. 처음 s3 생성시 퍼블릭 엑세스를 모두 차단하는게 안전하다고 생각했는데 공식 가이드에서 풀어라 하니 따라 주었다

버킷 정책도 가이드 라인에 맞춰 설정을 해주었다

이제 s3 bucket의 속성 탭으로 이동한다

맨 끝에 정적 웹 호스팅 편집 버튼을 눌러서 정보를 기재해준다

활성화되면 엔드 포인트 주소가 생성이 된다

http로 연결되다보니 "주의 요함"이 확인되고 있다. 이제 마지막으로 API Gateway에 정적 웹 호스팅 엔드 포인트 주소를 연결하도록 한다

API Gateway - S3 정적 웹 호스팅 엔드포인트 연결

shorten-url-forward와 연결한 API Gateway에 GET 메서드를 추가한다. 엔드포인트 URL에는 S3 정적 웹 호스팅 엔드포인트 주소를 입력한다

메서드 생성이 되면 메서드 응답에 200을 삭제 후 "API 배포" 버튼을 누른다

최종 결과

도메인 주소로 접속해서 정상적으로 축약 주소가 만들어지는 것을 확인했다

저작자표시 비영리 변경금지

'공부 > DevOps' 카테고리의 다른 글

[AWS]서버리스 기반 URL 주소 단축 서비스 구현 - (2) 포워딩 람다 구현 (0)	2024.09.24
[AWS] 서버리스 기반 URL 주소 단축 서비스 구현 - (1) 키 생성 람다 구현 (0)	2024.09.24
[AWS] VPC, Subnet, EC2 개발 인프라 구성 (선착순 쿠폰 발급 시스템) (0)	2024.09.20
[NHN Cloud] 컨테이너 기반 Prometheus, Grafana 모니터링 환경 구성(by 오픈 소스 툴) (0)	2024.09.02
[NHN Cloud] 기본적인 웹 서버, DB 인프라 구축 (vpc, subnet, floating ip, ..) (5)	2024.08.30