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

# Gen 1 앱의 백엔드 생성
<a name="build-backend-Gen1"></a>

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

## 사전 조건
<a name="fullstack-sample-prerequisites"></a>

이 자습서를 시작하기 전에 다음 사전 조건을 완료합니다.

**에 가입 AWS 계정**  
아직 AWS 고객이 아닌 경우 온라인 지침에 따라 [를 생성 AWS 계정](https://portal.aws.amazon.com/billing/signup#/start/email)해야 합니다. 가입하면 Amplify 및 애플리케이션에 사용할 수 있는 기타 AWS 서비스에 액세스할 수 있습니다.

**Git 리포지토리 생성**  
Amplify는 GitHub, Bitbucket, GitLab 및를 지원합니다 AWS CodeCommit. 애플리케이션을 Git 리포지토리로 푸시합니다.

**Amplify 명령줄 인터페이스(CLI) 설치**  
자세한 지침은 *Amplify Framework 설명서*의 [Amplify CLI 설치](https://docs.amplify.aws/gen1/react/start/project-setup/prerequisites/#install-the-amplify-cli)를 참조하세요.

## 1단계: 프론트엔드 배포
<a name="step-1-deploy-frontend"></a>

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

이 예제에 사용할 새 프론트엔드 앱을 생성해야 하는 경우 *React 앱 생성 설명서*의 [React 앱 생성](https://create-react-app.dev/docs/getting-started) 지침을 따를 수 있습니다.

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

1. 에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다.

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

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

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

   GitHub 앱 설치 및 인증에 대한 자세한 내용은 [GitHub 리포지토리에 대한 Amplify 액세스 설정](setting-up-GitHub-access.md)을 참조하십시오.

1. **리포지토리 브랜치 추가** 페이지에서 다음을 수행하세요.

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

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

   1. **다음**을 선택합니다.

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

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

**참고**  
Amplify 애플리케이션의 보안을 강화하기 위해 *amplifyapp.com* 도메인은 [공개 접미사 목록(PSL)](https://publicsuffix.org/)에 등록되어 있습니다. 보안 강화를 위해 Amplify 애플리케이션의 기본 도메인 이름에 민감한 쿠키를 설정해야 하는 경우, `__Host-` 접두사가 있는 쿠키를 사용하는 것이 좋습니다. 이렇게 쿠키를 설정하면 교차 사이트 요청 위조 시도(CSRF)로부터 도메인을 보호하는 데 도움이 됩니다. 자세한 내용은 Mozilla 개발자 네트워크의 [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) 페이지를 참조하세요.

## 2단계: 백엔드 생성
<a name="step-2-create-backend"></a>

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

**백엔드를 생성하려면**

1. 에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다.

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

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

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

Amplify Studio는 백엔드를 생성 및 관리하고 프론트엔드 UI 개발을 가속화하는 시각적 인터페이스입니다. Amplify Studio에 대한 자세한 내용은 [Amplify Studio 설명서](https://docs.amplify.aws/gen1/react/tools/console/)를 참조하세요.

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

**데이터 모델 생성**

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

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

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

1. **필드 추가**를 선택합니다.

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

   다음 스크린샷은 디자이너에서 데이터 모델이 어떻게 보일지 보여주는 예입니다.  
![\[데이터 모델 생성을 위한 Amplify Studio UI입니다.\]](http://docs.aws.amazon.com/ko_kr/amplify/latest/userguide/images/amplify-deploy-backend-1.png)

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

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

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

## 3단계: 백엔드를 프런트엔드에 연결
<a name="step-3-connect-backend-to-frontend"></a>

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

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

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

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

   ```
   amplify pull --appId abcd1234 --envName staging
   ```

1. 터미널 창의 지침에 따라 프로젝트 설정을 완료하세요.

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

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

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

1. **기본** 브랜치를 찾아 **편집**을 선택합니다.  
![\[Amplify 콘솔에서 브랜치에 대한 편집 링크의 위치입니다.\]](http://docs.aws.amazon.com/ko_kr/amplify/latest/userguide/images/amplify_edit_backend_alternate.png)

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

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

1. 다음으로 앱 백엔드를 변경하는 데 필요한 권한을 Amplify에 제공하도록 서비스 역할을 설정해야 합니다. 새로운 서비스 역할을 만들거나 기존 역할을 사용할 수 있습니다. 지침은 [백엔드 리소스를 배포할 권한을 가진 서비스 역할 추가](amplify-service-role.md) 섹션을 참조하세요.

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

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

   다음 중 하나를 수행하세요.
   + git 리포지토리에서 일부 코드를 푸시하여 Amplify 콘솔에서 빌드를 시작합니다.
   + Amplify 콘솔에서 앱의 빌드 세부 정보 페이지로 이동한 다음 **이 버전 재배포**를 선택합니다.

## 다음 단계
<a name="next-steps-set-up-feature-branch-deployments"></a>

### 기능 브랜치 배포 설정
<a name="set-up-feature-branch-deployments"></a>

권장 워크플로에 따라 [여러 백엔드 환경에서 기능 브랜치 배포를 설정하세요.](https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#team-workflows-with-amplify-cli-backend-environments)

### Amplify Studio에서 프론트엔드 UI 만들기
<a name="create-studio-ui-components"></a>

Studio를 사용하여 바로 사용할 수 있는 UI 구성 요소 세트로 프런트엔드 UI를 구축하고 앱 백엔드에 연결할 수 있습니다. 자세한 내용 및 자습서는 *Amplify Framework 설명서*에서 [Amplify Studio](https://docs.amplify.aws/gen1/react/tools/console/) 사용 설명서를 참조하세요.