[개인 블로그 renewal] Aws Amplify, App Sync 관련 설정하기

Web Dev/5. Projects 2021. 5. 14. 22:39

728x90

AWS를 아직 잘 아는 것은 아니지만 요근래에 Amplify를 좀 자주 다루게 되어서 이번 프로젝트에서 간단하게 graphql API를 만들어서 쓰고 싶어서 Amplify docs를 잘 따라서 설정을 했다.

Amplify란?

Amplify 는 AWS에서 풀스택 앱을 개발하는데 도움을 주려고 만든 그런거다.

https://aws.amazon.com/ko/amplify/

모바일 및 웹 앱을 빠르게 구축 | AWS Amplify | Amazon Web Services

개발 제공 관리

aws.amazon.com

첨에 뭔가 싶어서 헷갈렸는데, 일단 얘는 들이박아서 쓰면서 파악을 하는게 쉬운 것 같다.

Aws가 Next.js 관련해서 점점 지원이 많아지는데, amplify docs에서 Next.js 관련해서 사용하는 것을 잘 설명 해두었다.

https://docs.amplify.aws/start/q/integration/next

Getting started - Amplify Docs

Getting Started with Amplify Framework

docs.amplify.aws

우선 큰 줄기는 Amplify는 cli로 Backend관련 처리를 쉽게 하도록 지원해준다. 나처럼 프론트엔드쪽을 주로 보는 사람들은 가끔 백엔드 생각도 하다보면 너무 할게 많아서 힘들때도 있는데, cli로 쉽게 사용할 수 있도록 지원을 해준다.

AppSync란?

Frontend app을 구성하다보면 아무래도 가장 필요한게 API 이다. AppSync는 그중에서도 GraphQL 엔드포인트를 지원해주는 완전관리형 서비스이다. https://aws.amazon.com/ko/appsync/

AWS AppSync | 관리형 GraphQL API | Amazon Web Services

실시간 협업 실시간 협업 백엔드의 데이터를 연결된 모든 클라이언트(일대다)로 브로드캐스팅하거나 클라이언트 간(다대다)에 브로드캐스팅할 수 있습니다. 예를 들어, 두 번째 화면 시나리오

aws.amazon.com

사용법은 아래 페이지에서 볼수 있다.

https://docs.amplify.aws/cli/graphql-transformer/overview

API (GraphQL) - Overview - Amplify Docs

With Amplify CLI and GraphQL Transform, you define your application's data model using the GraphQL Schema Definition Language (SDL) and the library converts your SDL schema into a set of fully descriptive AWS CloudFormation templates that implement your da

docs.amplify.aws

내가 GraphQL를 아직 잘 아는 것은 아닌데, AppSync를 사용한 이유는 데이터 생성 등에 대해서 엄청 지원이 빵빵하기 때문이었다.

amplify init
amplify add api // graphql로 선택하고 다 default로 따라준다

이렇게 하고 나면 프로젝트내에 amplify 폴더내에 graphql 스키마가 생기고 src내에는 graphql 폴더가 생기고, mutation, query, subscription 파일이 생긴다.

놀라운 건 amplify 폴더내의 schema를 변경하고, amplify push 만 하더라도 변경한 schema를 지원하는 matutations, queries, subscriptions 파일을 다 만들어준다는 사실이다. 정말... 세상이 너무 좋아진게 아닌가.... 그런 생각이 드는 순간이다.

이렇게 생성하고나면 사실상 설정이 끝나고 내 프로젝트내에서 사용이 가능하다.

GraphQL API 사용하기

나는 일단 클라이언트에서 api를 호출하는 방식을 사용했다

핵심은 aws-amplify에서 제공하는 API를 가져다가 Amplify.configure만 해준다음에 사용이 가능하다. axios 같은 라이브러리를 사용하네, 마네 하는 고민이 싹사라지는 순간이었다.

import Head from "next/head";
import { Amplify, withSSRContext, API } from "aws-amplify";
import awsExports from "../../aws-exports";
import { useEffect } from "react";
import * as queries from "../../graphql/queries";
import * as mutations from "../../graphql/mutations";

Amplify.configure({ ...awsExports, ssr: true });

// export async function getStaticPaths() {
//   const SSR = withSSRContext();
//   const { data } = await SSR.API.graphql({ query: listPosts });
//   // Example of getting list of posts from GraphQL API
//   const paths = data.listPosts.items.map((post) => ({
//     params: { id: post.id },
//   }));
//   return {
//     fallback: true,
//     paths,
//   };
// }
// export async function getStaticProps({ params }) {
//   const SSR = withSSRContext();
//   // Example of getting one post
//   const { data } = await SSR.API.graphql({
//     query: getPost,
//     variables: {
//       id: params.id,
//     },
//   });
//   return {
//     props: {
//       post: data.getPost,
//     },
//   };
// }

const CustomNotion = () => {
  const callSomething = async () => {
    const allTodos = await API.graphql({ query: queries.listPosts });
    console.log(allTodos);
  };

  const addPost = async () => {
    console.log("add Post");
    const test = {
      block: JSON.stringify({}),
    };
    const newPost = await API.graphql({
      query: mutations.createPost,
      variables: { input: test },
    });
  };

  useEffect(() => {
    callSomething();
  }, []);

  return (
    <div>
      <Head>
        <title>Hayoung's Notion</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>CustomNotion</div>
      <button onClick={addPost}>Add</button>
      {/* TODO: 좌측에 notion처럼 페이지를 추가하는 기능 구현하기(추가할 때 페이지가 알아서 route됨) */}
      {/* TODO: Drag and Drop이 되는 블럭을 생성해야함 */}
      {/* TODO: 마지막 컨텐츠 다음에는 항상 새로운 블럭을 생성할 수 있도록 해야함 */}
      {/* TODO: 블럭은 여러 종류가 있지만 몇가지로 제한해서 생성해보자 */}
      {/* TODO: JSON 객체를 활용해야할 것 같음 */}
    </div>
  );
};

export default CustomNotion;

이때 addPost 함수를 보면 내가 block 데이터만 보내서 데이터를 생성하고 있다.

여기는 AppSync에서 스키마를 볼수 있는 곳인데, 여기서 우측의 resolvers에서 createPost를 들어가보면 아래와 같다.

여기를 보면 Id를 안보내주면 알아서 autoID까지 생성하는구나 하는걸 확인할수 있다($utils.autoId)

api요청을 add버튼을 누르면 하게 되는데, 이때 데이터는 또 appsync의 콘솔에서 확인이 가능하다.

여기서 query가 실행도 가능하다.

데이터는 어디로 가는가? (dynamoDB)

여기서 보면 AppSync는 여러 서비스랑 연동이 될수 있는데 default로는 DynamoDB랑 연결되는것 같다. 그래서 데이터를 생성하면 DynamoDB내에 들어가게 된다. 실제로 프로젝트내에서 dynamoDB request마다 돈내라고(ㅠㅠ) 되있다.

후기

Frontend 개발에 지금은 집중하고 싶은데 이런 백엔드관련 지원을 손쉽게 해줘서 편한것 같다. 다만 할때마다 돈이 나간단게 마음아프긴한데, 왜 aws는 firebase처럼 free tier지원이 제대로 없는지? 크레딧줘서 돈나갈지말지 벌벌떨게 하지말고 화끈하게 돈더 안나가게 제한해주는거 확실하게 해줬으면 좋겠는데하는 생각이 든다. 간단하게 test를 하면서 개발할거기때문에 개발하는 동안에는 이렇게 한번 사용을 해보려고 한다. authentication도 여유가 되면 넣어야지.

'Web Dev > 5. Projects' 카테고리의 다른 글

첫번째 게임 prototype구성 - useReducer, useRef, transition/transform 사용 (0)	2021.05.22
[개인 블로그 renewal] Next.js와 client-side navigation, 상태관리(작성중) (0)	2021.05.15
[개인 블로그 renewal] 프로젝트 노선 변경 + custom notion (0)	2021.05.14
Next.js - Amplify - Tailwind CSS 세팅하기 (1)	2021.05.13
Autism Project 시작하기 (0)	2021.05.10

ABOUT ME

MyTutorials MyTutorials

Amplify란?

AppSync란?

GraphQL API 사용하기

데이터는 어디로 가는가? (dynamoDB)

후기

'Web Dev > 5. Projects' 카테고리의 다른 글

티스토리툴바

ABOUT ME

Amplify란?

AppSync란?

GraphQL API 사용하기

데이터는 어디로 가는가? (dynamoDB)

후기

'Web Dev > 5. Projects' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바