AWS Amplify 및 Vue를 사용하여 클라우드 지원 GraphQL API 생성

12509 단어 amplifyvuegraphqlaws

이 강좌에서는 Vue, AWS Amplify 및 AWS AppSync를 사용하여 GraphQL 데이터 드라이브가 없는 서버 없는 응용 프로그램을 구축하는 방법을 학습합니다.Vue를 사용하여 새 프로젝트를 만들고 AWS AppSync를 사용하여 서버가 없는 GraphQL API를 생성하고 이를 실시간으로 포함하는 클라이언트를 구축합니다.우리는 다음을 포함할 것이다.
  • AWS AppSync 소개
  • Vue CLI를 사용하여 새 프로젝트 설정
  • 새 GraphQL API 생성 및 첫 번째 GraphQL 변환 사용
  • GraphQL API를 클라우드로 푸시
  • 구축 클라이언트: 조회, 돌연변이 및 실시간
  • 추가
  • AWS Amplify 콘솔을 통해 애플리케이션 게시
  • 클라우드 정리 서비스
  • In order to follow this post you will need a basic knowledge of GraphQL. You can learn the basics following this tutorial at graphql.org.


    >GitHub의 최종 해결 방안과 단계별 강좌.
    질문이 있거나 더 많은 정보를 알고 싶으면 알려주십시오.

    AWS AppSync 소개


    AWS AppSync는 오픈 소스 Amplify 프레임워크(AWS AppSync 클라이언트, GraphQL transforms 및 CLI로 구성), 여러 데이터 원본과의 통합 및 AWS AppSync 컨트롤러를 제공하여 서버 없이 확장 가능한 GraphQL 데이터 구동의 이동과 웹 응용 프로그램을 만들 수 있습니다.
  • GraphQL 클라이언트: 클라이언트 라이브러리로 GraphQL API의 데이터를 안전하게 액세스할 수 있습니다.내장은 실시간 및 오프라인/변동분 클라이언트 동기화를 지원합니다.
  • Amplify CLI: api 범주의 명령을 통해 AWS AppSync와 Amazon API 네트워크 클라우드 서비스의 자원을 자동으로 설정하고 제공하는 데 사용됩니다.REST 및 GraphQL API를 지원합니다.
  • GraphQL 변환: GraphQL 모드에서 사용할 수 있는 사용자 정의 GraphQL 모드 명령을 사용하여 사용자 정의 워크플로우를 활성화합니다.
  • 데이터 소스: 데이터베이스(NosQL용 Amazon DynamoDB, RDBMS용 Amazon Aurora), 검색(Amazon Elasticsearch 서비스) 및 AWS Lambda 함수.
  • AWS AppSync를 사용하면 팀은 이동과 웹을 위해 고도로 확장할 수 있는 서버 없는 GraphQL 데이터 드라이버를 신속하게 만들 수 있으며 많은 작업을 Amplify CLI에 남길 수 있습니다.

    AWS AppSync 데이터 드라이버 아키텍처 개요

    Vue CLI를 사용하여 새 항목 설정


    다음 섹션에 들어가기 전에''에서 설명한 단계를 완료하십시오.

    새 GraphQL API 만들기


    이 글에서, 우리는 GraphQL API를 만들어서 우리가 가장 좋아하는 식당을 열거할 것이다.생성하려면 다음 명령을 사용합니다.
    amplify add api
    
    다음 질문에 대답
  • 아래에 언급된 서비스 맵 중 하나를 선택하십시오
  • API 이름 제공: RestaurantAPI
  • API 키의 기본 인증 유형 선택
  • API 키 입력에 대한 설명: (비어 있음)
  • API 키가 만료되는 날짜(1 – 365): 7
  • 에서 GraphQL API에 대한 고급 설정을 구성하시겠습니까?
  • 주석이 있는 GraphQL 모드가 있습니까?아니오
  • 선택 모드 템플릿: 필드가 있는 단일 객체(예: ID, 이름, 설명이 있는 "Todo")
  • 아키텍처를 지금 편집하시겠습니까?맞다
  • 프롬프트가 나타나면 기본 모드를 다음과 같이 바꿉니다.
    type Restaurant @model {  
      id: ID!  
      name: String!  
      description: String!  
      city: String!  
    }
    
    @model 명령을 제외하고는 위의 GraphQL 모드의 모든 내용을 숙지해야 합니다.이것은 AppSync에서 제공하는 GraphQL 변환입니다.

    첫 번째 GraphQL 변환 사용


    GraphQL 변환은 AppSync가 일반적인 장면에 대한 사용자 정의와 지원을 제공할 수 있기 때문에 이렇게 할 필요가 없습니다.@modelRestaurant 유형에 추가하여 DynamoDB의 조회, 돌연변이, 구독을 지원하기 위해 Amplify CLI가 실행될 때 해상도를 생성할 것을 알려 드립니다.일반적인 CRUD 작업 외에도 페이지 나누기와 필터링 등 더 높은 기능을 얻을 수 있습니다. 이따가 이 기능들을 소개하겠습니다.@model을 한 유형에 적용하면 다음과 같은 다른 변환에 액세스할 수 있습니다.
  • @key DynamoDB에서 사용자 정의 색인 구조 구성
  • @searchable 아마존 Elasticsearch 서비스
  • 을 사용하여 검색 활성화
  • @connection은 유형
  • 간의 관계를 추가합니다
  • @lambda 생성 AWS Lambda 해상도
  • @auth 세립도 다중 권한 부여 지원
  • 추가
  • @versioned 오프라인 장면에 충돌 해결
  • official docs에서 각 변환을 어떻게 상세하게 사용하는지 알아보세요.

    GraphQL Transforms are implemented using custom GraphQL schema directives as defined in the GraphQL specification.


    클라우드로 GraphQL API 밀어넣기


    push 명령을 실행하여 GraphQL API를 만들고 @model으로 변환한 결과를 확인합니다.
    amplify push
    
  • 계속하시겠습니까?맞다
  • 에서 새로 생성된 GraphQL API에 대한 코드를 생성하려면 다음과 같이 하십시오.
  • 선택 코드 생성 언어 목표javascript
  • graphql 조회, 돌연변이, 구독 파일 이름 모드 src/graphql/***를 입력하십시오.회사 명
  • 가능한 모든 GraphQL 작업 생성/업데이트 여부 - 쿼리, 돌연변이 및 구독은
  • 입력 최대 문장 깊이 [패턴 중첩이 깊으면 기본값에서 증가] 2
  • GraphQL 끝점과 API 키를 입력합니다.
    다음 명령을 실행하여 AWS AppSync 콘솔에 액세스합니다.
    amplify console api
    
  • 아래에 언급된 서비스 맵 중 하나를 선택하십시오
  • 새 GraphQL API 테스트


    AWS AppSync 콘솔에 들어가서 왼쪽에 있는 질의를 클릭합니다.그러면 편집기가 열리고 GraphQL 질의를 편집하고 테스트할 수 있습니다.
    다음 변이를 실행하여 새 식당을 만듭니다.
    mutation createRestaurant {  
      createRestaurant(input: {  
        name: "Nobu"  
        description: "Great Sushi"  
        city: "New York"  
      }) {  
        id name description city  
      }  
    }
    
    현재 이 조회를 실행하여 우리가 방금 추가한 식당을 열거합니다.
    query listRestaurants {  
      listRestaurants {  
        items {  
          id  
          name  
          description  
          city  
        }  
      }  
    }
    
    AWS AppSync는 사용자 유형에 대한 일반적인 CRUD 작업 외에 필터와 같은 추가 유틸리티를 만듭니다.필터를 사용하려면 이 질의를 실행합니다.
    query searchRestaurants {  
      listRestaurants(filter: {  
        city: {  
          contains: "New York"  
        }  
      }) {  
        items {  
          id  
          name  
          description  
          city  
        }  
      }  
    }
    
    AWS AppSync는 GraphQL 측정 유형(ID, String, Int, Float, Boolean)에서 목록 작업(예: listRestaurants)에 필터를 생성합니다.

    질의를 사용하여 데이터 조회


    앞부분에서 GraphQL API가 작동하는지 확인합니다.클라이언트에서 우리는 먼저 목록을 표시할 것이다.
    <template>  
      <div v-for="restaurant of restaurants" :key="restaurant.id">  
        {{restaurant.name}}  
      </div>  
    </template>  
    <script>  
    import { API, graphqlOperation } from 'aws-amplify';  
    import { listRestaurants } from './graphql/queries';  
    
    export default {  
      name: 'app',  
      data() {  
        return {  
          restaurants: [],  
        }  
      },  
      created() {  
        this.getData();  
      },  
      methods: {  
        async getData() {  
          try {  
            const response = await API.graphql(graphqlOperation(listRestaurants));  
            this.restaurants = response.data.listRestaurants.items;  
          }  
          catch (error) {  
            console.log('Error loading restaurants...', error);  
          }  
        },  
      }  
    }  
    </script>
    
    위의 코드에서 우리는 API.graphql을 사용하여 listRestaurants에서 getData 조회를 실행합니다.쿼리는 push 명령 동안 CLI 확대로 생성됩니다.이 호출은 이 약속을 async/await로 처리하고 v-for으로 결과를 보여 줍니다.
    너는 우리가 왜 listRestaurants.items을 사용하는지 알고 싶을 것이다.AWS AppSync가 중간 유형 ModelRestaurantConnection을 만들었기 때문입니다.따라서 우리는 limitnextToken 파라미터를 사용하여 페이지 장면을 처리할 수 있다.
    listRestaurants(filter: ModelRestaurantFilterInput, limit: Int, nextToken: String): ModelRestaurantConnection 
    type ModelRestaurantConnection {  
     items: [Restaurant]  
     nextToken: String  
    }
    

    돌연변이 데이터 생성


    새 식당을 추가하기 위해서, 우리는 form을 사용하여 데이터 항목을 만들어서 필요한 사용자의 입력을 얻고 이를 CreateStaurant에 전달할 것입니다.
    <template>  
      <div>  
        <form v-on:submit.prevent>  
          <div>  
            <label>Name: </label>  
            <input v-model='form.name' class='input' />  
          </div>  
          ...  
          <button @click='createRestaurant' class='button'>Create</button>  
        </form>  
      </div>  
    </template>  
    <script>  
    import { createRestaurant } from './graphql/mutations';  
    
    export default {  
      name: 'app',  
      data() {  
        return {  
          form: { },  
        }  
      },  
      methods: {  
        async createRestaurant() {  
          const { name, description, city } = this.form  
          if (!name || !description || !city) return;  
    
          const restaurant = { name, description, city };  
          try {  
            const response = await API.graphql(graphqlOperation(createRestaurant, { input: restaurant }))  
            console.log('Item created!')  
            this.restaurants = [...this.restaurants, response.data.createRestaurant];  
            this.form = { name: '', description: '', city: '' };  
          } catch (error) {  
            console.log('Error creating restaurant...', error)  
          }  
        },  
      }  
    }  
    </script>
    
    AWS AppSync는 각 필드를 매개 변수로 전달하는 것이 아니라 입력 유형 CreateRestaurantInput을 만들어 클라이언트 코드를 더욱 간단하고 편리하게 합니다.
    type Mutation {  
     createRestaurant(input: CreateRestaurantInput!): Restaurant  
    }input CreateRestaurantInput {  
     id: ID  
     name: String!  
     description: String!  
     city: String!  
    }
    
    우리가 이전에 조회에 대해 한 바와 같이, onCreate을 통해 폼을 제출할 때, 우리는 async/await를 사용하여 우리의 변체를 실행합니다.결과를 얻은 후, 우리는 폼 데이터로 목록을 업데이트하고 폼 입력을 지웁니다.

    실시간 구독 추가


    실시간성을 보여주기 위해 구독을 사용하여 새 식당을 추가할 때 AppSync 클라이언트를 업데이트합니다.AppSync 클라이언트는 GraphQL API를 통해 변경된 내용을 수신하여 수신합니다.더 구체적으로 말하면 식당 창설이 급변했다.
    import { onCreateRestaurant } from './graphql/subscriptions';  
    
    export default {  
      name: 'app',  
      created() {  
        //Subscribe to changes  
        API.graphql(graphqlOperation(onCreateRestaurant))  
        .subscribe((sourceData) => {  
          const newRestaurant = sourceData.value.data.onCreateRestaurant  
          if (newRestaurant) {  
            // skip our own mutations and duplicates  
            if (this.restaurants.some(r => r.id == newRestaurant.id)) return;  
            this.restaurants = [newRestaurant, ...this.restaurants];  
          }   
        });  
      },  
    }
    
    우리는 created을 사용하여 구독을 설정하고 subscribe을 사용하여 알림을 탐지하기 시작합니다.그리고 모든 통지에 대해 우리는 변경으로 우리의 식당 목록을 업데이트할 것이다.

    AWS Amplify 콘솔을 통해 애플리케이션 게시


    네가 해야 할 첫 번째 일은 이 프로젝트를 위해 새로운 환매 협의를 만드는 것이다.재구매를 작성한 후 프로젝트의 URL을 클립보드에 복사하고 로컬 프로젝트에서 git를 초기화합니다.
    git init  
    git remote add origin [[email protected]](mailto:[email protected]):username/project-name.git  
    git add .git commit -m 'initial commit'git push origin master
    
    다음에 AWS 계정의 AWS Amplify Console을 방문하십시오.새 배포를 만들려면 시작 을 클릭합니다.다음은 저장소 공급업체에 저장소 서비스로 권한을 부여합니다.이제 새로 만든 항목에 대해 새 저장소와 지점을 선택하고 다음 을 클릭합니다.다음 화면에서 새 역할을 만들고 이 역할을 사용하면 AWS Amplify 콘솔에 이 자원을 배치할 수 있습니다. 다음 을 누르십시오.마지막으로 Save and Deploy 배포 응용 프로그램을 클릭하십시오!

    AWS는 콘솔 배포 단계를 확대했습니다.

    클라우드 정리 서비스


    언제든지 프로젝트 및 AWS 계정에서 서비스를 삭제하려면 다음을 실행하십시오.
    amplify delete
    

    결론


    축하Vue 및 AWS AppSync를 사용하여 첫 번째 GraphQL API를 성공적으로 구축했습니다.이 강좌를 읽어 주셔서 감사합니다.
    원하는 경우 이 동영상의 설명에 따라 동일한 애플리케이션을 구축하여 Amazon Cloudfront 및 Amazon S3에 배포할 수 있습니다.

    읽어주셔서 감사합니다!


    본 강좌나 AWS 확대판에 대해 질문이 있습니까?언제든지 연락 주세요.

    My Name is . I am a Developer Advocate at AWS Mobile working with AWS Amplify and AWS AppSync teams.
    GraphQL is an open source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data.

    좋은 웹페이지 즐겨찾기