애플리케이션을 위한 백엔드 구축 - AWS Amplify 호스팅
2세대 앱을 위한 백엔드 만들기1세대 앱을 위한 백엔드 만들기

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

애플리케이션을 위한 백엔드 구축

AWS Amplify 를 사용하여 배포되는 데이터, 인증, 스토리지 및 프런트엔드 호스팅을 사용하여 풀스택 애플리케이션을 구축할 수 있습니다. AWS

AWS Amplify Gen 2는 백엔드를 정의하기 TypeScript 위한 코드 우선 기반의 개발자 환경을 도입합니다. Amplify Gen 2를 사용하여 백엔드를 빌드하고 앱에 연결하는 방법을 알아보려면 Amplify 문서에서 백엔드 구축 및 연결을 참조하십시오.

CLI와 Amplify Studio를 사용하여 1세대 앱용 백엔드를 구축하는 방법에 대한 설명서를 찾으려면 1세대 Amplify 문서에서 백엔드 구축 및 연결을 참조하십시오.

2세대 앱을 위한 백엔드 만들기

TypeScript기반 백엔드를 사용하여 Amplify Gen 2 풀스택 애플리케이션을 만드는 단계를 안내하는 자습서는 Amplify 문서에서 시작하기를 참조하십시오.

1세대 앱을 위한 백엔드 만들기

이 자습서에서는 Amplify를 사용하여 풀스택 CI/CD 워크플로를 설정합니다. Amplify 호스팅에 프런트엔드 앱을 배포합니다. 그런 다음 Amplify Studio를 사용하여 백엔드를 생성합니다. 마지막으로 클라우드 백엔드를 프런트엔드 앱에 연결합니다.

사전 조건 

이 자습서를 시작하기 전에 다음 사전 요구 사항을 완료하세요.

등록하여 AWS 계정

아직 AWS 고객이 아닌 경우 온라인 지침에 따라 AWS 계정가입해야 합니다. 가입하면 Amplify 및 애플리케이션과 함께 사용할 수 있는 기타 AWS 서비스에 액세스할 수 있습니다.

Git 리포지토리 만들기

Amplify는 비트버킷 GitHub, GitLab 및 을 지원합니다. AWS CodeCommit애플리케이션을 Git 리포지토리로 푸시합니다.

Amplify 명령줄 인터페이스 (CLI) 설치

자세한 지침은 Amplify 프레임워크 설명서의 Amplify CLI 설치를 참조하십시오.

1단계: 프론트엔드 배포

이 예제에 사용하려는 기존 프런트엔드 앱이 git 저장소에 있는 경우, 프런트엔드 앱 배포 안내를 진행하면 됩니다.

이 예제에 사용할 새 프론트엔드 앱을 만들어야 하는 경우 React 앱 만들기 설명서의 React 앱 만들기 지침을 따르세요.

프론트엔드 앱을 배포하려면

  1. 에 AWS Management Console 로그인하고 Amplify 콘솔을 엽니다.

  2. 모든 앱 페이지에서 새 앱을 선택한 다음 오른쪽 상단에서 웹 앱 호스팅을 선택합니다.

  3. 사용자 GitHub, Bitbucket 또는 AWS CodeCommit 리포지토리 공급자를 선택한 다음 계속을 선택합니다. GitLab

  4. Amplify는 git 리포지토리에 대한 액세스를 승인합니다. GitHub 리포지토리의 경우 Amplify는 이제 GitHub 앱 기능을 사용하여 Amplify 액세스를 승인합니다.

    앱 설치 및 인증에 대한 자세한 내용은 을 참조하십시오. GitHub GitHub 리포지토리에 대한 Amplify 액세스 설정

  5. 리포지토리 브랜치 추가 페이지에서 다음을 수행하십시오.

    1. 최근 업데이트된 리포지토리 목록에서 연결할 리포지토리 이름을 선택합니다.

    2. 브랜치 목록에서 연결할 리포지토리 브랜치의 이름을 선택합니다.

    3. 다음을 선택합니다.

  6. 보안 설정 구성 페이지에서 다음을 선택합니다.

  7. 검토 페이지에서 저장 및 배포를 선택합니다. 배포가 완료되면 amplifyapp.com 기본 도메인에서 앱을 볼 수 있습니다.

참고

Amplify 애플리케이션의 보안을 강화하기 위해 amplifyapp.com 도메인은 공개 서픽스 목록(PSL)에 등록되어 있습니다. 보안 강화를 위해 Amplify 애플리케이션의 기본 도메인 이름에 민감한 쿠키를 설정해야 하는 경우, __Host- 접두사가 있는 쿠키를 사용하는 것이 좋습니다. 이렇게 쿠키를 설정하면 교차 사이트 요청 위조 시도(CSRF)로부터 도메인을 보호하는 데 도움이 됩니다. 자세한 내용은 Mozilla 개발자 네트워크의 Set-Cookie 페이지를 참조하십시오.

2단계: 백엔드 생성

이제 Amplify 호스팅에 프런트엔드 앱을 배포했으므로 백엔드를 만들 수 있습니다. 다음 지침에 따라 간단한 데이터베이스 및 GraphQL API 엔드포인트가 있는 백엔드를 생성하십시오.

백엔드를 생성하려면

  1. 에 AWS Management Console 로그인하고 Amplify 콘솔을 엽니다.

  2. 모든 앱 페이지에서 1단계에서 만든 앱을 선택합니다.

  3. 앱 홈페이지에서 백엔드 환경 탭을 선택한 다음 시작하기을 선택합니다. 그러면 기본 스테이징 환경을 위한 설정 프로세스가 시작됩니다.

  4. 설정이 완료되면 스튜디오 실행을 선택하여 Amplify Studio의 스테이징 백엔드 환경에 액세스합니다.

Amplify Studio는 백엔드를 생성 및 관리하고 프론트엔드 UI 개발을 가속화하는 시각적 인터페이스입니다. Amplify Studio에 대한 자세한 내용은 Amplify Studio 설명서를 참조하십시오.

다음 지침에 따라 Amplify Studio 비주얼 백엔드 빌더 인터페이스를 사용하여 간단한 데이터베이스를 생성하십시오.

데이터 모델 생성

  1. 앱의 스테이징 환경 홈 페이지에서 데이터 모델 생성을 선택합니다. 그러면 데이터 모델 디자이너가 열립니다.

  2. 데이터 모델링 페이지에서 모델 추가를 선택합니다.

  3. 제목으로 Todo을(를) 입력합니다.

  4. 필드 추가를 선택합니다.

  5. 모델 이름에 Description을(를) 입력합니다.

    다음 스크린샷은 디자이너에서 데이터 모델이 어떻게 보일지 보여주는 예입니다.

    데이터 모델 생성을 위한 Amplify Studio UI입니다.

  6. 저장 및 배포를 선택합니다.

  7. Amplify Hosting 콘솔로 돌아가면 스테이징 환경 배포가 진행됩니다.

배포 중에 Amplify Studio는 데이터에 액세스하기 위한 AWS AppSync GraphQL API와 Todo 항목을 호스팅하기 위한 Amazon DynamoDB 테이블을 포함하여 필요한 모든 AWS 리소스를 백엔드에 생성합니다. Amplify는 백엔드를 AWS CloudFormation 배포하는 데 사용하며, 이를 통해 백엔드 정의를 다음과 같이 저장할 수 있습니다. infrastructure-as-code

3단계: 백엔드를 프런트엔드에 연결

이제 프런트엔드를 배포하고 데이터 모델을 포함하는 클라우드 백엔드를 만들었으므로 프런트엔드를 연결해야 합니다. Amplify CLI를 사용하여 백엔드 정의를 로컬 앱 프로젝트로 가져오려면 다음 지침을 따르십시오.

클라우드 백엔드를 로컬 프런트엔드에 연결하려면

  1. 터미널 창을 열고 로컬 프로젝트의 루트 디렉터리로 이동합니다.

  2. 터미널 창에서 다음 명령을 실행하여 빨간색 텍스트를 프로젝트의 고유한 앱 ID 및 백엔드 환경 이름으로 대체합니다.

    amplify pull --appId abcd1234 --envName staging

  3. 터미널 창의 지침에 따라 프로젝트 설정을 완료하십시오.

이제 지속적 배포 워크플로에 백엔드를 추가하도록 빌드 프로세스를 구성할 수 있습니다. Amplify 호스팅 콘솔에서 프런트엔드 브랜치를 백엔드에 연결하려면 다음 지침을 따르십시오.

프런트엔드 앱 브랜치와 클라우드 백엔드를 연결하려면

  1. 앱 홈페이지에서 호스팅 환경 탭을 선택합니다.

  2. 기본 브랜치를 찾아 편집을 선택합니다.

    Amplify 콘솔에서 브랜치에 대한 편집 링크의 위치입니다.

  3. 대상 백엔드 편집 창의 환경에서 연결할 백엔드의 이름을 선택합니다. 이 예시에서는 2단계에서 만든 스테이징 백엔드를 선택합니다.

    기본적으로 풀스택 CI/CD가 활성화됩니다. 이 백엔드의 풀 스택 CI/CD를 끄려면 이 옵션을 선택 취소하십시오. 풀스택 CI/CD를 끄면 앱이 풀 전용 모드로 실행됩니다. 빌드 시 Amplify는 백엔드 환경을 수정하지 않고 aws-exports.js 파일만 자동으로 생성합니다.

  4. 다음으로 앱 백엔드를 변경하는 데 필요한 권한을 Amplify에 제공하도록 서비스 역할을 설정해야 합니다. 새로운 서비스 역할을 만들거나 기존 역할을 사용할 수 있습니다. 지침은 서비스 역할 추가 섹션을 참조하세요.

  5. 서비스 역할을 추가한 후 대상 백엔드 편집 창으로 돌아가서 저장을 선택합니다.

  6. 스테이징 백엔드를 프론트엔드 앱의 기본 브랜치에 연결하는 작업을 마치려면 프로젝트의 새 빌드를 수행하십시오.

    다음 중 하나를 수행하십시오.

    • git 리포지토리에서 일부 코드를 푸시하여 Amplify 콘솔에서 빌드를 시작합니다.

    • Amplify 콘솔에서 앱의 빌드 세부 정보 페이지로 이동한 다음 이 버전 재배포를 선택합니다.

다음 단계

기능 브랜치 배포 설정

권장 워크플로에 따라 여러 백엔드 환경에서 기능 브랜치 배포를 설정하십시오.

Amplify Studio에서 프론트엔드 UI 만들기

Studio를 사용하여 ready-to-use UI 구성 요소 집합으로 프런트엔드 UI를 빌드한 다음 이를 앱 백엔드에 연결합니다. 자세한 내용 및 자습서는 Amplify 프레임워크 설명서에서 Amplify Studio 사용 설명서를 참조하십시오.