deployment/AWS

[AWS] S3 + CloudFront로 https 정적 웹사이트 배포

hojung 2022. 12. 22.

728x90

1. CloudFront

AWS CloudFront는 AWS에서 제공하는 CDN 서비스이다. CDN은 서로 다른 지역에 있는 콘텐츠 제공자와 사용자 간에 콘텐츠 제공을 보다 빠르게 처리하기 위한 기술이다.

CDN의 원리는 각 지역마다 엣지 로케이션이라는 CDN 서버를 만들어 콘텐츠 사용자가 리소스를 요청할 시 사용자와 가까운 CDN 서버에 캐쉬되어 있던 데이터를 보내줌으로써 원래 서버와 통신할 필요없이 캐싱된 데이터를 바로 받아볼 수 있게 하는 원리이다.

예를 들면 우리가 하나의 서버를 AWS의 EC2나 S3를 이용하여 배포한다면 이 배포된 서비스를 CDN에 태워서 더욱 빠른 서비스를 제공할 수 있게 된다.

2. 계기

나는 현재 진행중인 스타트업 팀의 어드민 페이지를 맡아 개발했는데 이제 어드민 페이지를 배포해야하는 시기가 왔다.

따라서 현재 스타트업 공용 계정으로 AWS에 로그인하여 S3를 통해 정적 웹사이트를 호스팅하고 CloudFront를 통해 CDN을 태워서 빠르게 배포를 할 준비를 해야했다.

3. 사용자 설정

먼저 배포에 사용할 AWS의 서비스가 S3와 CloudFront이므로 AWS의 IAM서비스에서 두 서비스에 대한 권한을 갖는 사용자를 만들어줘야한다. 이미 존재한다면 권한만 추가하면 된다!

IAM 서비스에서 사용자 추가를 한다.

사용자 이름과 AWS 엑세스 유형을 엑세스 키와 프로그래밍 방식 엑세스로 설정해준다.

위에서 언급했듯이 두 가지 권한이 필요하다.

AmazonS3FullAccess
CloudFrontFullAccess

그 후 키는 자신만 알 수 있는 키로 지정한 뒤

위와 같이 사용자를 만들어준다.

4. S3 버킷 만들기

사용자 설정이 완료되었으면 이제 S3의 버킷을 만들어 주어야한다. AWS의 S3로 이동해서 버킷을 만들어주었다.

버킷 만들기를 눌러준다.

사실 버킷 이름은 나중에 도메인 연결과 관련이 있으니 버킷 이름과 프로젝트 명을 같게 해주어야 한다는 얘기를 본 거 같은데 다르게 해도 잘되긴 했다. (그래도 혹시 모르니 같게 하자)

프로젝트명만 설정해준 후 나머지 설정은 건들지 않았다.

5. 정적 웹 사이트 호스팅 활성화

버킷의 속성 탭에 방문한 후 밑으로 내리다보면 정적 웹 사이트 호스팅이라는 탭이 있다. 그 탭으로 들어가보자

편집 버튼을 누른다.

이동하게 되면 다음과 같은 폼이 뜬다. 정적 웹 사이트 호스팅을 활성화 해주고 인덱스 문서에는 최종 빌드한 html파일인 index.html

오류 문서는 따로 지정해주지 않았으니 똑같이 index.html을 적어주고 변경 사항을 저장한다.

그러면 위와 같이 정적 호스팅 된 주소가 정적 웹 사이트 호스팅 탭에 뜨게 될 것이다.

이 주소를 잘 기억했다가 cloudFront에 태워줘야 한다.

6. 버킷 정책 변경

S3의 버킷은 정책을 변경해주지 않으면 외부의 요청을 차단한다. 따라서 다음과 같이 적어줘서 버킷 정책을 퍼블릭으로 변경해준다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::버킷명/*"
        },
        {
            "Sid": "Statement2",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::버킷명"
        }
    ]
}

권한 편집은 다음과 같이 버킷의 권한 탭에서 버킷 정책을 편집하면 할 수 있다.

7. CloudFront 배포 생성

이제 cloudFront 서비스로 이동해 배포 생성을 해줘야한다.

배포 탭으로 이동한 후

배포 생성을 눌러준다.

아까 위에서 S3버킷을 정적 웹 사이트 호스팅을 통해 배포된 주소가 있었을 것이다. 그 주소를 원본 도메인과 이름에 입력해준다.

허용된 http 방법에 Redirect Http to Https를 선택해준다. 왜냐하면 우리가 S3에서 정적 웹사이트를 호스팅 했을 때는 http통신 방식을 이용해 배포가 되는데 CloudFront에서는 신기하게도 CDN에는 https통신 방식을 적용하고 CDN에서 S3는 http통신을 하는 즉 Redirect하는 방식을 사용하기 때문에 따로 SSL인증서 없이도 https를 적용할 수 있다.

허용된 HTTPs 방식 또한 배포할 웹사이트가 단순 랜딩 페이지 같은 사용자와 상호작용이 없는 페이지라면 GET, HEAD, OPTION만을 체크해도 되겠으나 사용자와 상호 작용이 있다면 모두 들어있는 옵션을 선택해준다.

8. S3에 소스코드 올리기

이제 S3에 소스코드를 올려야한다. 나는 AWS CLI를 이용해서 해당 과정을 진행했다. 나의 운영체제는 Windows인데

MAC용과 Window가 다르니 자신의 운영체제에 맞는 버전을 설치하도록 하자

윈도우의 설치 링크는 아래에 있다. 맥은 내가 알기로 Homebrew를 사용하면 바로 설치가 가능한 것으로 알고 있다.

https://awscli.amazonaws.com/AWSCLIV2.msi

다음과 같이 터미널에서 aws명령어가 먹힌다면 제대로 설치가 된 것이다.

이제 IAM서비스에서 사용자를 설정할 때 만들어줬던 사용자 탭에서 보안 자격 증명 탭으로 이동한다 .

내리다보면 액세스 키 생성이라는 부분이 있다. 이 부분을 눌러 액세스 키를 만든 후 .csv파일로 저장해준다.

이제 터미널에서 aws configure 명령어를 통해 방금 발급받은 AWS Access KeyId, AWS Secret Access Key 를 적어주고 Default region name에는 서울을 Default output format으로는 json을 적어줬다.

$ aws configure
AWS Access Key ID [None] : [발급받은 IAM의 Access Key ID]
AWS Secret Access Key [None] : [발급받은 IAM의 Secret Access Key]
Default region name [None] : ap-northeast-2[서울 리전]
Default output format [None] : text / json / table

그럼 이제 사용자 설정이 되었을 것이다.

나는 Vite + React 조합을 이용해 어드민 페이지를 만들었고 yarn build를 통해 빌드된 index.html파일을 dist폴더 안에 가지고 있었다.

따라서 aws cli를 통해 다음 명령어를 입력하면 된다.

aws s3 sync ./[빌드 폴더 이름] s3://[s3버킷 이름] --profile=[IAM 사용자 이름]

이렇게 하면 배포가 완료된다!

아마 S3 버킷에는 http주소가 cloudFront에는 https가 적용된 배포된 주소가 뜰 것이다.

프론트엔드 공부 외에도 세상엔 재밌는 것이 많은 거 같다.