를 사용하여 Bitbucket 리포지토리를 AWS Amplify와 통합 AWS CloudFormation - AWS 권장 가이드
요약사전 조건 및 제한 사항아키텍처도구에픽관련 리소스첨부

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

를 사용하여 Bitbucket 리포지토리를 AWS Amplify와 통합 AWS CloudFormation

작성자: Alwin Abraham(AWS)

환경: 프로덕션

기술: DevOps

AWS 서비스: AWS Amplify; AWS CloudFormation

요약

AWS Amplify를 사용하면 일반적으로 필요한 인프라를 설정하지 않고도 정적 웹 사이트를 빠르게 배포하고 테스트할 수 있습니다. 조직에서 기존 애플리케이션 코드를 마이그레이션하든 새 애플리케이션을 구축하든 관계없이 소스 제어에 Bitbucket을 사용하려는 경우 이 패턴의 접근 방식을 배포할 수 있습니다. AWS CloudFormation 를 사용하여 Amplify를 자동으로 설정하면 사용하는 구성에 대한 가시성을 제공할 수 있습니다.

이 패턴은 를 사용하여 Bitbucket 리포지토리를 AWS Amplify와 AWS CloudFormation 통합하여 프런트엔드 지속적 통합 및 지속적 배포(CI/CD) 파이프라인 및 배포 환경을 생성하는 방법을 설명합니다. 이 패턴의 접근 방식은 반복 가능한 배포를 위한 Amplify 프런트 엔드 파이프라인을 구축할 수 있음을 의미합니다.

사전 조건 및 제한 사항

필수 조건

  • 활성 Amazon Web Services(AWS) 계정

  • 관리자 액세스 권한이 있는 활성 Bitbucket 계정

  • cURL 또는 Postman 애플리케이션을 사용하는 터미널에 대한 액세스

  • Amplify에 대한 지식

  • AWS CloudFormation 사용 경험

  • YAML형식이 지정된 파일에 대한 친숙도

아키텍처

Diagram showing user interaction with Bitbucket repository connected to AWS Amplify in AWS 클라우드 region.

기술 스택  

  • Amplify

  • AWS CloudFormation

  • Bitbucket

도구

  • AWS Amplify - Amplify는 개발자가 클라우드 기반 모바일 및 웹 앱을 개발하고 배포할 수 있도록 지원합니다.

  • AWS CloudFormation - AWS CloudFormation 는 AWS 리소스를 모델링하고 설정하는 데 도움이 되는 서비스로, 리소스를 관리하는 데 소요되는 시간을 줄이고 에서 실행되는 애플리케이션에 더 많은 시간을 집중할 수 있습니다AWS.

  • Bitbucket - Bitbucket은 전문가 팀을 위해 설계된 Git 리포지토리 관리 솔루션입니다. Git 리포지토리를 관리하고, 소스 코드에 대해 협업하고, 개발 흐름을 안내할 수 있는 중앙 장소를 제공합니다.

code

bitbucket-amplify.yml 파일(첨부됨)에는 이 패턴의 AWS CloudFormation 템플릿이 포함되어 있습니다.

에픽

작업설명필요한 기술
(선택 사항) Bitbucket 리포지토리를 생성합니다.

  1. Bitbucket 계정에 로그인하고 새 리포지토리를 생성합니다. 이에 대한 자세한 내용은 Bitbucket 설명서의 Git 리포지토리 생성을 참조하세요. 

  2. 작업 영역 이름을 기록합니다.

참고: 기존 Bitbucket 리포지토리를 사용할 수도 있습니다.

DevOps 엔지니어
워크스페이스 설정을 엽니다.

  1. 작업 영역을 열고 리포지토리 탭을 선택합니다.

  2. Amplify와 통합할 리포지토리를 선택합니다.

  3. 리포지토리 이름 위에 있는 작업 영역의 이름을 선택합니다.

  4. 사이드바에서 설정을 선택합니다.

DevOps 엔지니어
OAuth 소비자를 생성합니다.

  1. 앱 및 기능 섹션에서 OAuth 소비자를 선택한 다음 소비자 추가를 선택합니다.

  2. 소비자의 이름을 입력합니다(예: Amplify Integration).

  3. 콜백 을 입력합니다URL. 이 필드는 필수 입력이지만 통합을 완료하는 데 사용되지 않으므로 값은 http://localhost:3000이 될 수 있습니다

  4. 개인 소비자입니다 확인란에 체크 표시하세요.

  5. 다음 권한을 선택합니다.

    • 프로젝트 – Read

    • 리포지토리 – Admin

    • 풀 요청 – Read

    • 웹후크 - Read 및 Write

  6. 다른 필드를 모두 기본값으로 그대로 두고 제출을 선택합니다.

  7. 생성된 키와 암호를 기록합니다.

DevOps 엔지니어
OAuth 액세스 토큰을 가져옵니다.

  1. 터미널 창을 열고 다음 명령을 실행합니다. 

curl -X POST -u "KEY:SECRET" https://bitbucket.org/site/oauth2/access_token -d grant_type=client_credentials 

중요: KEY 및 SECRET을 이전에 기록한 키와 비밀번호로 바꿉니다. 

2. 따옴표를 사용하지 않고 액세스 토큰을 기록합니다. 토큰은 제한된 시간에만 유효하며 기본 시간은 2시간입니다. 이 기간에 AWS CloudFormation 템플릿을 실행해야 합니다.

DevOps 엔지니어
작업설명필요한 기술
AWS CloudFormation 템플릿을 다운로드합니다.

bitbucket-amplify.yml AWS CloudFormation 템플릿(첨부됨)을 다운로드합니다. 이 템플릿은 Amplify 프로젝트 및 브랜치 외에도 Amplify에서 CI/CD 파이프라인을 생성합니다.

AWS CloudFormation 스택을 생성하고 배포합니다.

  1. 배포하려는 AWS 리전의 AWS 관리 콘솔에 로그인하고 AWS CloudFormation 콘솔을 엽니다. 

  2. 스택 생성(새 리소스 포함)을 선택한 다음 템플릿 파일 업로드를 선택합니다. 

  3. bitbucket-amplify.yml 파일을 업로드합니다.

  4. 다음을 선택하고 스택 이름을 입력한 후 다음 파라미터를 입력합니다.

    • 액세스 토큰 : 이전에 생성한 OAuth 액세스 토큰을 붙여넣습니다.

    • 리포지토리 URL: Bitbucket 프로젝트 리포지토리의 를 추가합니다URL. URL 는 일반적으로 다음 형식입니다. https://bitbucket.org/<WORKSPACE_NAME>/<REPO_NAME>

    • 브랜치 이름: Bitbucket 리포지토리의 브랜치 이름과 일치해야 합니다. 이 브랜치는 AWS CloudFormation 스택을 실행할 때 존재할 필요는 없지만 환경에 코드를 배포하는 데 필요합니다.

    • 프로젝트 이름: Amplify 프로젝트와 연결할 이름입니다.

5. 다음을 선택한 다음 스택 생성을 선택합니다.

DevOps 엔지니어
작업설명필요한 기술
리포지토리의 브랜치에 코드를 배포합니다.

  1. git clone https://bitbucket.org/<WORKSPACE_NAME>/<REPO_NAME> 명령을 실행하여 Bitbucket 리포지토리를 복제합니다.

  2. AWS CloudFormation 스크립트를 실행할 때 사용된 브랜치 이름을 확인합니다. 새 브랜치를 생성하고 확인하려면 git checkout -b <BRANCH_NAME> 명령을 실행하세요. 기존 브랜치를 확인하려면 git checkout <BRANCH_NAME> 명령을 실행하세요.

  3. 코드를 브랜치에 커밋하고 git commit 및 git push 명령을 실행하여 원격 브랜치로 푸시합니다.

  4. 그런 다음 Amplify는 애플리케이션을 빌드하고 배포합니다.

자세한 내용은 Bitbucket 설명서의 기본 Git 명령을 참조하세요. 

앱 개발자

관련 리소스

인증 방법(Atlassian 설명서)

첨부

이 문서와 관련된 추가 콘텐츠에 액세스하려면 attachment.zip 파일의 압축을 풉니다.