AWS Amplify로 웹 앱 호스팅하기

새로운 사내 프로젝트를 들어가면서 AWS Amplify를 이용해
빠르게 프론트엔드 배포 시스템을 구축하고, 개발 서버 호스팅까지 완료해 보았다.

기존에 AWS route53에 도메인을 보유한 상태였고, 
관련한 AWS 권한도 회사 계정에 부여받은 상태임을 먼저 알려드립니다 🙇🏻‍♀️

 

🔥 Amplify 설정 

 

1.  Amplify 접속

먼저 AWS에 로그인한 후 Amplify를 검색해 주세요
Amplify 페이지까지 왔다면 새 앱 버튼을 눌러 웹 앱 호스팅을 선택!

 

2. Git 리포지토리 선택

배포를 원하는 Git 리포지토리와 연결하는 단계입니다.
저는 Bitbucket으로 Git을 관리하고 있으므로 Bitbucket을 선택 후 다음으로 넘어가 볼게요.

 

3. 리포지토리 브랜치 추가

전 Bitbucket에 이미 권한이 부여되어 있어서 Accept만 눌러주었고,
처음 구축하는 단계라면 해당 Git 리포지토리에서 권한 설정이 먼저 선행되어야 합니다.

리포지토리 서비스 공급자로부터 권한을 부여받으면 
호스팅을 원하는 리포지토리와 브랜치를 검색하여 연결해 주세요.

그리고 다음 버튼 클릭!😝

 

4. 빌드 설정

4-1 빌드 파일 생성

여기까지 참 쉽죠.. 

이제 빌드 파일 생성을 해야 되는데, 다행히도 친절한 AWS는 기본 빌드 설정 파일을 작성해 줍니다.
저는 기본으로 생성된 빌드 파일 commands에 몇 줄을 더 추가해 주었습니다.

현재 회사에서 AWS CodeArtifact를 이용 중이라 빌드시 CLI로 codeartifact 로그인이 필요한 상태인데,
로그인을 하기 위해 AWS access key와 secret key가 필요하므로 이 부분을 추가적으로 작성했습니다.

참고로 Node 버전에 따라 아래와 같이 nvm install을 다르게 설정할 수 있답니다

nvm install --lts // (Node 최신 버전)
nvm install $VERSION_NODE_12 // (12버전)
nvm install $VERSION_NODE_16 // (16버전)

 

4-2 환경변수 설정

앞서 작성한 빌드파일에 $ACCESS_KEY_ID와 같은 환경변수가 지정되어 있는데요!
환경 변수에 맞는 값들을 따로 지정해 주었습니다.

5. 저장 및 배포

리포지토리 서비스와 배포하라 리포지토리 및 브랜치를 확인 또 확인
환경 변수도 같이 확인해 주시고 이상 없다면 저장 및 배포를 눌러주세요

여기까지가 Amplify 호스팅 끝입니다! 🥳🥳🥳

지정한 브랜치에 코드를 커밋 -> 푸시만 하면
자동 빌드 후 amplify app에 배포까지 완료됩니다.

보유한 도메인과 연결하기 위해선 추가적인 도메인 설정이 필요한데욥!
이 부분은 다음 포스팅에 작성해 보겠습니다 퇴근해야 되거든요 😘