개요

이전부터 들었던 적이 있었지만 사용하지 않았던 Amplify와 React를 사용하여 간단한 앱을 만드는 것이 이 기사의 목표입니다.

사전 점검

다양한 환경의 버전을 확인합시다. (이것이 모두 사용할 수 있는 환경이 갖추어져 있는 전제)

$ create-react-app --version
3.4.1
$ node -v
v12.18.0
$ npm -v
6.14.4
$ amplify --version
4.27.1

React App 만들기

클라이언트 앱의 병아리를 만듭니다.

$ create-react-app client-app --template typescript
$ cd client-app
$ yarn start

친숙한 화면이 나온다고 생각합니다. 이것으로 일단 클라이언트 측의 준비는 OK입니다.

Amplify 프로젝트 만들기

AmplifyCLI를 사용하여 AWS에 백엔드(AppSync)를 만들어 봅시다.
먼저 Amplify 프로젝트를 만들겠습니다.
※ AWS의 프로필은 사전에 만들어진 전제로 진행합니다.

$ applify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project backend-app
? Enter a name for the environment dev
? 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
Using default provider  awscloudformation


For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default

Amplify 프로젝트를 작성할 때 대화식으로 설정 정보를 들어오므로 답변해 갑니다.
마지막으로 지정한 프로파일을 선택하면 Cloudformation 배포가 시작됩니다.

배포된 내용으로는 S3의 버킷 작성, 각종 롤 작성입니다.amplify init 작업이 끝나면 AWS 콘솔에서 확인해 보는 것이 좋습니다.

Amplify API 만들기

api 작성도 init와 같고, 인터랙티브하게 설정 정보를 들어 오므로 대답해 갑니다.

$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: AmplifyFunction
? Choose the default authorization type for the API API key
? Enter a description for the API key:
? After how many days from now the API key should expire (1-365): 365
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
GraphQL schema compiled successfully.
? Do you want to edit the schema now? No
Successfully added resource

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

완료하면 amplify 디렉토리에 스키마의 모델 정의가 만들어지고 있다고 생각하므로 확인해 봅시다.
schema.graphql 의 내용은 이런 느낌입니다. (이번에는 특별히 아무것도하고 있지 않기 때문에 최소 구성입니다)

type Todo @model {
  id: ID!
  name: String!
  description: String
}

AWS에 배포

amplify push 명령을 실행하여 AWS에 API를 배포합니다.
이쪽도 인터랙티브에 질문이 오므로 대답해 갑니다.

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category |  Resource name  | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Api      | AmplifyFunction | Create    | awscloudformation |
? Are you sure you want to continue? Yes

The following types do not have '@auth' enabled. Consider using @auth with @model
     - Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth


GraphQL schema compiled successfully.
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/api.ts

답변이 완료되면 AWS에서 리소스 생성이 시작됩니다.
최초로 cloudformation에서 작성된 스택의 Nested(스택)로서,
해석기(AppSync) 및 테이블(DynamoDB)과 같은 백엔드 리소스가 생성됩니다.
amplify push 가 완료되면 콘솔에 API(GraphQL) 엔드포인트와 API 키가 표시된다고 생각합니다.
이것은 자동으로 aws-exports.js에 삽입됩니다.

이것으로 백엔드측의 설정, 구축은 완료입니다.

다음 번

이것으로 똑같습니다만, 최소 구성의 클라이언트, 백엔드의 환경이 생겼습니다.
다음 번에는 이 두 개의 연결을 해 갈까 생각합니다.