ionic에서 aws appsync를 사용해보십시오.

여러분은 GW는 무엇을 하고 지내십니까?

4/13의 AWS로부터의 알림

아시다시피, ionic의 aws starter는 Amplify에 대응하고 있으므로, aws starter로부터 프로젝트를 생성해 시작하려고 하면… 빨리 에러가 나온다 오늘은 그런 에러 대책입니다.

오류 제거

콘솔

typescript: node_modules/aws-amplify/lib/PubSub/Providers/MqttOverWSProvider.d.ts, line: 1 
Cannot find type definition file for 'paho-mqtt'. 

import { Client } from 'paho-mqtt';
import * as Observable from 'zen-observable';

AWS Amplify가 JavaScript 애플리케이션에서 실시간 데이터 기능을 활성화하는 GraphQL 및 AWS AppSync 지원 추가 의 조치대로 이 이슈 를 가져옵니다.

콘솔

npm i --save-dev @types/zen-observable
npm i --save-dev @types/paho-mqtt

그런 다음 다른 버그를 fix합니다.
aws의 라이브러리가 업데이트 되었기 때문에 형식에 오류가 발생하는 것 같습니다.
@types 설명한 대로 변수에 형식을 지정하고 수정하면 컴파일 오류가 중지됩니다.

버그 수정이 끝나면, 사용하고 싶은 기능을 awsmobile 명령으로 활성화합니다.
여기서 appsync를 사용하도록 설정했습니다.

콘솔

$ awsmobile features

? select features:  user-signin, analytics, hosting, appsync
enabled: appsync, user-signin
backend awsmobile project enabled features:
analytics, appsync, hosting, user-signin

$ awsmobile push

checking the backend contents
   generating backend project content
   done
backend build artifacts are saved at: 
(path to project folder)/awsmobilejs/.awsmobile/backend-build

preparing for backend project update: (project)
done
appsync creation complete: (project)

updating backend project: (project)

Successfully updated the backend awsmobile project: (project)

retrieving the latest backend awsmobile project information
awsmobile project's details logged at: awsmobilejs/#current-backend-info/backend-details.json
awsmobile project's specifications logged at: awsmobilejs/#current-backend-info/mobile-hub-project.yml
awsmobile project's access information logged at: awsmobilejs/#current-backend-info/aws-exports.js
awsmobile project's access information copied to: src/aws-exports.js
contents in #current-backend-info/ is synchronized with the latest in the aws cloud

Amplify 버전 업

여기에 에는 GraphQL과 함께 Amplify를 사용하는 방법이 쓰여져 있습니다.

그에 따라 아래의 import 문을 기술한 바

some_service

import Amplify, { API, graphqlOperation } from "aws-amplify";

"graphqlOperation이 없기 때문에 가져올 수 없습니다"라는 오류 메시지가 ...

어쩌면 Amplify 버전이 오래된 것이라고 생각하고 package.json을 확인하면 0.2.15. (이후 4/29 현재입니다)
반면 최신 버전은 0.3.3.
길을 잃었지만 0.3.3으로 업데이트하면 안전하게 가져올 수 있으며 AppSync에 대한 쿼리도 게시 할 수 있습니다.

(덧붙여서 0.3.3으로 업데이트하면 첫 번째 유형 관련 오류가 사라지고 가져올 필요가 없습니다.)

덤 - awsmobile 명령에서 appsync를 enable로 설정하면

프로젝트의 aws 관련 폴더에 appsync 관련 파일이 만들어집니다.

AWS Amplify 페이지

appsync 콘솔에서 볼 때 API가 있습니다.
Auth mode가 기본 IAM이지만 이것도 awsmobile 명령에서 변경할 수 있습니다.

콘솔

$ awsmobile appsync configure

? Please specify the auth type:  
  AWS_IAM 
❯ API_KEY 
  AMAZON_COGNITO_USER_POOLS 

시도로 API 키로 변경하면 콘솔에서 생성하라는 메시지가 표시됩니다.
(실제 운용에서는 cognito를 사용한다고 생각합니다만, 여기에서는 연습으로서)



샘플의 schema와 관련한 dynamo의 테이블이 생성되므로, 도통 시험을 해 보는 것이 좋다고 생각합니다.



그럼 오늘은 이상입니다.