1. route53 생성
가장 먼저 카페24 도메인 네임서버 연결을 위해 route53 부터 호스팅 영역을 생성
(네임서버 적용 후 적용 까지 시간이 꽤 걸린다)
생성 후 "값/트래픽 라우팅 대상" 주소 4개를 카페 24 도메인 네임서버에 저장한다
2. S3 웹 호스팅 생성
사용할 도메인과 같은 이름으로 버킷 이름을 정해줍니다
엑세스 차단 전부 풀어줍니다
해당 설정만 진행 후 버킷 만들기 진행
lsmtest.shop은 www로 redirect 시킬거라 설정을 해줘야 합니다
속성 -> 정적 웹사이트 호스팅
권한 -> 버킷 정책 편집
{
"Version": "2012-10-17",
"Id": "Policy1649421058532",
"Statement": [
{
"Sid": "Stmt1649420985040",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:PutObject"
],
"Resource": "arn:aws:s3:::lsmtest.shop/*"
}
]
}
lsmtest.shop의 셋팅을 이걸로 끝입니다
#www.lsmtest.shop셋팅
일단 권한에서 버킷 정책을 똑같이 편집 해줍니다
속성 -> 정적 웹 사이트 호스팅 편집
객체에서 파일을 업로드 해줍니다
3. CloudFront 설정
https를 위해 CloudFront를 설정해줘야해요
배포생성을 lsmtest.shop, www.lsmtest.shop 둘다 해줘야 합니다
먼저 lsmtest.shop 배포생성할게요
설정 시작시 오리진 설정에 "이 사이트 엔드포인트 사용 하기" 클릭해주세요
http to https로 바꾸어주세요
보안 보호 비활성화 해주세요
https를 위해 ssl 인증서가 있어야 해요 없으면 인증서 요청 버튼 클릭해서 생성해야합니다
인증서 요청 페이지 -> 생성 -> 도메인 이름만 정하고 바로 생성하면 돼요
www도 같이 사용할거니 같이 넣어주세요
생성 후에 Route 53 레코드 생성 눌러 아까 만든 route53에 레코드를 생성해야해요
(Route 53레코드 생성)
검증 성공이 되야 사용할 수 있어서 조금 기다려야합니다
다시 cloudFront생성 페이지로 넘어가 ssl인증서 새로고침해주고 적용시켜줍니다
그리고 대체 도메인이름으로 lsmtest.shop을 추가해줘야해요
(CloudFront는 배포가 되면 cloudFront전용 사이트 url이 생기는데 대체 도메인을 해줘야 route53에서 인식을 할 수 있습니다)
배포 생성 해주시고 나머지 www도메인도 빠르게 똑같이 배포 생성하겠습니다
생성 후에 CloudFront는 마지막 수정에 날짜가 찍혀있어야 배포가 끝난거라 기다려야합니다
wait...
4. route53 마지막으로 레코드생성하여 끝내기
처음 만들었던 route53으로 돌아가 만들었던 호스팅을 클릭하고 레코드 생성을 합니다
(별칭을 눌러야 라우팅대상이 자동으로 목록이 생겨요)
이제 끝났어요 도메인을 검색하면 잘뜹니다. 만약 안뜬다면 기다려주세요 배포될때까지 시간이 필요합니다
lsmtest.shop친다면 www로 redirect잘되는것도 확인이 돼요
끝!
'개발' 카테고리의 다른 글
오래된 CRA -> vite 로컬 환경 마이그레이션 작업기 (0) | 2024.05.28 |
---|---|
Vite(react) production배포시 IE11호환 되지 않는 문제 (0) | 2024.05.28 |
[velog 2023-10-24] 모바일 인덱스 UI개편 swipe core컴포넌트 개발 (0) | 2024.05.28 |
[velog 2023-09-22] turborepo watch모드 build시 종속성 순서 보장하지 않는 문제 (0) | 2024.05.28 |
[velog 2023-06-23] 아이웨딩 스드메 계산기 개편 후기/회고 (0) | 2024.05.28 |