[Next.js] AWS S3 + CloudFront 배포

AWS S3 + CloudFront를 이용해 Next.js 페이지 배포

💡 회사에서 내가 맡았던 일 중 관리자 페이지를 배포했던 일에 대해서 어떻게 배포했는지를 적어보려고 한다.. (무려무려 내가 들어온지 2개월 정도 되었을 때의 일,,) 내 방식이 완벽한 정답이 아닐 수도 있다. 그렇지만 내가 정리도 할겸, 누군가에게는 도움이 될 수도 있지 않을까 싶어 적어본다.

1. IAM 사용자 추가

• AWS IAM 서비스에 들어가 사용자 추가를 누르고 사용자 이름과 프로그래밍 방식 액세스를 선택한 뒤 다음으로 넘어간다.

• 사용자에 대한 권한 설정 부분에서는 기존 정책 직접 연결을 선택한 뒤 CloudFrontFullAccess 권한을 선택해준 뒤 넘어간다.

• 태그 설정 부분은 설정해주지 않았다.

• 검토 하는 부분에서는 설정했던 걸 확인한뒤 최종적으로 사용자 만들기를 클릭하면 된다!

2. s3 버킷 생성

• AWS S3 서비스에 들어가서 버킷 만들기를 클릭 한 뒤 진행해주면 된다. 버킷 이름을 설정해줄 때, 실제 사이트명과 같게 해주어야 나중에 도메인 설정을 할 수 있다고 백엔드 개발자님이 조언해주셔서 나는 버킷이름을 위와 같은 방식으로 설정해주었다. 각자의 상황에 따라 이름을 정하면 될 것 같고, 다른 설정은 건드린 것이 없다.

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

• 생성한 버킷의 속성 탭에 가보면 하단에 정적 웹사이트 호스팅에 대한 설정 부분이 있다. 그 설정을 편집해 활성화로 변경하고 인덱스 문서와 오류 문서를 둘 다 index.html로 적어주었다.

4. 버킷 정책 설정

{
    "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:::버킷명"
        }
    ]
}

• 생성한 버킷의 권한 탭에 가보면 버킷 정책을 설정할 수 있는 부분이 나온다. 편집을 클릭해 나는 위와 같은 정책을 설정해주었다. 해당 버킷 정책은 JSON으로 작성해야 한다.

5. CloudFront에서 배포 생성

• 거의 다 와간다! AWS CloudFront 서비스에 들어가서 배포 생성을 클릭한 뒤, 원본 도메인은 생성한 s3 버킷을 선택해주면 되는데, 이때 주의 할 점은 버킷이름.s3.ap-northeast-2.amazonaws.com -> 버킷이름.s3-website.ap-northeast-2.amazonaws.com로 수정해 주어야 한다는 점이다! 수정을 하지 않아 오류가 났다는 글을 보고 나도 수정해서 작성해주었다.

• 기본 캐시 동작 부분에서는 뷰어 프로토콜 정책을 Redirect HTTP to HTTPS로 선택하고, 허용된 HTTP 방법은 GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE 로 선택해준다.

• 추가로 회사에서는 사용자 정의 SSL 인증서가 있어 해당 인증서를 선택해주고 배포 생성을 진행했다!

6. 소스코드 s3에 올리기

"scripts": {
    "dev": "NODE_ENV=local node server.js",
    "build": "next build && next export",
    "start": "NODE_ENV=production node server.js",
    "deploy": "aws s3 sync ./out s3://버킷명 --profile=사용자명",
    "production": "aws s3 sync ./out s3://버킷명 --profile=사용자명"
  },

• 마지막 단계이다! 프로젝트 코드로 돌아가서 package.json을 수정해주어야 한다. 나는 aws cli를 사용했는데, 만약 설치가 안되어있다면 설치 후 명령어를 사용할 수 있다. (aws cli 설치 바로가기)

• 위 코드는 기존의 scripts 내용에 deploy와 production 명령어를 추가한 것인데, 회사에서 개발용 사이트와 실제 실서버용 사이트를 구별해야 했기에 저렇게 나누어서 두개를 추가해주었다.

• yarn build 명령어로 빌드를 진행하고, yarn deploy 명령어를 입력해 버킷에 코드를 올려준 뒤, 정적 웹 사이트 호스팅했던 주소로 들어가보면 사이트가 업로드 된것을 확인 할 수 있을 것이다!!

2개월 신입에게 큰 도움을 주신 글들..🥲
[AWS] Next.js 블로그 S3 + CloudFront를 이용해 배포한 후기
리액트 앱 AWS S3, CloudFront 에 배포하기