Try   HackMD

Demo : Amplify Studio를 활용하여 UI 디자인부터 분석까지 - Full-stack 소셜 네트워킹 서비스(Ampligram) 개발하기

Associate Solutions Architect
Jiyeon Lee (jiyeonl@)

0. Introduction

데모 목표 :

  • 샘플 소셜 미디어 서비스(SNS)인 Ampligram을 데모를 통해 구현함으로써, Amplify Studio에서 Figma UI를 코드로 생성하고 프론트엔드를 구성하고, 백엔드를 구현하는 것까지 통합 개발을 할 수 있음을 보여줍니다.
  • 최소한의 코드 작업으로, Studio상에서의 UI 작업을 통해서 full-stack 어플리케이션의 개발 사이클을 줄이고, 빠르게 프로덕트를 고객에게 선보일 수 있게 됩니다.

데모에서 다루는 내용 :

  • Amplify Studio를 사용하여 손쉽게 Figma 컴포넌트를 이용하여 웹 페이지 UI를 구성하고, Authentication, GraphQL 기반의 Data modeling 을 구현합니다.
  • 아래의 서비스들을 Studio 상에서 손쉽게 어플리케이션과 통합함으로써 어플리케이션의 완성도를 높힙니다.
    • Amazon Cognito - Authentication
    • AWS AppSync, Amazon DynomoDB - Data modeling
    • AWS Codecommit, AWS Amplify - CI/CD
    • Amazon Pinpoint - Analytics

데모 아키텍쳐:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

데모 전체 목차 :

  1. 개발 환경 구성
  2. Amplify Studio 시작하기
  3. 인증 기능 구현하기
  4. 웹페이지 개발에 필요한 Figma UI 가져오기
  5. Data Modeling 및 UI 컴포넌트와 바인딩
  6. React App 생성 및 CI/CD 구성
  7. React App에 Amplify component 구성
  8. Amplify 호스팅
  9. Analytics 기능 추가하여 Amazon PinPoint와 연동

데모 소요 시간:

  • Chapter 1-2 : 약 10 분
  • Chapter 3-5 : 약 20 분
  • Chapter 6-8 : 약 10 분
  • Chapter 9 : 약 5 분

데모 결과물 :

소셜 네트워킹 서비스 Ampligram : https://main.doflky1g4ue1d.amplifyapp.com/

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

1. 개발 환경 구성

1. IAM User 권한 설정

Amplify 와 Codecommit에 필요한 권한을 추가하고, Codecommit credentials를 발급받습니다.

AWS 서비스에서 AWS IAM을 선택하고, 현재 사용중인 User (Admin으로 진행을 권장합니다) 를 선택합니다.

  1. “Permissions” 탭에서 “Add permissions”버튼을 클릭하여 AWS 관리형 정책 중 아래의 두 정책을 선택하여 권한을 설정합니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

    Add permission to Amplify 화면에서 아래 두 정책이 선택되었는지 확인하고 "Add Permission" 버튼을 클릭합니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  2. “Security credentials”에서 Access keys를 확인합니다. credential csv파일을 가지고 있지 않다면 두 개까지 보유 가능하니 “Create access key”버튼을 클릭하여 하나 더 만들어서 csv파일을 다운로드 합니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  3. “Security credentials”에서 HTTPS Git credentials for AWS CodeCommit을 확인합니다. “Generate credentials”를 클릭하여 credential을 발급 받습니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

2. Cloud9 환경 구성

Cloud9 환경 생성

AWS 서비스에서 Cloud9을 선택하고, Cloud9콘솔에서 “Create environment” 버튼을 클릭하여 아래의 스펙으로 환경을 생성해 줍니다.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More → 

​​​​Name - AmplifyStudioDemo

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Environment settings

  • Environment type - Create a new EC2 instance for environment (direct access)
  • Instance type - m5.large (8 GiB RAM + 2 vCPU)
  • Platform - Amazon Linux 2 (recommended)
  • Cost-saving setting - After four hours (default는 30분 이지만 원활한 데모 진행을 위해 4시간 이상으로 지정해줍니다.)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

“Create Environmnet” 버튼을 클릭하여 환경을 생성합니다.

Node.js와 npm 버전 확인

Node.js와 npm은 Cloud9에 미리 설치된 채로 환경이 구성됩니다. Amplify cli구성에 필요하므로 아래의 명령어로 버전을 확인하여 Node.js버전은 12.x이상, npm버전은 6.x이상인지 확인합니다.

$ node -v
v16.17.1
$ npx -v
8.15.0

Amplify CLI 설치

생성된 Cloud9 터미널에서 아래의 명령어로 Amplify cli환경을 구성하여줍니다.

curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

3. Codecommit repository 생성

추후 클라이언트 React app을 생성하고, Amplify Studio에서 구성한 component들을 code로 생성하여 구현한 결과물을 업로드 할 repository를 구성합니다.

AWS 서비스에서 AWS CodeCommit을 선택하고, “Create repository” 버튼을 클릭합니다.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  1. Create repository화면에서 아래와 같이 입력하고 “Create” 버튼을 클릭합니다.
    Repsitory name - amplifystudiodemo (*중요 : 꼭 이름이 같지 않아도 되지만, 시작은 소문자 알파벳으로 해야합니다. 대문자로 시작할 경우 react app creation이 되지 않습니다.)
    Description - Code repository for Amplify deployment

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  2. 생성이 완료되고, 추후에 clone할 수 있는 url을 확인 할 수 있습니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

2. Amplify Studio 시작하기

콘솔에서 새 Amplify 어플리케이션 생성

  1. AWS콘솔에서 AWS Amplify 서비스로 이동하여 “GET STARTED” 버튼을 클릭하여 이동 합니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  2. 좌측의 Amplify studio “Get started” 버튼을 클릭하여 새로운 어플리케이션의 정보를 입력합니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  3. App name - AmplifyStudioDemo 를 입력하고 “Confirm deployment”버튼을 클릭합니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  4. 아래처럼 Amplify Studio를 구성하고있다는 페이지가 나옵니다. 초기 app생성에는 2분 정도 소요됩니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

Amplify Studio 시작하기

  1. 생성이 완료되면 아래의 화면에서 “Backend environments”의 “Launch Studio” 버튼을 클릭하여 시작합니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  2. 스튜디오가 시작되면 아래와 같은 화면이 시작됩니다.

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

3. 인증 기능 구현하기

어플리케이션에 인증기증을 추가하기 위해서 “Authentication” 메뉴를 이용합니다.
Amazon Cognito의 Identity pool을 이용하여 sign-in/out 기능을 제공하고, 어플리케이션의 유저 데이터로도 사용할 수 있습니다.

Studio에서 인증 기능 추가하기

Amplify Studio 에서 제공하는 인증 기능 활성화를 통해서 인증을 구성합니다.

  1. 좌측 콘솔의 “Set up” > “Authentication” 메뉴를 클릭합니다.

  2. “Start from scratch”를 클릭하여 새로운 identity pool을 생성합니다.

  3. Username과 Password를 이용하여 로그인하는 시스템을 구성해 보도록 하겠습니다.

    • Default로 선택되어있는 E-mail login을 “Remove Email login”버튼을 클릭하여 삭제합니다.

    • “Add login mechanism” 메뉴를 확장하여 “Username”을 선택 해 줍니다.

  4. Sign-up에 대한 구성을 합니다.

    • Sign-up을 할 때 유저로부터 입력받을 값을 선택합니다. “Add attribute” 메뉴를 확장하여 Name과 Email을 선택합니다. 이 때 받은 정보는 UI에 현재 로그인한 user의 정보를 띄우고자 할 때 활용될 수 있습니다.

      *주의 : Sign up setting은 한 번 설정하면 추후에 수정할 수 없기 때문에 해당 앱에서 필요한 유저의 정보를 모두 받아올 수 있도록 구성하는 것이 좋습니다.

  5. 다른 옵션은 default로 두고 “Deploy”버튼을 클릭하고, 이어서 나오는 팝업에서 “Confirm deployment”버트을 클릭해 줍니다.

  6. Authentication이 Cognito의 Identity pool을 이용하여 deploy됩니다.

    • Deployment logs를 확장하여 현재의 deploy 상태를 확인할 수 있습니다.

  7. Deploy가 완료되면 아래와 같은 화면이 뜨고, 해당 코드를 pull하는 명령어가 안내됩니다. 데모에서는 데이터 모델 구성 및 UI component가 완료되면 한번에 코드를 pull할 예정이므로 이 단계에서는 그냥 “Done”을 눌러줍니다.

4. 웹페이지 개발에 필요한 Figma UI 가져오기

Figma는 강력한 협업기능을 바탕으로 한 웹/모바일 UI/GUI 디자인 툴입니다. Amplify Studio에서는 Figma와 연동하여 Figma에서 디자인된 UI component 를 손쉽게 가져올 수 있고, 이를 코드로 변환하여 개발자에게 코드로 제공합니다.

Figma UI가져오기

Figma 계정에 접속하여, 필요한 UI를 직접 구성할 수도 있고, 처음에는 AWS에서 제공하는 AWS Amplify UI를 duplicate하여 사용할 수도 있습니다. Ampligram SNS 앱 데모를 위해 구성한 Figma UI를 임포트 합니다.

  1. Studio 좌측 메뉴의 “Design” > “UI Library”를 클릭합니다.

  2. “Get Started” 버튼을 클릭합니다.

  3. Sync with Figma 창이 뜨면 2)Past your Figma file link 에 아래의 url을 복사하여 붙여넣고 “Continue”버튼을 클릭합니다.

*참고 : “Use our Figma template” 링크를 클릭하면 AWS에서 제공하는 UI template를 duplicate하여 구현하고자 하는 어플리케이션의 UI를 직접 설계할 수 있습니다. 오늘 import한 UI링크를 클릭하면 UI구성이 어떻게 되어있는지 Figma page에서 확인 할 수 있습니다.

  1. Figma Login 팝업창이 뜨면 로그인 진행합니다. 계정이 없는 경우 “Create one”버튼을 눌러서 회원가입을 진행합니다. (혹시 아무런 창이 뜨지 않으면 브라우저에서 팝업이 차단되고 있지 않은지 확인 해주세요.)

  2. 로그인 성공 후 “Allow access”버튼을 클릭하여 진행 해주세요.

  3. Figma theme updates 에서 “Accept all changes”를 눌러주세요. UI 컴포넌트의 theme을 import해오는 과정입니다.

  4. Review updated componts 에서는 오늘 데모에 필요한 UI 컴포넌트들을 임포트 합니다. 각 Component마다 “Accept”를 눌러 진행하고, 마지막에 “Save Components” 버튼을 클릭해주세요

    • 오늘 “Ampligram”, “NavBar”, “NewPost”, 세 가지 컴포넌트를 이용하여 어플리케이션을 구성합니다. “MyIcon” 컴포넌트의 경우 다른 컴포넌트 내부에서 사용하는 icon dependency 로 인하여 포팅됩니다.

5. Data Modeling 및 UI 컴포넌트와 바인딩

Amplify studio에서 어플리케이션에 필요한 데이터 모델을 콘솔상에서 손쉽게 모델링 할 수 있습니다. 이렇게 구성된 Data model은 AWS AppSync 및 Amazon DynamoDB와 연동하여 자동으로 Deploy됩니다.
사진을 포스트하는 어플리케이션을 제작하는 데모이기 때문에, 각 유저가 생성하는 포스트에 대한 정보를 담은 데이터 모델을 생성하게 됩니다.
데모를 위해 데이터 컨텐츠를 일부 생성하고, 또 생성한 데이터를 UI컴포넌트에서 노출 할 수 있도록 binding 하는 작업을 진행하게 됩니다.

데이터 모델 생성하기

  1. Studio 좌측 메뉴의 “Set up” > “Data”를 클릭합니다.

  2. Data modeling 화면에서 “+Add model” 버튼을 클릭하여 테이블을 추가합니다.

  3. 데이터 모델의 Title과 Field name - Type 를 아래와 같이 입력합니다.

    • “+Add a field” 버튼을 클릭하여 field를 추가할 수 있습니다.
      • Title : PhotoPost
      • Field name - Type
        • author - string
        • postlocation - string
        • photoURL - AWSURL
        • caption - string
        • likecount - int

  4. 콘솔 상단의 “Save and Deploy”버튼을 클릭하고, 아래의 팝업이 뜨면 “Deploy”를 한 번 더 눌러 줍니다.

  5. 데이터 모델은 AWS AppSync와 Amazon DynamoDB를 이용하여 deploy됩니다. Data deploy에 경우에

  6. Deploy가 완료되면 “Done”을 클릭 해줍니다.

어플리케이션 개발을 위한 sample data 생성하기

Studio내에서 생성된 데이터 모델에 데이터를 실시간으로 조회하고 추가 할 수 있습니다. “Auto-generation”을 통해 어플리케이션이 잘 동작하는지 확인하기 위해서 PhotoPost 데이터 모델에 샘플 데이터를 추가하는 작업을 합니다.

  1. Studio 좌측 메뉴에서 “Manage” > “Contents” 버튼을 클릭합니다.

  2. “Select table”에서 “PhotoPost”를 선택하고, 현재 아무런 데이터가 없으므로 “Auto-generate seed data”버튼을 클릭합니다.

  3. 아래와 같이 각 항목에 어떤 형식의 데이터가 들어가는지 constraints를 설정하고 “Generate data”버튼을 클릭합니다. photoURL은 임의 생성이 불가능하기 때문에 여기서는 설정하지 않습니다.

  4. 아래와 같이 임의의 데이터가 생성되면 각 항목을 클릭하여 아래 링크를 클릭해 나오는 랜덤 사진의 url로 수정해줍니다. (약간의 수작업이 필요합니다)

생성한 데이터 모델을 UI 컴포넌트와 바인딩하기

생성한 데이터 모델의 데이터를 각 UI 컴포넌트의 항목에 바인딩하여 어플리케이션 실행 시에 동적으로 표시될 수 있도록 구성합니다.
또한 각 UI 컴포넌트의 항목에 수행할 수 있는 작업들을 구성합니다.
컴포넌트 클릭시 URL 라우팅, Data model의 create, delete, update 등의 동작을 수행할 수 있도록 데이터 바인딩과 함께 구성합니다. 각 UI 컴포넌트 별로 차례로 진행합니다.

Studio의 “Design” > “UI Library”에서 진행합니다.

Component1 - NavBar

어플리케이션 상단에 위치하게 될 Navigation Bar입니다. Ampligram 로고 클릭시 Amplify 공식 홈페이지로의 이동 및 현재 로그인 한 User의 이름과 Sign-out 버튼 클릭시 로그아웃 기능을 구현할 예정입니다.

  1. “Components”에서 “NavBar”을 선택하고, 현재의 UI구성을 확인합니다.

  2. 좌측 상단의 “Configure”버튼을 클릭합니다.

  3. Elements tree에서 Logo > Logo image 를 선택하여 “Set onClick action” 버튼을 클릭합니다.

  4. Elements tree에서 Navigation > image를 선택하고, “Set image source”버튼을 클릭하여

  5. Elements tree에서 Navigation > Username를 선택하고 현재 로그인한 유저의 이름을 띄웁니다.

    • “Set text label”버튼을 클릭하고, 아래와 같이 Child Properties를 구성합니다.
      • Prop : label
      • Value : Current user information > name

  6. Elements tree에서 Navigation > Button 을 선택하여 Sign-out기능을 추가합니다.

    • “Set onClick action”버튼을 클릭하여 아래와 같이 Child Properties를 구성합니다.
      • Prob : onClick
      • Action : Auth > Sign out this device

Component2 - Ampligram

사진 포스트를 게시할 UI component입니다. PhotoPost 데이터 모델에 저장 된 값을 각 구성요소에서 노출할 수 있도록 바인딩 시켜주는 작업을 합니다.
또한, UI 바인딩과 함께, 백엔드의 데이터 베이스에 Delete / Update 기능을 one-step으로 구성합니다.

  • Update : 하트 아이콘을 클릭했을 때, PhotoPost.likecount값을 +1 증가
  • Delete : X아이콘 클릭시 포스트 삭제

“Components”에서 “Ampligram”을 선택하여 좌측 상단의 “Configure”버튼을 클릭합니다.

  1. 아래의 각 요소마다 “Set image source”을 선택하여 항목에 맞는 데이터를 value로 선택합니다.
  2. 아래의 각 요소마다 “Set Text label”을 선택하여 항목에 맞는 데이터를 value로 선택합니다.
    • Header > Profile > Author name : photoPost.author
    • Header > Profile > Post location : photoPost.postlocation
    • Options > Share > LikeIcon > LikeCount : photoPost.likecount
    • Body > Area > Author name : photoPost.author
    • Body > Area > Text caption : photoPost.caption
    • Body > Area > Timestamp : photoPost.createdAt
  3. Header > Overflow > XIcon 에는 포스트 삭제기능을 추가합니다. “Set onClick action”을 선택하고, 아래와 같이 prperties를 구성합니다.
    • Prop : onClick
    • Action : Data > Delete
    • Model : PhotoPost
    • ID : photoPost.id
  4. Options > Share > LikeIcon 을 클릭 할 경우 포스트의 Like count가 1씩 증가되도록 update 하는 기능을 추가합니다. “Set onClick action”을 선택하고 아래와 같이 properties를 구성합니다.
    • Prop : onClick
    • Action : Data > Update
    • Model : PhotoPost
    • ID : photoPost.id
    • Model field names > likecount : photoPost?.likecount +1

AmpligramCollection 생성

Ampligram UI를 하나만 보여주는게 아니라 여러 장으로 한 화면에 구성하기 위해서 Collection을 생성합니다.

  1. 상단 메뉴의 “Create Collection”버튼을 클릭합니다.

  2. "Create collection" 창이 뜨면 이름을 AmpligramCollection 로 두고 “Create” 버튼 클릭하여 생성합니다.

  3. Layout 창에서 collection의 layout을 설정 할 수 있습니다.

    • 나머지 설정은 그대로 두고, Page 구성을 위해 Pagination 메뉴의 “Include”글자를 선택합니다. 한 페이지에 몇 개의 Ampligram을 띄울지 정하는 것이고, Page size는 5로 설정합니다.

  4. 우측 “2.Set sort conditions” 에서 “Add sort”를 선택합니다. 포스트를 최신순으로 배치하기 위해서 아래와 같이 설정합니다.

    • Property : PhotoPost.createdAt
    • Order : Descending

  5. 다시 UI library 메인으로 돌아오면 Components에 아래와 같이 “AmpligramCollection”이 새로 생성 된 것을 확인 할 수 있습니다.

Component3 - NewPost

새로운 게시물을 작성 할 수 있는 UI Component입니다. Form을 통해서 입력받은 값들을 이용해 PhotoPost 데이터 모델에 새롭게 데이터를 creation 할 수 있도록 구성합니다.

  1. “Components”에서 “NewPost”을 선택하여 좌측 상단의 “Configure”버튼을 클릭합니다.
  2. Content > Forms > PostButton 을 선택하여 “Set onClick action”버튼을 클릭하고, 아래와 같이 Properties를 설정합니다. Figma 의 UI에서 Forms 형태로 만들어진 Text field는 입력된 값을 input으로 백엔드에 전달할 수 있도록 기능을 제공합니다.
    • Prop : onClick
    • Action : Data > Create
    • Model : PhotoPost
    • ID : PhotoPost.id
    • Model field names
      • author : currentUser.name
      • postlocation : Select value from input > TextField-Location
      • photoURL : Select value from input > TextField-URL
      • caption : Select value from input > TextField-Caption
      • likecout : “0”

여기까지 새로운 어플리케이션인 Ampligram을 생성하여 Auth를 구성하였고, 어플리케이션에서 사용할 데이터 모델을 UI component와 연결하는 작업까지 마쳤습니다.
이제 Studio에서 작업한 결과물을 코드로 내려받아 React기반의 클라이언트 앱을 구성하고, AWS Codecommit repository와 연동하여 Amplfy로 자동 배포를 해보도록 하겠습니다.

6. React App 생성 및 CI/CD 구성

1. 개발환경 구성 에서 구성한 Cloud9환경에서 Codecommit repository와 연결합니다. 이 환경에 React app을 생성하고, Amplify를 통해서 자동으로 배포할 수 있도록 Amplify hosting 환경과 repository를 연결합니다.

로컬 레포지토리 초기화

Cloud9의 ~/environment 에서 아래의 명령어로 레포지토리를 초기화 합니다.

git config --global init.defaultBranch main

1-2 Codecommit repository 생성 에서 만든 레포지토리의 clone url을 복사하여 실행합니다.

git clone https://git-codecommit.ap-northeast-2.amazonaws.com/v1/repos/<repository-name>

ex) git clone https://git-codecommit.ap-northeast-2.amazonaws.com/v1/repos/Amplifystudiodemo

Success result

React App 생성

  1. 새로운 React app을 repository 폴더로 이동하여 생성합니다.

    • Command 
      ​​​​​​​​cd ~/environment/amplifystudiodemo
​​​​​​​​npx create-react-app .
    • Success result 
      ​​​​​​​​​Happy hacking!

  2. 생성한 React code를 레포지토리에 commit 합니다.

    • Command

      ​​​​​​​​git add .
​​​​​​​​git commit -m "initial react demo app creation"
​​​​​​​​git push origin main

    • Success result

  3. CodeCommit 콘솔에서 아래와 같이 main branch에 코드가 업로드 된 것을 확인 할 수 있습니다.

Amplify hosting 환경 설정하기

Amplify 서비스를 이용해서 CI/CD를 구성 하고 어플리케이션을 hosting할 수 있습니다.
AWS Amplify 서비스 콘솔로 접속하여 “AmplifyStudioDemo” app을 선택하여 구성합니다.

  1. “Hosting environments” 탭을 클릭합니다.

  2. Repository로 AWS CodeCommit을 구성하였으므로, CodeCommit을 선택 한 뒤 “Connect branch”를 선택합니다.

  3. 앞서 구성한 repository를 선택하고, “Next”버튼을 눌러 진행합니다.

  4. “Configure build settings”에서 Environment는 현재 studio에서 개발 중인 “staging”을 선택하고 새로운 code commit마다 새로운 배포를 할 수 있도록 “Full-stack CI/CD allows you to continously deploy frontend and backend changes on every code commit”옵션에 체크합니다.

  5. Full-stack CI/CD활성화를 위해서는 새로운 role이 필요하므로 아래의 과정에 따라 role을 생성합니다.

    1. “Create new role”을 클릭해줍니다.
    2. IAM 서비스가 새 탭에서 열리면 “Amplify”서비스가 활성화 된 것을 확인하고 “Next: Permissions”를 클릭합니다.
    3. “AdministratorAccess-Amplify” 가 선택 된 것을 확인하고 “Next: Tags”버튼을 눌러 진행합니다.
    4. Review에서 다음과 같이 설정되었는지 확인하고 “Create role” 버튼을 눌러 role을 생성합니다.

  6. 다시 branch 설정으로 돌아와 방금 만든 role을 연결합니다.

  7. “Next” 버튼을 클릭하여 진행하고, Review에서 정보를 확인 한 뒤 “Save and Deploy” 버튼을 클릭합니다.

  8. main branch에서 연결한 repository의 어플리케이션을 자동으로 hosting합니다. (완료되기까지 시간이 소요되므로 다음 챕터인 7. React App에 Amplify component 구성 먼저 진행하셔도 됩니다)

  9. Provision > Build > Deploy > Verity의 과정이 모두 성공적으로 진행되면, 아래의 endpoint 링크를 클릭하여 현재 react app을 확인합니다.

  10. 새 React 앱을 생성하고 아무 작업도 하지 않았으므로 아래의 화면이 나오면 성공!

7. React App에 Amplify component 구성

Cloud9 환경으로 돌아가서, 초기화된 react app 환경에 Amplify studio에서 구현한 Auth, Data model, 및 UI Component 기능들을 import 해오고, import된 UI component들을 사용하여 사진 포스트 및 삭제, 좋아요 수 카운트 기능이 가능한 소셜 네트워킹 어플리케이션을 구성합니다.

Amplify Studio에서 구성요소 가져오기

  1. Amplify 연관 패키지 생성 및 configure

    1. application directory 로 이동합니다. 
      ​​​​​​​​cd ~/environment/amplifystudiodemo
    2. Amplify에서 사용되는 라브러리를 설치합니다. 
      ​​​​​​​​npm i @aws-amplify/ui-react aws-amplify
    3. Amplify Configuration을 진행합니다. 앞선 IAM 권한설정에서 다운로드한 credential파일의 user-name과 access key, 및 secret access key를 사용합니다. 
      ​​​​​​​​amplify configure

      ​​​​​​​​​​​ ? region: ap-northeast-2
​​​​​​​​​​​ ? user name: Amplify
​​​​​​​​​​​ ? accessKeyId:  ********
​​​​​​​​​​​ ? secretAccessKey:  ********
​​​​​​​​​​​ ? Profile Name : default
      • Success result

  2. Amplify studio에서 구성한 코드 pull 해오기

    ​​​​amplify pull

    ​​​​​​​ ? Select the authentication method you want to use: AWS profile
​​​​​​​ ? Please choose the profile you want to use default
​​​​​​​ ? Which app are you working on? AmplifyStudioDemo doflky1g4ue1d
​​​​​​​ ? 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: build
​​​​​​​ ? Build Command: npm run-script build
​​​​​​​ ? Start Command: npm run-script start
​​​​​​​ ? Do you plan on modifying this backend? Y
    • Success result :
    1. 코드가 제대로 pull되었는지 확인합니다.

      • src/ ui-components 폴더가 새성 되었는지 확인합니다. UI 컴포넌트들의 코드가 생성된 디렉토리입니다.

        • 내부에 각 컴포넌트의 .jsx 파일을 열어보면 Javascript UI문법으로 작성된 소스코드를 확인 할 수 있습니다.

      • 아래의 명령어로 amplify app의 추가 기능들이 제대로 import되었는지 확인합니다.

        ​​​​​​​​​​​​amplify status

        • Auth - AWS Cognito를 이용한 인증기능이 현재 어플리케이션과 연결되어있습니다.
        • Api - GraphQL을 통해 쿼리 가능한 데이터 모델이 현재 어플리케이션에 구성되어있습니다.

React App 구성하기

Import해온 ui-component들을 이용하여 웹사이트의 페이지를 구성하고 이를 로컬에서 확인 한 뒤에 commit하여 배포합니다.

  1. src/App.js 파일을 아래와 같이 수정합니다.

    ​​​​import './App.css';
​​​​import { Amplify } from 'aws-amplify';
​​​​import { NavBar, AmpligramCollection, NewPost } from './ui-components';
​​​​import { Flex, withAuthenticator } from '@aws-amplify/ui-react';
​​​​import '@aws-amplify/ui-react/styles.css';
​​​​import awsExports from './aws-exports';

​​​​Amplify.configure(awsExports);

​​​​function App() {
​​​​  return (
​​​​    <div className='App'>
​​​​      <Flex
​​​​        direction={"column"}
​​​​        alignItems={"center"}
​​​​      >
​​​​        <Flex
​​​​          direction={"column"}
​​​​        >
​​​​          <NavBar/>
​​​​          <Flex
​​​​            direction={"row"}
​​​​          >
​​​​            <AmpligramCollection/>
​​​​            <NewPost/>
​​​​          </Flex>
​​​​        </Flex>
​​​​      </Flex>
​​​​    </div>
​​​​  );
​​​​}

​​​​export default withAuthenticator(App);
    • 구성한 UI component들을 ./ui-components에서 가져오고, withAuthenticator로 application을 래핑하여 로그인 후 어플리케이션을 사용할 수 있도록 구성하였습니다.
    • 웹페이지는 NavBar, AmpligramCollection, NewPost 세 가지 component를 이용하여 간단하게 레이아웃을 설정하여 띄우도록 하였습니다.
    • 수정 후 ctrl + s를 눌러 변경사항을 저장합니다.

  2. src/ui-components/Ampligram.jsx 파일 코드의 useDataStoreUpdateAction의 fields에서 실제 변수(likecount)를 update하기 위해서 "photoPost?.likecount +1" 에서 ""를 없앱니다.

    • before :

      ​​​​​​​​fields: { likecount: "photoPost?.likecount +1" },

    • after :

      ​​​​​​​​fields: { likecount: photoPost?.likecount +1 },

      • **여기서 data model의 이름과 field 이름이 대소문자까지 일치하는지 한번 더 double check 해주세요!

    • 수정 후 ctrl + s를 눌러 변경사항을 저장합니다.

  3. 로컬 환경에서 어플리케이션을 빌드하여 정상적으로 동작하는지 확인 합니다.

    • Command 
      ​​​​​​​​npm start
    • “webpack compiled successfully” 라고 터미널에 뜨면 Cloud9 메뉴의 Preview > Preview Running Application을 통해서 어플리케이션을 미리 볼 수 있습니다.
    • Authentication으로 어플리케이션을 래핑해놓았기 때문에 아래와 같은 화면이 뜹니다.
    • Create Account를 클릭하여 회원 가입을 진행합니다.

      • Username 은 id와 같은 기능을하고, Email을 통해 verification code를 받아서 입력해야 최종 sign-up이 완료되기 때문에 유효한 email을 입력 합니다.

      • Mail로 전송된 varification code를 넣고 가입을 완료합니다.

  4. 로그인 되면 아래와 같이 홈페이지 우측 상단에 회원가입 할 때 입력한 이름이 보이고, 샘플 데이터로 생성했던 포스트가 보이는 웹사이트를 확인 할 수 있습니다.

  5. Sign-out 버튼을 클릭하여 로그아웃이 잘 동작하는지 확인합니다. sign-out되면 초기의 sign-in 화면으로 돌아옵니다.

  6. 터미널에서 ctrl + c 로 로컬 서버를 종료합니다.

8. Ampligram 호스팅

웹사이트의 정상 작동을 확인 했으므로, 코드를 레포지토리에 commit하고 hosting 된 사이트에서 포스트 create/update 를 확인해보도록 하겠습니다.

Ampligram Hosting

  1. Code push 하기

    ​​​​git add .
​​​​git commit -am "Auth and Ampligram web page configured"
​​​​git push origin main

  2. Amplify 에서 commit을 인식하고 자동으로 코드 빌드 및 deploy를 시작합니다.

    • (참고) Endpoint관련 : App settings > Domain management에서 현재 가지고있는 domain을 등록하여 어플리케이션을 등록하는 데 사용하는 옵션도 제공합니다.

  3. Verify 까지 완료되면 앱의 endpoint로 어플리케이션에 접속하면 로컬 서버에서 확인 한 것과 같은 Sign-in 화면이 보여집니다.

Ampligram 기능 확인

Authentication - Sign in

  1. 이전 단계에서 생성했던 username-password를 이용하여 로그인 합니다.

Data - Read

  1. 로그인에 성공하면 웹페이지에서 data model에 저장되어있는 데이터를 기반으로 post를 읽을 수 있습니다. (화면이 짤려서 보이는 경우 브라우저를 큰화면으로 보거나 비율을 줄여주세요..)

Data - Update

  1. 각 Post의 하트 아이콘을 클릭하면 옆에있는 likecount가 1씩 증가하는 것을 확인합니다.

    • before :

    • after click :

Data - Create

NewPost 화면을 이용해서 실시간으로 새로운 포스트를 생성하고 업로드 되는 것을 확인합니다.

  1. NewPost 화면에 원하는 이미지의 URL과 post하는 위치, 그리고 메세지를 입력하고 Post 버튼을 클릭합니다.

  2. 웹사이트 좌측의 Post가 표시되는 곳에서 새로 업로드된 포스트를 확인합니다.

    • 초기 Post는 likecount가 0으로 설정되어있고, AmpligramCollection 구성시 최신순으로 post를 정렬하도록 만들었기 때문에 새로 생성한 post가 맨 위에 위치하게 됩니다.

Data - Delete

  1. 각 포스트 우측 상단의 “X”아이콘을 눌러 해당 포스트를 삭제할 수 있습니다.
  2. 방금 생성한 포스트에서 우측 상단의 “X”아이콘을 클릭합니다.
  3. 삭제 된 화면을 확인할 수 있습니다.

Authentication - Sign out

Ampligram의 우측 상단 “Sign-Out” 버튼을 클릭하여 웹페이지에서 로그아웃 합니다. Ampligram 처음 실행했을 때와 같이 다시 Sign in 화면이 나와 정상동작 하는 것을 확인합니다.

(Optional ) AWS 서비스를 이용해서 Data 확인

웹페이지에서 Create/delete/update되는 내용은 Amplify Studio의 “Contents”메뉴에서 확인 할 수 있습니다.
또한, 실제 Amplify 에서 모델링한 DB는 AppSync 와 DynamoDB에 deploy 되기 때문에 AWS AppSync를 이용해서 데이터 쿼리가 가능할 뿐 아니라 DynamoDB에서 직접 데이터 확인도 가능.

  1. AWS AppSync 를 이용하여 GraphQL API 를 이용해 Query/Mutation/Subscription 을 수행 할 수 있고, 실시간으로 데이터에 반영됩니다.

  2. DynamoDB에 데이터 테이블이 저장됩니다. DynamoDB 테이블에서도 데이터를 확인 할 수 있습니다.

9. Analytics 기능 추가하여 Amazon Pinpoint와 연동

Analytics 기능을 사용하면 앱에 대한 분석 데이터를 수집할 수 있습니다. 현재 Amazon Pinpoint 와 Amazon Kinesis에 대한 지원이 기본 제공됩니다(Kinesis 지원은 현재 Amplify JavaScript 라이브러리에서만 사용 가능합니다. Analytics는 Amazon Cognito 자격 증명 풀을 사용하여 앱에서 사용자를 식별하여. Cognito를 사용하면 앱에서 인증된 사용자와 인증되지 않은 사용자로부터 데이터를 수신하고, 기능을 활성화하여 사용하는 것 만으로도 일일 방문자수, active user 통계, 유저들의 서비스 환경(platform, browser type, device)등에 대한 정보를 수집 할 수 있습니다.

Amplify Studio를 통한 UI환경은 현재는 제공하고있지 않지만, 간단한 명령어로 추가할 수 있습니다.
본 데모에서는 Amazon Pinpoint를 이용한 분석기능을 추가해보도록 하겠습니다.

Amplify에 analytics 기능 추가 및 React 구성

  1. Cloud9의 amplify app directory에서 아래의 명령어를 수행합니다.

    ​​​​amplify add analytics

    ​​​​​​​ ? Select an Analytics provider Amazon Pinpoint
​​​​​​​ ? Provide your pinpoint resource name: amplifystudiodemo
​​​​​​​ ? Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analytics events? y
    • 완료되면 amplify/backend/analytics 폴더가 생성됩니다.
    ​​​​amplify push

    ​​​​​​​ ? Are you sure you want to continue? Yes
    • 완료되면 아래와 같이 Pinpoint URL을 제공합니다.

  2. src/App.js 파일에 아래와 같이 Analytics component를 import하고 record를 내보내는 API를 호출하도록 구성합니다.

    ​​​​import './App.css';
​​​​import { Amplify, Analytics } from 'aws-amplify'; 
​​​​import { NavBar, AmpligramCollection, NewPost } from './ui-components';
​​​​import { Flex, withAuthenticator } from '@aws-amplify/ui-react';
​​​​import '@aws-amplify/ui-react/styles.css';
​​​​import awsExports from './aws-exports';

​​​​Amplify.configure(awsExports);

​​​​Analytics.record({ name: 'AmpligramVisit' });

​​​​Analytics.autoTrack('pageView', {
​​​​    enable: true,
​​​​    type: 'SPA',
​​​​})

​​​​function App() {
​​​​  return (
​​​​    <div className='App'>
​​​​      <Flex
​​​​        direction={"column"}
​​​​        alignItems={"center"}
​​​​      >
​​​​        <Flex
​​​​          direction={"column"}
​​​​        >
​​​​          <NavBar/>
​​​​          <Flex
​​​​            direction={"row"}
​​​​          >
​​​​            <AmpligramCollection/>
​​​​            <NewPost/>
​​​​          </Flex>
​​​​        </Flex>
​​​​      </Flex>
​​​​    </div>
​​​​  );
​​​​}


​​​​export default withAuthenticator(App);

  3. Code Push

    ​​​​git add .
​​​​git commit -am "Add Analytics on Ampligram"
​​​​git push origin main

PinPoint에서 분석 확인

  1. 해당 어플리케이션에 attach된 Pinpoint URL로 이동합니다.

    1. Analytics > Usage 대시보드에서 어플리케이션에서 수집한 통계를 제공합니다.

      1. User metrics
      2. Session metrics
      3. Authentication metrics

    2. Analytics > Demographics 대시보드에서는 User 가 사용하는 platform, browser, device 정보 등을 제공합니다.

  2. 본 데모에서는 analytics 활성화 및 기본 통계만 확인했으나, Customer engagement 향상을 위하여 각종 이벤트 및 메트릭을 설정하여 클릭이벤트, 방문 및 매출 통계를 Pinpoint로 분석 할 수 있습니다. 조금 더 자세한 API 활용은 링크를 참조해주세요.

Wrap up

본 데모를 통하여 Amplify studio에서 제공하는 핵심기능을 위주로 간단한 어플리케이션인 Ampligram을 빌드해서 호스팅하는 과정을 진행 해보았습니다.
Amplify studio가 지원하는 기능을 활용하면 최소한의 코드 작업으로, Studio상에서의 UI 작업을 통해서 full-stack 어플리케이션의 개발 사이클을 줄이고, 빠르게 프로덕트를 고객에게 선보일 수 있게 됩니다.

데모 리소스 정리

1. Amplify App 삭제

Amplify Console로 접속하여 데모를 위해 만든 "AmplifyStudioDemo" App 전체를 Actions > Delete app 으로 삭제 해주세요.

2. Codecommit repository 삭제

Codecommit Console로 접속하여 데모를 위해 생성한 Codecommit repository도 "Delete repository" 버튼을 통해 삭제 해주세요.

3. Cloud9 환경 삭제

Cloud9 환경으로 접속하여 "Amplify-workshop" 환경을 선택하고 "Delete" 버튼을 통해 삭제 해주세요.

References

Amplify Studio Docs : https://docs.amplify.aws/console/
Amplify Core Workshop : https://catalog.workshops.aws/amplify-core/en-US
Amplify UI Library : https://ui.docs.amplify.aws/

Last changed by 
 
jiyeon524
0
493
Published on HackMD