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

# Amplify Hosting에 Next.js 앱 배포
<a name="getting-started-next"></a>

이 자습서에서는 Git 리포지토리에서 Next.js 애플리케이션을 빌드하고 배포하는 방법을 안내합니다.

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

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

**애플리케이션 만들기**  
*Next.js 설명서*의 [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app) 명령을 사용하여 이 자습서에 사용할 기본 Next.js 애플리케이션을 생성합니다.

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

## 1단계: Git 리포지토리 연결
<a name="step-1-connect-repository"></a>

이 단계에서는 Git 리포지토리의 Next.js 애플리케이션을 Amplify Hosting에 연결합니다.

**Git 리포지토리의 앱을 연결하려면**

1. [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다.

1. 현재 리전에서 처음 앱을 배포하는 경우 기본적으로 **AWS Amplify** 서비스 페이지에서 시작합니다.

   페이지 상단에서 **앱 배포**를 선택합니다.

1. **Amplify로 빌드 시작** 페이지에서 Git 리포지토리 공급자를 선택하고 **다음**을 선택합니다.

   GitHub 리포지토리의 경우, Amplify는 GitHub 앱 기능을 사용하여 Amplify에 액세스 권한을 부여합니다. GitHub 앱 설치 및 인증에 대한 자세한 내용은 [GitHub 리포지토리에 대한 Amplify 액세스 설정](setting-up-GitHub-access.md) 섹션을 참조하세요.
**참고**  
Bitbucket, GitLab 또는를 사용하여 Amplify 콘솔에 권한을 부여하면 AWS CodeCommit Amplify는 리포지토리 공급자로부터 액세스 토큰을 가져오지만 *토큰은 서버에 저장되지 않습니다*. AWS Amplify는 특정 리포지토리에만 설치된 배포 키를 사용하여 리포지토리에 액세스합니다.

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

   1. 연결할 리포지토리의 이름을 선택합니다.

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

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

## 2단계: 빌드 설정 확인
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

Amplify는 배포 중인 브랜치에 대해 실행할 빌드 명령 시퀀스를 자동으로 감지합니다. 이 단계에서는 빌드 설정을 검토하고 확인합니다.

**앱의 빌드 설정을 확인하려면**

1. **앱 설정** 페이지에서 **빌드 설정** 섹션을 찾습니다.

   **프론트엔드 빌드 명령** 및 **빌드 출력 디렉터리**가 올바른지 확인합니다. 이 Next.js 예제 앱의 경우 **빌드 출력 디렉터리**가 `.next`로 설정되어 있습니다.

1. 서비스 역할을 추가하는 절차는 새 역할을 생성할지 아니면 기존 역할을 사용할지에 따라 달라집니다.
   + 새 역할을 생성하려면

     1. **새 서비스 역할 생성 및 사용**을 선택합니다.
   + 기존 역할을 사용하려면

     1. **기존 역할 사용**을 선택합니다.

     1. 서비스 역할 목록에서 사용할 역할을 선택합니다.

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

## 3단계: 애플리케이션 배포
<a name="step-3-save-and-deploy"></a>

이 단계에서는 AWS 글로벌 콘텐츠 전송 네트워크(CDN)에 앱을 배포합니다.

**앱을 저장 및 배포하려면**

1. **검토** 페이지에서 리포지토리 세부 정보와 앱 설정이 올바른지 확인합니다.

1. **저장 및 배포**를 선택합니다. 프론트엔드 빌드는 일반적으로 1\$12 분이 소요되지만 앱 크기에 따라 다를 수 있습니다.

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) 페이지를 참조하세요.

## 4단계: (선택 사항) 리소스 정리
<a name="step-4-clean-up"></a>

자습서용으로 생성한 앱이 더 이상 필요 없는 경우에는 삭제할 수 있습니다. 이렇게 하면 사용하지 않는 리소스에 요금이 청구되지 않습니다.

**앱을 삭제하려면**

1. 탐색 창의 **앱 설정** 메뉴에서 **일반 설정**을 선택합니다.

1. **일반 설정** 페이지에서 **앱 삭제**를 선택합니다.

1. 확인 창에서 **delete**를 입력합니다. 그런 다음 **앱 삭제**를 선택합니다.

## 앱에 기능 추가
<a name="next-steps"></a>

Amplify에 앱을 배포했으므로 호스팅된 애플리케이션에서 사용할 수 있는 다음 기능 중 일부를 살펴볼 수 있습니다.

**환경 변수**  
애플리케이션은 런타임에 구성 정보가 필요한 경우가 많습니다. 이러한 구성은 데이터베이스 연결 세부 정보, API 키 또는 파라미터가 될 수 있습니다. 환경 변수는 빌드 시 이러한 구성을 노출하는 수단을 제공합니다. 자세한 내용은 [환경 변수](environment-variables.md)를 참조하세요.

**사용자 지정 도메인**  
이 자습서에서는 Amplify가 `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`과 같은 URL을 사용하여 기본 `amplifyapp.com` 도메인에서 앱을 호스팅합니다. 앱을 사용자 지정 도메인에 연결하면 사용자는 앱이 `https://www.example.com`과 같은 사용자 지정 URL에서 호스팅되는 것을 볼 수 있습니다. 자세한 내용은 [사용자 지정 도메인 설정](custom-domains.md)을 참조하세요.

**pull 요청 미리 보기**  
pull 요청 웹 미리 보기는 팀이 코드를 프로덕션 또는 통합 브랜치에 병합하기 전에 pull 요청(PR)의 변경 사항을 미리 볼 수 있는 방법을 제공합니다. 자세한 내용은 [pull 요청의 웹 미리 보기](pr-previews.md) 섹션을 참조하세요.

**여러 환경 관리**  
Amplify가 기능 브랜치 및 GitFlow 워크플로와 함께 작동하여 여러 배포를 지원하는 방법을 알아보려면 [기능 브랜치 배포 및 팀 워크플로](multi-environments.md)를 참조하세요.