간단하게 AWS를 이용해서 정적 배포를 해봅시다.
도메인 구매 후 Route53에 등록하고, HTTPS를 위한 증명서 발급은 미리 되어있다고 가정합니다.
1. S3
원하는 이름으로 버킷을 생성합니다.
유저들에게 서빙할 html 파일을 저장하는 용도로 사용할 것이기 때문에 버킷에 대한 퍼블릭 액세스를 개방합니다.
나머지 설정은 기본 설정을 따르셔도 좋고, 필요한 부분들을 설정해주시면 됩니다.
버킷을 생성했으면 해당 버킷의 속성 탭으로 접근해서 맨 아래의 정적 웹 호스팅을 활성화합니다. 맨 밑의 리다렉션 규칙은 비워둡니다.
이제 권한 탭으로 이동하여 버킷 정책과 CORS 정책을 설정합니다.
정책 생성기를 사용할 경우 위 사진과 같이 설정하고, Actions는 GetObject, ARN은 버킷 ARN을 입력합니다.
생성 혹은 설정한 정책을 적용하고, 필요한 경우 맨 아래의 CORS 설정을 진행합니다.
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2"
],
"MaxAgeSeconds": 3000
}
]위 예시 구성에서 필요에 따라 바꿔 쓰시면 됩니다.
2. CloudFront
S3가 준비가 되었다면 Origin domain을 눌렀을 때 슬롯에서 바로 선택이 가능합니다.
특별한 점이 없다면 아래와 같이 캐시 설정을 해주시면 됩니다. 필요한 경우 CORS 설정을 아래와 같이 추가합니다.
이후 함수 연결, WAF는 개인적으로 필요에 따라 설정합니다.
HTTPS 연결을 위해 인증서 선택을 해주시면 됩니다. 인증서 발급은 되어있다고 가정합니다.
대체 도메인 이름은 실제 사용할 도메인을 써줍니다.
3. Route53
본인 도메인 이름을 호스팅 해놨을 것입니다. 레코드 생성을 누릅니다.
만약 HTTPS가 아니라 HTTP 연결을 한다면 별칭 설정을 S3 웹 사이트 엔드포인트에 대한 별칭으로 해주시면 됩니다.
4. S3 버킷에 빌드 결과물 업로드
NextJS를 이용해 빌드 결과물을 올려보겠습니다.
위 결과물을 그대로 S3에 올리면 아래 화면처럼 될겁니다. 만약 index.html 이외의 다른 페이지들까지 서빙하는 경우 S3에 업로드 후 .html 확장자를 제거해주셔야 합니다. 그렇지 않으면 mydomain/login.html 처럼 html 확장자를 포함한 도메인으로 접근을 해야 하기 때문입니다. S3에 업로드하기 전에 .html 확장자를 제거한 채로 업로드하면 해당 페이지로 접근했을 때 S3 버킷에서 웹사이트를 서빙하지 않고 파일 자체를 덤프로 던져버리기 때문에 정상적인 웹페이지로서 작동하지 않습니다.
S3에 업로드 후 페이지 객체들의 .html 확장자를 제거한 후의 최종 모습은 아래 화면처럼 됩니다.
이제 기본적인 설정이 끝났습니다. 하지만 이 상태로는 정적 배포 업데이트를 위해선 항상 손으로 빌드 결과물을 올려줘야 합니다.
자동화를 위한 옵션으로는 깃허브 액션, 젠킨스 등의 다양한 선택지가 있습니다.
이후 www 리다이렉션 설정과 젠킨스를 사용한 배포 자동화 포스팅을 해보겠습니다.
'Infra' 카테고리의 다른 글
| [AWS] github action + S3로 NextJS 정적배포 자동화 시도 (0) | 2024.08.14 |
|---|
