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

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

Amplify 호스팅에 Next.js 앱 배포하기

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

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

등록하여 AWS 계정

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

애플리케이션 생성

Next.js 설명서의 create-next-app지침에 따라 이 자습서에 사용할 기본 Next.js 애플리케이션을 만드십시오.

Git 리포지토리 만들기

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

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

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

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

  1. Amplify 콘솔을 엽니다.

  2. 현재 지역에 첫 번째 앱을 배포하는 경우 기본적으로 AWS Amplify서비스 페이지에서 시작하게 됩니다.

    페이지 상단에서 새 앱 만들기를 선택합니다.

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

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

    참고

    GitLabBitbucket을 사용하여 Amplify 콘솔을 승인하면 Amplify는 리포지토리 공급자로부터 액세스 토큰을 가져오지만 토큰을 서버에 저장하지는 않습니다. AWS CodeCommit 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는 다음과 URL 같은 기능을 사용하여 기본 amplifyapp.com 도메인에서 앱을 호스팅합니다. https://branch-name.d1m7bkiki6tdw1.amplifyapp.com 앱을 사용자 지정 도메인에 연결하면 사용자는 앱이 사용자 지정 (예:) 에서 호스팅되는 것을 볼 수 있습니다. URL https://www.example.com 자세한 내용은 맞춤 도메인 설정을 참조하십시오.

pull 요청 미리 보기

웹 풀 리퀘스트 미리보기를 통해 팀은 코드를 프로덕션 또는 통합 브랜치에 병합하기 전에 pull request (PRs) 의 변경 사항을 미리 볼 수 있습니다. 자세한 내용은 풀 리퀘스트의 웹 미리보기를 참조하십시오.

여러 환경 관리

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