git clone 받아 frontend 프로젝트 localhost에서 실행 해 보기

Github Repository Clone

$ git clone https://github.com/awskrug/kendra-button.git

frontend 프로젝트 폴더로 이동

$ cd kendra-button/frontend/kendra-button-front

Amplify 프로젝트 리소스 받아오기

$ amplify pull

For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes

? Please choose the profile you want to use 현재 AWS Profile 상태 확인해서 양자택일하기 참조

? Which app are you working on? [kendra-button 프로젝트 목록에서 선택]

Backend environment 'dev' found. Initializing...

? Choose your default editor: Visual Studio Code

? Choose the type of app that you're building javascript

Please tell us about your project

? What javascript framework are you using react

? Source Directory Path: src

? Distribution Directory Path: src/out

? Build Command: npm run-script build <- yarn bulid도 됨

? Start Command: npm run-script start <- yarn start도 됨

? Do you plan on modifying this backend? Yes

Successfully pulled backend environment dev from the cloud.

Run 'amplify pull' to sync upstream changes.

현재 AWS Profile 상태 확인해서 양자택일하기

• 팀이 만든 amplify project의 리소스에 접근하고 싶다면
  1. 팀 리더로부터 IAM User account 정보(aws_access_key_id, aws_secret_access_key)를 받아 로컬에 configure 한다
  2. $ amplify pull
• 나의 AWS account에 개별적으로 리소스를 만들어서 테스트 해 보고 싶다면
  • $ amplify init
    1. 이 옵션은 Manual로 입력하자 -> Distribution Directory Path: src/out

패키지(node_modules) 설치

$ yarn (or npm install)

frontend debugging

$ yarn start (or npm start)

* Amplify 프로젝트 재설정법

• 위의 amplify 설정 확인은 frontend/kendra-button-front/amplify/.config/project-config.json에서 확인 가능
• 설정 변경은 amplify configure project CLI로 가능