풀스택 연속 배포 시작하기 - AWS Amplify호스팅

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

풀스택 연속 배포 시작하기

Amplify 호스팅을 사용하면 Amplify Framework로 앱을 빌드하는 개발자가 코드를 커밋할 때마다 백엔드 및 프런트엔드에 업데이트를 지속적으로 배포할 수 있습니다 Amplify 호스팅을 사용하면 프런트엔드 코드와 동일한 커밋에서 Amplify 명령줄 인터페이스 (CLI) 로 생성된 GraphQL/REST API, 인증, 분석 및 스토리지로 서버리스 백엔드를 배포할 수 있습니다.

중요

이 기능은 Amplify CLI 버전 4.0 이상에서만 작동합니다.

이 자습서에서는 Amplify를 사용한 클라이언트 측 라우팅 보호와 사용자 등록/로그인을 위한 기본 인증 흐름을 구현하는 React 앱을 생성 및 배포하려고 합니다.

1단계: 풀스택 샘플 배포

에 로그인합니다.Amplify Console선택하고시작아래에배포. 다음 화면에서 을 선택합니다.풀스택 샘플에서. 또는 백엔드를 구축하여 나만의 모험을 시작하세요처음부터 새로 생성Amplify CLI를 설치합니다.

선택을 선택합니다.인증 시작앱 배포. 연결을 묻는 메시지가 나타납니다. GitHub 계정. 사용자 연결 GitHub acccount를 사용하면 Amplify가 계정에 저장소의 포크를 만들고AWS백엔드 서비스를 제공하고 프런트엔드를 구축 및 배포합니다. 백엔드 리소스를 배포하려면AWS, 당신은서비스 역할 생성.

2단계: 풀스택 앱 탐색

앱 빌드는 백엔드 다음에 프런트엔드 배포를 시작합니다. 브랜치 이름을 클릭하여 실행 중인 빌드를 확인합니다. 빌드가 완료되면 다른 기기에서 앱의 스크린샷을 볼 수 있습니다.

빌드가 끝나면 하나의 프런트엔드 환경 (기본 브랜치는'https://main.appid.amplifyapp.com') 및 DevX라는 백엔드 환경 하나를 선택합니다. 앱에 사용자를 추가하려면 배포된 프런트엔드를 통해 사용자를 등록하거나인증Amazon Cognito UserPool 풀로 연결되는 탭입니다. 사용자를 생성한 후 앱에 로그인을 시도해 봅니다.

3단계: GraphQL 백엔드 추가

  1. NoSQL 데이터베이스가 있는 GraphQL API 백엔드를 앱에 추가해 보겠습니다. 시작하려면 계정에서 분기된 저장소를 복제합니다.

    git clone git@github.com:<username>/create-react-app-auth-amplify.git cd create-react-app-auth-amplify
  2. 에서백엔드 환경탭, 선택백엔드 편집. 사전 요구 사항으로 지침에 따라 Amplify CLI를 설치 및 구성하십시오. Amplify 명령줄 툴체인을 사용하면 방금 만든 백엔드를 편집하여 GraphQL/REST API, 분석 및 스토리지와 같은 더 많은 기능을 추가할 수 있습니다. Amplify CLI가 구성되면Amplify pull명령을 사용하여 로컬 시스템에서 이 백엔드에 연결합니다.

    amplify pull --appId XXXXXXXX --envName devw
  3. 기본 할일 예제를 사용하여 GraphQL API를 추가합니다. 다음을 사용하여 백엔드 모델링에 대해 자세히 알아보기GraphQL 변환.

    amplify add api ? Please select from one of the below mentioned services GraphQL ? Provide API name: todo ? Choose the default authorization type for the API API key ? Enter a description for the API key: ? After how many days from now the API key should expire (1-365): 7 ? Do you want to configure advanced settings for the GraphQL API No, I am done. ? Do you have an annotated GraphQL schema? No ? Do you want a guided schema creation? (Y/n) Y ? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description) ? Do you want to edit the schema now? No ... GraphQL schema compiled successfully.
  4. 이러한 변경 사항을 클라우드에 배포하려면 다음 명령을 실행합니다.

    amplify push Current Environment: devw | Category | Resource name | Operation | Provider plugin | | -------- | --------------- | --------- | ----------------- | | Api | todo | Create | awscloudformation | | Auth | cognitocf0c6096 | No Change | awscloudformation | ? Are you sure you want to continue? (Y/n) Y .. ✔ Generated GraphQL operations successfully and saved at src/graphql ✔ All resources are updated in the cloud GraphQL endpoint: https://gumwpbojgraj5b547y5d3shurq.appsync-api.us-west-2.amazonaws.com/graphql GraphQL API KEY: da2-vlthvw5qcffxzl2hibgowv3rdq
  5. 추가된 API 범주를 보려면 Amplify 콘솔을 방문하십시오. API 범주를 선택하면 다음 항목으로 이동할 수 있습니다. AppSync 콘솔 (CRUD 작업을 수행하는 쿼리 또는 변경 쓰기) 또는 DynamoDB 콘솔 (Todo 테이블을 보기 위해)

  6. 사용GraphQL 클라이언트 Amplify할 일을 나열하고 업데이트하는 프런트엔드 코드를 작성합니다. 프런트엔드에 업데이트를 배포하려면 코드를 커밋하면 Amplify 콘솔에서 새 빌드가 트리거됩니다.

다음 단계: 기능 브랜치 배포 설정

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