AWS 시작하기

React 애플리케이션 구축

AWS Amplify를 사용하여 간단한 웹 애플리케이션 생성

모듈 2: 로컬 Amplify 앱 초기화

이 모듈에서는 Amplify CLI를 설치하고 구성합니다.

소개

계정에서 새 Amplify 프로젝트를 초기화했으므로, 이제 개발을 계속 진행하고 새 기능을 추가할 수 있도록 로컬 환경으로 가져와야 합니다.

이 모듈에서는 Amplify CLI를 설치하고 CLI를 사용하여 Amplify 프로젝트를 초기화합니다.

배우게 될 내용

  • Amplify CLI 설치 및 구성
  • Amplify 앱 초기화

주요 개념

Amplify CLI – Amplify CLI를 사용하면 터미널에서 직접 AWS 서비스를 생성, 관리, 제거할 수 있습니다.

 완료 시간

5분

 사용되는 서비스

구현

  • Amplify CLI 설치

    Amplify CLI(명령줄 인터페이스)는 간단한 안내형 워크플로에 따라 앱을 위한 AWS 클라우드 서비스를 생성하는 통합 도구 체인입니다. 명령 프롬프트(Windows) 또는 터미널(macOS)을 사용하여 Amplify CLI를 설치해보겠습니다. 참고: 이 명령은 명령 프롬프트/터미널의 모든 디렉터리에서 “-g”로 실행하여 시스템에 전역으로 바이너리를 설치하도록 지시할 수 있습니다.

    npm install -g @aws-amplify/cli
  • Amplify CLI 구성

    Amazon Identity and Access Management(IAM)를 사용하면 AWS에서 사용자와 사용자 권한을 관리할 수 있습니다. 이 CLI는 IAM을 사용하여 프로그래밍 방식으로 자동으로 서비스를 생성하고 관리합니다.

    CLI를 구성하려면 구성 명령을 실행합니다. CLI 구성 프로세스의 비디오 시연을 보려면 여기를 클릭하십시오.

    amplify configure
  • Amplify 앱 초기화

    다음으로, 앱을 로컬로 초기화합니다. Amplify 프로젝트를 이미 생성한 상태이므로 생성된 앱 구성을 사용할 수 있습니다.

    a. Amplify 콘솔에서 [백엔드 환경(Backend environments)]을 클릭합니다.

    Front End BackEnd Environments Module 2

    b. [백엔드 환경(Backend environment)] 탭에서 amplify init 명령을 키보드에 복사합니다.

    Front End BackEnd Environments2 Module 2

    c. 아래 명령을 사용하여 Amplify 프로젝트를 로컬로 초기화합니다.

    참고: 이미 배포한 Amplify 프로젝트와 동일한 리전을 사용하여 구성된 프로필을 선택해야 합니다.

    amplify init --appId your-app-id
    
    ? Enter a name for the project: amplifyapp
    ? Enter a name for the environment: dev
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that youre building: javascript
    ? What javascript framework are you using: react
    ? Source Directory Path: src
    ? Distribution Directory Path: build
    ? Build Command:  npm run-script build
    ? Start Command: npm run-script start
    ? Do you want to use an AWS profile? Y
    ? Please choose the profile you want to use: your-aws-profile
    

결론

Amplify 프로젝트를 초기화했고, 이제 기능을 추가할 준비가 되었습니다. 다음 모듈에서는 코드 단 몇 줄로 전체 사용자 인증 흐름을 추가해보겠습니다.

이제 언제든지 다음 명령을 실행하여 대시보드에서 Amplify 프로젝트를 볼 수 있습니다.

amplify console

이 모듈이 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
닫기
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.
닫기

인증 추가