저번엔 github actions + s3에서 끝났다면
이번에는 CloudFront와... route53도 활용해보았읍니다.......
일단 도메인은 이미 백엔드에서 구매 후 쓰고 있는 상황이라 route53엔 이미 레코드가 있었읍니다.
s3 설정은 똑같지만 정적 웹 사이트 호스팅은 비활성화 해줍니다 꼭이요,, 나중에 헷갈림
s3 설정,깃허브액션까지 다 설정해뒀다면
CloudFront로 이동후 배포 생성 클릭
이런 화면이 뜰텐데
지금 서치하면 이 ui랑 다른 콘솔들이 떠서 굉장히. 당황스럽다.
Distribution name은 아무렇게나 지어도 된다 그리고 다른거 설정할 필요없이 저상태로 next
그럼 이 화면이 뜨는데
여기서 건들일건
Origin이다
Brows S3 누르면 이미 만들어둔 버킷 뜨니까 그거 잘 보고 선택하고
이렇게 뜬다
origin path는 /index.html로 했던 기억이 있다.
나머지는 그냥 체크 되어있는대로 놔두고 next 누르면 된다
보안 비활성화 체크
활성화하면 돈들어요잉
만들고 나서는 id 클릭하면 이 화면이 나오는데
지금 나는 대체 도메인이름을 설정해둬서 이렇게 뜨는데 설정을 안해두면
add 어쩌고 버튼만 보인다
원본탭 클릭 후
만들어진 원본을 클릭후 편집
누르면 뭐 어쩌구 뜨는데
오리진 도메인은
이런식으로 떠 있는거 클릭하면 된ㄴ다
정적 웹 호스팅 켜두면 뭔 s3-website 어쩌고하라고 경고창 뜨는데 그거 믿고 했다가 한참 헤맸다 꼭.. 끄고하기
그리고 원본 엑세스는
원본 엑세스 제어 설정 클릭해주고
Create new OAC를 눌러준다
이렇게 뜰텐데 서명 요청하고 create 하면 됨
그리고 앞에 oac가 붙어잇는걸로 설정
누른 후엔 정책 복사하고 S3 버킷 권한으로 이동 눌러서 권한 그대로 덮어 쓰기 해주면 된다
shield까지 켜주고 변경 사항 저장하면 된다
다시 이 페이지로 와서
설정- 편집
여기서 산 도메인 이름 넣어주고
나는 혹시몰라서 겹치면 안될까봐 app.k.me도 넣고 www.k.me도 넣엇다
SSL은 도메인 때문에 저런건데 만들어둔거 이름 확인하고 설정해주면 됨
Default root object도 /index.html로 설정해주엇다.
배포생성 누르면 됨
그러면 배포 도메인 이름이 있는데 나는 그거 눌러도 아무런.. 저기가 없엇다
나 이것만 몇ㄱ시간만 봣음.
아 그래서 왜 안되는데에에에ㅔ!!! 햇는데
일단 나는 default root object를 설정 안해놔서 그랫던거 같음
아무튼
근데 나는 저 도메인 꼬라지가 마음에 안들어서 백엔드에서 사둔 도메인으로 접속하게 하고싶엇음.
나는 이미 백엔드가 서버판다고 저렇게 만들어놔서 dns 연결이니 뭐니 아무것도 안ㄹ햇습니다.
없으면 호스팅 영역 생성을 통해.. 만들고
호스팅 영역 이름 클릭
그럼 만들어진 레코드들이 뜬다
원래 3개 밖에 없엇늕데 내가 헤맷더니 저렇게 뭐가 많ㄹ아지긴햇다
레코드 생성 눌러줍니다
레코드 이름은 www 랑 app으로 만들엇고 별칭 토글 열고
CloudFront 배포에대한 별칭 클릭후
밑에는 배포 도메인 이름 복붙하면 된다.
레코드 생성하면
내가 만든 레코드가 보인다.
끝이다.
다 했으면 다시 클라우드 프론트로 가보자...
도메인 추가하러 가야한다,,,
add domain 클릭
여기에 이제 도메인을 넣어주는거다
나는 app.k.me
www.k.me
k.me
세개로 했음 이거 나중에 수정가능하긴한데
그럴려면 ssl 다시 발급받아야하고 좀 귀찮으니까 한번에 다 하자..
이런 화면이 뜰텐데 create certificate 누르면 알아서 생성됨
생성되면 next -> add domain 하면됨
그럼 이렇게 생긴다
이렇게까지 햇는데 나는 또 안되는것임.
아까 저 위에..디폴트 루트 어쩌고 그거 설정도 안해줫고요
오류 페이지 생성도 안해줫엇기 때문이다.
사진 처럼 설정
좀 더 빠른 최신화를 위해.. 무효화도 해주자
여기까지가 끝이다.
근데 www.k.me로 접속해도
k.me로 갔으면 좋겟다라는 생각에
하나 더 추가 해줫음
함수 메뉴 ㄱㄱ
함수생성
이름 편한대로 지어주고 함수 생성하면 된다
생성하고 함수 코드에
코드 넣어주기...~
이러면 진짜 끝. 최종이다.
잘 접속 된다.
참고