기존 코드 시작하기 - AWS Amplify호스팅

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

기존 코드 시작하기

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

시작하려면Amplify Console. 에서 시작하는 경우AWS Amplify홈페이지, 선택시작페이지 상단에서 열로 표시할 열을 선택합니다.


         Screenshot of the AWS Amplify홈페이지.

그런 다음 선택시작하기아래에전달.


         아래쪽에 있는 Deliver 섹션의 스크린샷AWS Amplify홈페이지.

에서 시작하는 경우모든 앱페이지, 선택새 앱그런 다음웹 앱을 선택하여 열로 표시할 열을 선택합니다.


         Amplify 콘솔에 있는 모든 앱 페이지의 스크린샷입니다.

1단계: 리포지토리 Connect

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


            Amplify 콘솔에서 Amplify 호스팅 시작하기 페이지의 스크린샷입니다.

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

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

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

2a 단계: 프런트 엔드에 대한 빌드 설정 확인

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

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

자세한 내용은 YML 구조를 참조하십시오.

2b 단계: 백엔드에 대한 빌드 설정 확인

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

빌드 중에 Amplify CLI를 사용하여 백엔드 기능을 배포하려면AWS Identity and Access Management(IAM) 서비스 역할. Amplify 계정의 리소스에 작용할 권한을 부여하는 안전한 방법입니다.

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

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

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

3단계: 저장 및 배포

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

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

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

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

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

  4. 확인 - 앱이 올바르게 작동하는지 확인하기 위해 Amplify는 Headless Chrome을 사용하여 여러 디바이스 해상도로 index.html의 스크린샷을 렌더링합니다.

다음 단계