Amplify Hosting에 Next.js 앱 배포 - AWS Amplify 호스팅
1단계: 리포지토리 연결2단계: 빌드 설정 확인3단계: 애플리케이션 배포4단계: (선택 사항) 리소스 정리앱에 기능 추가

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

Amplify Hosting에 Next.js 앱 배포

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

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

AWS 계정 가입

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

애플리케이션 생성

Next.js 설명서의 create-next-app 명령을 사용하여 이 자습서에 사용할 기본 Next.js 애플리케이션을 생성합니다.

Git 리포지토리 생성

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

1단계: Git 리포지토리 연결

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

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

  1. Amplify 콘솔을 엽니다.

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

    페이지 상단에서 새 앱 생성을 선택합니다.

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

    GitHub 리포지토리의 경우, Amplify는 GitHub 앱 기능을 사용하여 Amplify에 액세스 권한을 부여합니다. GitHub 앱 설치 및 인증에 대한 자세한 내용은 GitHub 리포지토리에 대한 Amplify 액세스 설정을 참조하십시오.

    참고

    Bitbucket, GitLab, 또는 AWS CodeCommit으(로) Amplify 콘솔에 권한을 부여하면, Amplify는 리포지토리 공급자로부터 액세스 토큰을 가져오지만 그 토큰을 AWS 서버에 저장하지 않습니다. Amplify는 특정 리포지토리에만 설치된 배포 키를 사용하여 리포지토리에 액세스합니다.

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

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

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

    3. Next(다음)를 선택합니다.

2단계: 빌드 설정 확인

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

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

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

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

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

    • 새 역할을 생성하려면

      1. 새 서비스 역할 생성 및 사용을 선택합니다.

    • 기존 역할을 사용하려면

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

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

  3. Next(다음)를 선택합니다.

3단계: 애플리케이션 배포

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

앱을 저장 및 배포하려면

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

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

  3. 배포가 완료되면 amplifyapp.com 기본 도메인에 대한 링크를 사용하여 앱을 볼 수 있습니다.

참고

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

4단계: (선택 사항) 리소스 정리

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

앱을 삭제하려면

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

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

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

앱에 기능 추가

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

환경 변수

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

사용자 지정 도메인

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

pull 요청 미리 보기

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

여러 환경 관리

Amplify가 기능 브랜치 및 GitFlow 워크플로와 함께 작동하여 여러 배포를 지원하는 방법을 알아보려면 기능 브랜치 배포 및 팀 워크플로를 참조하세요.