Amplify 백엔드 DB 구현 및 쿼리(AWS 활용)

목적

• 백엔드 DB를 구성함으로써 사용자의 데이터를 저장하고 활용하는 서비스 토대 마련
• Query 를 통해 DB의 자료를 읽고 이를 출력

자원스택

• Amplify : 아마존에서 제공하는 풀스텍 서비스
• Appsync : 각종 백엔드 자원을 연동하는 완전관리형 서비스
• DynamoDB : 키 값과 문서 데이터 모델을 지원하는 NoSQL 데이터베이스

사용예시

https://xp-cloud.jp/blog/2020/03/18/6870/

환경세팅

• Full Cloud DevOps 구성(AWS 활용) 및 Amplify 로그인 구현(AWS 활용) 에서 세팅한 환경 이용
• amplify env 에서 dev 환경

백엔드 DB 구현

Amplify 구성요소 추가

1. Amplify CLI로 기능 추가

• 모든 사항은 default로 생성한다.

amplify api add
amplify push

2. Amplify console에 추가된 내용 확인

• amplify backend에 해당 기능이 추가되어 있다.

• appsync를 확인하면 default정의에 해당하는 To-do의 table이 정의되어 있다

• 리소스를 눌러보면 이에 해당하는 dynamoDB를 확인할 수 있다

DB 테이블 정의

1. graphql schema

• graphql을 사용하는 amplify에서는 graphql schema를 통해 db 테이블을 정의하면 이에 해당하는 dynamodb 및 appsync를 통한 쿼리를 자동으로 생성 해 준다

2. amplify/backend/api/schema.graphql 수정

• 기존 To-do 테이블에 tag를 추가하고, 이를 별도 테이블과 연결하도록 수정

type Todo @model {
  id: ID!
  name: String!
  description: String
  
  tags: [Tag] @connection(name: "TodoTag") # [] : 리스트 형태로 자료를 받음
}

type Tag @model {
  id: ID!
  userId: String!
  username: String!
  content: String
  todo: Todo @connection(name: "TodoTag") # @connection은 쌍으로 관계를 설정해야하며 name으로 구분
}

※ connaction으로 관계를 맺으면 각 테이블 쿼리시에 상호간에 id를 통해 접근이 가능함

• 변경됨 schema 적용

amplify push

• amplify에 변경된 내용 확인

Appsync 쿼리 둘러보기

1. appsync 쿼리

• schema로 적용된 테이블에 대하여 쿼리를 테스트 해볼 수 있다.

2. 자료 입력해보기

• Mutation을 통해 자료를 생성, 수정, 삭제할 수 있다.

• 원하는 항목을 선택하고 입력하면 자동으로 mutation문이 생성되며 플레이 버튼으로 실행

3. 입력된 자료 확인

• 쿼리를 통해 입력된 내용 확인

• DynamoDB에서 실제 레코드 확인

vue에 적용

1. main.js 수정

• aws-amplify를 사용하기 위해 Vue의 src/main.js를 아래와 같이 수정 합니다.

import { createApp } from 'vue'
import App from './App.vue'

// 삭제 : createApp(App).mount('#app')
// 위는 default 내용
// 아래는 추가된 내용
// https://docs.amplify.aws/ui/auth/authenticator/q/framework/vue#recommended-usage

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
import {
  applyPolyfills,
  defineCustomElements,
} from '@aws-amplify/ui-components/loader';

Amplify.configure(aws_exports);
applyPolyfills().then(() => {
  defineCustomElements(window);
});

// 추가된 내용
const app = createApp(App);
app.config.isCustomElement = tag => tag.startsWith('amplify-');
app.mount('#app');

2. App.vue 수정

• 쿼리를 위한 script수정

<script>
...
import { API } from 'aws-amplify'; // amplify API
import { listTodos } from './graphql/queries'; // 자동 생성된 쿼리문

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    this.getTodos(); // 불러오는 함수
    ...
  },
  
  data() {
    return {
      ...

      todos: [] // 데이터 저장을 위한 변수
    }
  },
  
  methods: {
    async getTodos() { // 쿼리 수행 및 저장
      const todos = await API.graphql({
        query: listTodos
      });
      this.todos = todos.data.listTodos.items;
    }
  },
  
  beforeUnmount() {
    this.unsubscribeAuth();
  }
}
</script>

• 화면에 표시할 template 수정

<template>
...
	<div v-for="item in todos" :key="item.id">
	    <h3>{{ item.name }}</h3>
	    <p>{{ item.description }}</p>
	</div>
...
</template>

3. 작동 확인

• 앞에서 appsync를 통해 입력해놓은 Todo 데이터가 표출 되었다.

발전방향

• 데이터 입력 구현 : Mutation 활용

• S3 연동 : 사진 데이터 입력 및 출력

  끝.