SSR 프레임워크를 위한 Amplify 지원

Amplify 호스팅은 Amplify에서 예상하는 빌드 출력을 준수하는 배포 번들이 포함된 모든 JavaScript 기반 SSR 프레임워크를 지원합니다. Amplify Hosting에서는 애플리케이션의 모든 SSR 프레임워크를 위한 빌드 출력의 파일 및 디렉터리 구조를 표준화하는 배포 사양이 제공됩니다.

프레임워크 작성자는 파일 시스템 기반 배포 사양을 참조하여 특정 프레임워크용으로 사용자 지정한 오픈 소스 빌드 어댑터를 개발할 수 있습니다. 이러한 어댑터에서는 앱의 빌드 출력이 Amplify Hosting의 예상 디렉터리 구조에 부합하는 배포 번들로 변환됩니다. 이 배포 번들에는 라우팅 규칙과 같은 런타임 구성을 비롯해 앱을 호스팅하는 데 필요한 모든 파일과 자산이 포함됩니다.

프레임워크 또는 프레임워크 어댑터를 사용하지 않는다면 자체 솔루션을 개발하여 Amplify Hosting의 예상 디렉터리 구조에 부합하는 배포 번들을 생성하면 됩니다.

Amplify Hosting은 정적 자산, 컴퓨팅, 이미지 최적화, 라우팅 규칙과 같은 기본 유형을 지원합니다. 이러한 기본 유형을 활용하여 더 풍부한 기능을 갖춘 애플리케이션을 배포할 수 있습니다. 각 프리미티브 유형에 대한 자세한 내용은 을 참조하십시오. Amplify SSR 프리미티브 유형 지원

다음 시나리오 중에서 선택하여 Amplify에 SSR 앱 배포를 시작하세요.

Next.js 앱 배포

Amplify에서는 어댑터나 콘솔의 수동 구성 없이 Next.js를 사용하여 만든 애플리케이션이 지원됩니다. 자세한 정보는 Next.js 지원을 Amplify을 참조하세요.

프레임워크 어댑터가 사용된 앱 배포

SSR 앱을 Amplify Hosting에 배포할 때 사용 가능한 모든 오픈 소스 프레임워크 어댑터를 참조할 수 있습니다. 자세한 정보는 프레임워크 어댑터 사용을 참조하세요.

Nuxt 프레임워크에 어댑터를 사용할 수 있습니다. 이 어댑터 사용에 대한 자세한 내용은 Nuxt 설명서를 참조하세요.

프레임워크 어댑터 빌드

프레임워크 제공 기능을 통합하려는 프레임워크 작성자는 Amplify Hosting 배포 사양을 참조하여 Amplify의 예상 구조에 부합하도록 빌드 출력을 구성할 수 있습니다. 자세한 정보는 배포 매니페스트를 사용하여 Express 서버 배포을 참조하세요.

빌드 후 스크립트 구성

Amplify Hosting 배포 사양을 참조하여 특정 시나리오에 필요한 대로 빌드 출력을 조작할 수 있습니다. 자세한 정보는 Amplify Hosting 배포 사양을 참조하여 빌드 출력 구성을 참조하세요. 예시는 배포 매니페스트를 사용하여 Express 서버 배포단원을 참조하세요.

Amplify에 SSR 앱 배포

이 주제의 지침을 참조하여 Amplify의 예상 빌드 출력에 부합하는 배포 번들과 모든 프레임워크로 만든 앱을 배포할 수 있습니다. Next.js 애플리케이션을 배포하는 경우 어댑터가 필요하지 않습니다.

프레임워크 어댑터가 사용되는 SSR 앱을 배포한다면 먼저 어댑터를 설치하고 구성해야 합니다. 지침은 프레임워크 어댑터 사용 섹션을 참조하세요.

Amplify Hosting에 SSR 앱을 배포하려면

1. 에 AWS Management Console 로그인하고 Amplify 콘솔을 엽니다.

2. 모든 앱 페이지에서 새 앱 생성을 선택합니다.

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

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

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

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

   3. 다음을 선택합니다.

5. 앱 설정 페이지에서 Amplify는 Next.js SSR 앱을 자동으로 탐지합니다.

   다른 프레임워크용 어댑터를 사용하는 SSR 앱을 배포하는 경우 Amazon Logs를 명시적으로 활성화해야 합니다. CloudWatch 고급 설정 섹션을 연 다음 서버 측 렌더링 (SSR) 배포 섹션에서 SSR 앱 로그 활성화를 선택합니다.

6. Amplify가 AWS 계정으로 로그를 전달하는 IAM 서비스 역할이 앱에 필요합니다.

   서비스 역할을 추가하는 절차는 새 역할을 만들지 기존 역할을 사용할지에 따라 달라집니다.

   • 새 역할을 만들려면:

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

   • 기존 역할을 사용하려면:

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

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

7. 다음을 선택합니다.

8. 검토 페이지에서 저장 및 배포를 선택합니다.

프레임워크 어댑터 사용

Amplify Hosting과 통합용으로 생성된 모든 SSR 프레임워크 빌드 어댑터를 설치하고 사용할 수 있습니다. 어댑터가 제공되는 각 프레임워크에 따라 어댑터가 구성되고 빌드 프로세스에 연결되는 방식이 결정됩니다. 일반적으로 npm 개발 종속 항목으로 어댑터를 설치하게 됩니다.

프레임워크로 앱을 만든 후에는 프레임워크 설명서에 따라 Amplify Hosting 어댑터를 설치하고 애플리케이션의 구성 파일에서 어댑터를 구성하는 방법을 알아보세요.

다음으로, 프로젝트의 루트 디렉터리에 amplify.yml 파일을 생성합니다. amplify.yml 파일에서 baseDirectory를 애플리케이션의 빌드 출력 디렉터리에 설정합니다. 프레임워크에서는 빌드 프로세스 중에 어댑터가 실행되어 출력이 Amplify Hosting 배포 번들로 변환됩니다.

빌드 출력 디렉터리의 이름은 무엇이든 상관없지만, .amplify-hosting 파일 이름은 중요합니다. Amplify에서는 먼저 baseDirectory로 정의된 디렉터리를 찾습니다. 디렉터리가 있으면 Amplify에서는 거기에서 빌드 출력을 찾습니다. 디렉터리가 없으면 고객이 정의하지 않았더라도 Amplify가 .amplify-hosting 내부에서 빌드 출력을 찾습니다.

다음은 앱의 빌드 설정 예시입니다. 빌드 출력이 .amplify-hosting 폴더에 있다는 것을 나타내도록 baseDirectory가 .amplify-hosting으로 설정되어 있습니다. .amplify-hosting 폴더의 콘텐츠가 Amplify Hosting 배포 사양과 일치하기만 하면 앱이 배포됩니다.

version: 1
frontend:
  preBuild:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  artifacts:
    baseDirectory: .amplify-hosting

프레임워크 어댑터가 사용되도록 앱을 구성한 후 Amplify Hosting에 배포할 수 있습니다. 자세한 지침은 Amplify에 SSR 앱 배포 단원을 참조하십시오.