기존 코드로 시작하기

이 연습에서는 최신 웹 앱을 연속적으로 빌드, 배포 및 호스팅하는 방법을 학습합니다. 최신 웹 앱에는 단일 페이지 애플리케이션 (SPA) 프레임워크 (예: React, Angular 또는 Vue) 와 정적 사이트 생성기 (SSG) (예: Hugo, Jekyll 또는 Gatsby) 가 포함됩니다. Amplify 호스팅은 서버 측 렌더링 (SSR) 을 사용하고 Next.js 를 사용하여 생성되는 웹 앱도 지원합니다.

시작하려면 Amplify 콘솔에 로그인하세요. AWS Amplify홈 페이지 상단에서 시작하기 페이지 상단에서 시작하기

그런 다음 배송에서 시작하기를 선택합니다.

모든 앱 페이지에서 시작하는 경우 새 앱을 선택한 다음 오른쪽 상단에서 웹 앱 호스팅을 선택합니다.

1단계: 리포지토리 Connect

사용자 GitHub, Bitbucket 또는AWS CodeCommit 리포지토리를 Connect. GitLab Git 리포지토리를 연결하지 않고 빌드 아티팩트를 수동으로 업로드할 수도 있습니다. 자세한 내용은 수동 배포를 참조하세요.

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

GitHub 리포지토리의 경우 Amplify는 이제 GitHub 앱 기능을 사용하여 Amplify 액세스를 승인합니다. Amplify GitHub 앱을 사용하면 권한이 더욱 세밀하게 조정되므로 지정한 리포지토리에만 Amplify에 액세스 권한을 부여할 수 있습니다. GitHub 앱 설치 및 인증에 대한 자세한 내용은 섹션을 참조하세요 GitHub리포지토리에 대한 Amplify 액세스 설정.

리포지토리 서비스 공급자를 연결한 후 리포지토리를 선택한 다음 빌드하고 배포할 해당 브랜치를 선택합니다.

2a단계: 프런트 엔드의 빌드 설정 확인

선택한 브랜치에 대해 Amplify는 리포지토리를 검사하여 실행할 빌드 명령 시퀀스를 자동으로 감지합니다.

중요: 빌드 명령과 빌드 출력 디렉터리(즉, artifacts > baseDirectory)가 정확한지 확인하십시오. 이 정보를 수정해야 하는 경우 편집을 선택하여 YML 편집기를 엽니다. 빌드 설정을 서버에 저장하거나 YML을 다운로드하여 리포지토리의 루트에 추가할 수 있습니다 (단일 저장소의 경우 앱의 루트 디렉터리에 YML을 저장하세요).

자세한 내용은 빌드 사양 YAML 구문을 참조하세요.

2b단계: 백엔드의 빌드 설정 확인

Amplify CLI v1.0+에서 프로비저닝한 리포지토리를 연결한 경우 (amplify -v를 실행하여 CLI 버전을 찾음) Amplify Hosting은 프런트엔드 빌드를 통해 단일 워크플로우로 백엔드 리소스 (Amplify CLI에서 프로비저닝한 모든 리소스) 를 배포하거나 자동으로 업데이트합니다. 브랜치에 대해 기존 백엔드 환경을 가리키거나 완전히 새 환경을 생성하도록 선택할 수 있습니다. step-by-step 튜토리얼은 풀스택 배포 시작하기를 참조하세요.

빌드 중에 Amplify CLI를 사용하여 백엔드 기능을 배포하려면AWS Identity and Access Management (IAM) 서비스 역할을 만들거나 재사용하십시오. IAM 역할은 Amplify에 계정의 리소스에 대한 작업을 부여하는 안전한 방법입니다. 자세한 지침은 서비스 역할 추가 섹션을 참조하세요.

참고: Amplify CLI는 IAM 서비스 역할을 활성화하지 않으면 실행되지 않습니다.

2c단계: 환경 변수 추가 (선택 사항)

거의 모든 애플리케이션은 실행 시간에 구성 정보를 가져와야 합니다. 이러한 구성은 데이터베이스 연결 세부 정보, API 키 또는 다른 파라미터가 될 수 있습니다. 환경 변수는 빌드 시 이러한 구성을 노출할 수 있는 수단을 제공합니다.

3단계: 저장 및 배포

모든 설정이 올바른지 확인하기 위해 모든 설정을 검토하십시오. 웹 앱을AWS 글로벌 CDN (콘텐츠 전송 네트워크) 에 배포하려면 [Save and Deploy] 를 선택합니다. 프런트 엔드 빌드는 일반적으로 1~2분 정도 소요되지만 앱 크기에 따라 달라질 수 있습니다.

브랜치 섹션에서 진행률 표시기를 선택하여 빌드 로그 화면에 액세스합니다. 빌드에는 다음의 스테이지가 있습니다.

1. 프로비저닝 - 4개의 vCPU, 7GB 메모리가 있는 호스트에서 도커 이미지를 사용하여 빌드 환경을 설정합니다. 각 빌드는 자체 호스트 인스턴스를 가져와 모든 리소스가 안전하게 격리되도록 합니다. 기본 이미지가 요구 사항을 지원하는지 확인하기 위해 도커 파일의 콘텐츠가 표시됩니다.

2. 빌드 - 빌드 단계는 설정(컨테이너로 리포지토리 복제), 백엔드 배포(백엔드 리소스를 배포하는 Amplify CLI 실행) 및 프런트엔드 빌드(프런트엔드 아티팩트 작성)의 세 개의 스테이지로 구성됩니다.

3. 배포 - 빌드가 완료되면 모든 아티팩트가 Amplify Hosting에서 관리하는 호스팅 환경에 배포됩니다. 모든 배포는 원자적 배포이므로 전체 배포가 완료된 후에만 웹 앱이 업데이트되도록 하여 유지 관리 기간을 없앱니다.

   

다음 단계

• 앱에 사용자 지정 도메인 추가

• 여러 환경 관리

• 병합 전 풀 리퀘스트 미리 보기