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 SSR에 대한 Amplify 지원 섹션을 참조하세요.

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

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

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

프레임워크 어댑터 빌드

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

빌드 후 스크립트 구성

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

Amplify에 SSR 앱 배포

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

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

Amplify Hosting에 SSR 앱을 배포하려면

에 AWS Management Console 로그인하고 Amplify 콘솔을 엽니다.
모든 앱 페이지에서 새 앱을 선택한 다음, 웹 앱 호스팅을 선택합니다.
사용자 GitHub, Bitbucket 또는 AWS CodeCommit 리포지토리 공급자를 선택한 다음 계속을 선택합니다. GitLab
리포지토리 브랜치 추가 페이지에서 다음을 수행합니다.
1. 최근 업데이트된 리포지토리 목록에서 연결할 리포지토리 이름을 선택합니다.
2. 브랜치 목록에서 연결할 리포지토리 브랜치의 이름을 선택합니다.
3. 다음을 선택합니다.
빌드 설정 페이지에서 Amplify는 Next.js SSR 앱을 자동으로 감지합니다. 다른 프레임워크용 어댑터를 사용하는 SSR 앱을 배포하는 경우 Amazon Logs를 명시적으로 활성화해야 합니다. CloudWatch 서버 측 렌더링(SSR) 배포 섹션에서 SSR 앱 로그 활성화를 선택합니다.
Amplify가 AWS 계정으로 로그를 전달하는 IAM 서비스 역할이 앱에 필요합니다. Amplify Hosting에서 자동으로 서비스 역할이 생성되도록 허용하거나 직접 생성한 역할을 지정할 수 있습니다.
- Amplify가 자동으로 역할을 생성하여 앱에 연결할 수 있도록 하려면
  1. IAM 역할 섹션에서 새 서비스 역할 생성 및 사용을 선택합니다.
- 이전에 생성한 서비스 역할을 연결하려면
  1. IAM 역할 섹션에서 기존 서비스 역할 사용을 선택합니다.
  2. 목록에서 사용할 역할을 선택합니다.
다음을 선택합니다.
검토 페이지에서 저장 및 배포를 선택합니다.

프레임워크 어댑터 사용

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 앱 배포 단원을 참조하십시오.

javascript가 브라우저에서 비활성화되거나 사용이 불가합니다.

AWS 설명서를 사용하려면 Javascript가 활성화되어야 합니다. 지침을 보려면 브라우저의 도움말 페이지를 참조하십시오.

문서 규칙

서버 측 렌더링 소개

배포 사양 사용