기존 코드로 시작하기

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

시작하려면 Amplify 콘솔에 로그인합니다. AWS Amplify 홈페이지에서 시작하는 경우, 페이지 상단의 시작하기를 선택합니다.

전달에서 시작하기를 선택합니다.

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

1단계: 리포지토리 연결

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

Bitbucket, GitLab, 또는 AWS 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+(CLI 버전을 찾기 위해 amplify -v 실행)에서 프로비저닝한 리포지토리를 연결한 경우, Amplify 호스팅은 프런트엔드 빌드로 단일 워크플로우에서 백엔드 리소스(Amplify CLI에서 프로비저닝한 모든 리소스)를 자동으로 업데이트합니다. 브랜치에 대해 기존 백엔드 환경을 가리키거나 완전히 새 환경을 생성하도록 선택할 수 있습니다. 단계별 튜토리얼은 풀 스택 배포 시작하기 섹션을 참조하세요.

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

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

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

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

3단계: 저장 및 배포

모든 설정이 올바른지 확인하기 위해 모든 설정을 검토합니다. 저장 및 배포를 선택하여 웹 앱을 AWS 글로벌 콘텐츠 배포 네트워크(CDN)에 배포합니다. 프런트엔드 빌드는 일반적으로 1~2 분이 소요되지만 앱 크기에 따라 다를 수 있습니다.

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

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

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

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

   

참고

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

다음 단계

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

• 여러 환경 관리

• 병합 전 풀 요청 미리 보기