프로젝트에서 프론트엔드 사이트를 AWS amplify로 배포하였다!
✨ Amplify
AWS는 정적 페이지를 구축, 배포 및 호스팅 하기 위한 AWS 서비스로, Amplify를 Git repositotry에 연결 시 코드가 커밋될 때마다 자동으로 빌드 및 배포가 가능하다.
✨ 사용법
1. AWS 가입
2. AWS console 접속 후 > AWS Amplify 검색 > 시작하기 클릭 > 웹 앱 호스팅 선택
3. GitHub 연결 → 원하는 조직 및 레포에 접근 권한 부여
4. 브랜치 연결 및 검토
5. 배포
❗️에러 발생
Mixed Content: The page at 'https://{웹사이트주소}/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://{서버IP}/community'. This request has been blocked; the content must be served over HTTPS.
⚒️ 서버에서 http -> https로 url을 수정함.
❗️에러 발생
Access to XMLHttpRequest at 'http://{서버IP}/community' from origin 'https://main.dj5b233u1e7ny.amplifyapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
⚒️ 백엔드에 요청드려서 CORS 에러 해결.
6. 도메인 연결 (with Route 53)
Route 53
AWS Route 53에 접근하여 호스팅 영역 생성한다.
(프로젝트에서 서버에서 사용하는 도메인에 연결하였기에 Route 53에 호스팅 영역을 생성하는 과정은 생략한다.)
Amplify
도메인 관리 탭에 들어간다.
도메인 추가 버튼을 눌러 원하는 도메인을 입력하고 도메인 구성을 클릭하여 정보를 입력한다.
(예를 들어 아래와 같이 입력하면 된다.)
정상적으로 도메인을 추가하게 되면 SSL 설정을 해야한다.
CNAME 기준으로 앞 부분이 새롭게 배포하려는 도메인 주소, 뒷 부분이 현재 배포되어있는 도메인 주소이다.
Route 53에서 해당 도메인에 레코드 생성을 눌러 CNAME 레코드를 추가한다.
'
❗️레코드 이름 = CNAME 기준 앞 부분
❗️값 = CNAME 기준 뒷 부분
정상적으로 등록하게 되면 SSL 인증을 거쳐 도메인 소유권을 확인했다고 뜬다!
따라서 아래와 같은 사이트로 프로젝트 배포를 완료하였다! 🥳
https://www.datebuzz.net/
➕ 미리보기 기능을 통해 Amplify에 연결한 브랜치에 머지되기 전에, pr을 올렸을 때에도 preview를 통해 확인이 가능하다.
풀 리퀘스트를 위한 웹 미리 보기 - AWS Amplify호스팅
참고 아티클
실제 서비스 배포 후기 #1 (feat. 도메인, 호스팅)
React AWS amplify에 배포
REACT AWS AMPLIFY로 배포하기
[AWS] Amplify의 SSL인증서를 이용한 DNSZi CNAME 연결방법(https 적용)
