서버 없는 AWS Amplify 기능 소개
서버 없는 이야기
2014년 이래로 저의 일상적인 업무는 아마존 인터넷 서비스(AWS)에서 물건을 구축하고 유지하는 데 도움을 주었습니다.나는 실시간 재고 관리부터 피자에 대한 기계 학습, 그리고 이 두 가지 사이의 모든 측면에서 가장 작은 초창기 회사부터 누구나 알고 있는 회사까지 도왔다.
나는 컨테이너가 갈수록 환영받는 것을 보았다.나는 Serverless라는 단어가 대량으로 사용되는 것을 보았고, 심지어는 그것이 무슨 뜻인지 몰랐다.하지만 한 가지 확실한 것은 내가 수십억 건의 거래를 창설하고 처리한 현실 세계의 서버 없는 시스템은 내 인생에서 본 시스템 중 가장 유지보수와 조작이 쉬운 시스템 중 하나라는 것이다.
그럼 왜 나는 서버가 없는 것을 좋아하는지, 왜 이것이 중요합니까?당신들은 2018년 초의 유령/녹아내린 광기 사건을 기억하십니까? 당시 칩급의 빈틈이 발견되었는데, 모두들 놀라서 앞다투어 그것을 복구했습니까?대부분의 조직이 심지어 회의실을 예약하여 응답 계획을 세우기 전에 내가 조작한 서버 없는 환경은 이미 수리되었다.
이것은 나와 Trek10팀이 유령/녹아내린 밤에 우리 고객의 서버 없는 환경을 수리하는 진정한 의존이다.
나의 가장 재미있는 댓글과 답장은 모두 이렇다. "안녕하세요, 우리는 X회사의 안전팀에서 왔습니다. 우리는 당신의 환경을 위해 최근의 안전 문제를 빨리 해결할 수 있도록 완전한 유지보수와 감사 계획을 세워야 합니다."빈틈이 공개되기 전에 AWS 패치 설명을 완성한 링크'이미 처리'보다 더 중요한 것은 없다.
하루가 끝날 때, 당신은 업무 가치를 납부하기를 희망합니다.너도 서버 없는 실천을 통해 계산 분야에서 가장 우수하고 똑똑한 사람의 조작을 이용하여 한 푼에 한 푼을 바꿀 수 있다.서버 패치, 네트워크, ssh 키 등 문제를 걱정하기보다는 핵심 가치를 제공하는 데 전념해야 한다.
업계 도구
현재 많은 선택이 있다. Serverless Framework부터 Apex Up, 그리고 많은 다른 공급자와 프레임워크 (그 중 많은 것은 특정한 용례나 언어에 중심을 둔다).
최근 내 대부분의 신규 프로젝트는 AWS Amplify CLI에서 시작되었습니다.AWS Amplify CLI는 클라우드에 대한 복잡성을 어느 정도 포괄하여 고유한 솔루션을 제공하면서도 필요한 곳에 맞춤형 기능을 제공합니다.
노드가 있는지 확인하십시오.js 8.11.x 이상의 버전과 AWS 계정 (구성 걱정은 하지 마십시오. 저희는 이 계정만 필요합니다.) 그리고 저희는 떠납니다.
우리의 오늘 프로젝트는 과거의 폭발로 약간 비뚤어질 것이다.이전에 모든 사람들이 사이트 밑에 있는'방문객 카운터'라는 작은 휘장을 기억하십니까? 보통 그들 나라 국기의 애니메이션gif 옆에 있었습니까?
우리 이렇게 합시다. 하지만 더 좋아요.우리는 그것을 실시간화할 것이다™!
Amplify CLI를 먼저 npm install -g @aws-amplify/cli로 설치하고 터미널에서 실행합니다amplify configure.터미널 및 브라우저 창의 조합에서 여러 단계를 완료한 후 새 IAM 사용자를 만들고 구성합니다.
$ npm install -g @aws-amplify/cli
$ amplify configure
Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region: us-east-1
Specify the username of the new IAM user:
? user name: captain-counter
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=captain-counter&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId: AKIAWTXIHO**********
? secretAccessKey: AfGA3kTlGyv6F0GMyzQS********************
This would update/create the AWS Profile in your local machine
? Profile Name: captain-counter
Successfully set up the new user.
프로젝트 디렉터리를 설정하고 확대 프로그램을 초기화합니다.
$ mkdir counter && cd counter
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project counter
? 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 none
? Source Directory Path: src
? Distribution Directory Path: dist
? 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 captain-counter
⠙ Initializing project in the cloud...
이러한 단계(대부분 기본 답안 사용)는 최종적으로 AWS 계정에서 기본 확대 응용 프로그램을 실행합니다.현재 그것은 많지 않지만, 우리는 계속 인코딩합시다.주의사항나는 어떤 특정한 프레임워크도 사용하지 않겠다고 선택했다.나는 이 매우 경량급을 유지하고 싶다. 왜냐하면 우리는 다른 사이트에 스크립트를 불러올 것이기 때문에, 우리는 하나의 프레임워크가 필요하지 않기 때문이다.
API 추가
만약 우리가 조회수를 추적하는 방법이 없다면, 우리의 작은 프로젝트는 매우 성공하지 못할 것이다.우리는 GraphQL API와 AWS AppSync라는 서비스를 이용할 것입니다.AppSync는 완전히 관리되는 GraphQL 솔루션으로 다양한 데이터 원본에 빠르고 쉽게 비추도록 합니다. 저는 개인적으로 여러 방면에서 사용했습니다. 이것은 라벨의 모든 내용을 포함하고 있습니다.
$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: counter
? Choose an authorization type for the API API key
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? No
? Provide a custom type name Counter
Creating a base schema for you...
좋습니다. 이제 amplify/backend/api/counter/schema.graphql 을 열고 모드를 변경하겠습니다.
type Counter
@model
{
id: String!
hits: Int
}
이제 API를 배포합니다.백그라운드에서 Amplify는 모드를 각종 조회와 돌연변이로 컴파일하고 CloudFormation 템플릿을 업데이트하여 API에 필요한 모든 자원을 관리하며 코드는 작은 클라이언트를 생성하여 API에 접근하고 마지막으로 CloudFormation을 통해 모든 내용을 AWS 계정에 배치합니다.
$ amplify push
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | ----------------- |
| Api | counter | Create | awscloudformation |
? Are you sure you want to continue? Yes
GraphQL schema compiled successfully.
Edit your schema at /Users/jshort/Work/counter/amplify/backend/api/counter/schema.graphql or place .graphql files in a directory at /Users/jshort/Work/counter/amplify/backend/api/counter/schema
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? 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
⠦ Updating resources in the cloud. This may take a few minutes...
....sometime later
GraphQL endpoint: https://ol2t5s4qlvbidcx2mwmigeya4m.appsync-api.us-east-1.amazonaws.com/graphql
GraphQL API KEY: da2-rbk5t2xpuvevlm6qza4onbly7m
이 프로세스가 끝나면 GraphQL 끝점과 API 키를 얻을 수 있습니다.이러한 도구를 사용하여 API 사용 및 탐색을 즉시 시작할 수 있습니다.GraphQL 운동장이나 불면증 같은 것을 사용하는 것이 가장 빠른 방법일 수 있다.
예제에서는 GraphQL을 구성합니다. 인증된 HTTP 헤더와 미리 생성된 모든 CRUD 작업에 주의하십시오.
API를 보면 정상적인 CRUD 작업 (만들기, 읽기, 업데이트, 삭제) 에 사용되는 사전 구축 기능이 많이 있습니다.우리의 용례에 대해 우리는 어떤 것도 필요로 하지 않는다. 우리는 우리 자신의 것을 바꿀 것이다.
이 고정된 패턴을 반영하기 위해 amplify/backend/api/counter/schema.graphql 을 변경합니다.우리는 거의 모든 CRUD 작업을 삭제하고 일부 작업의 이름을 바꾸며 필터 구독 방법을 추가했습니다.자세한 내용은 AWS Amplify docs for GraphQL Transforms 를 참조하십시오.
type Counter
@model(
queries: { get: "counter" },
mutations: { create: "hit" },
subscriptions: null
)
{
id: String!
hits: Int
}
type Subscription {
hits(id: String!): Counter
@aws_subscribe(mutations: ["hit"])
}
배후에서 Amplify는 DynamoDB 테이블을 관리하고 있습니다.거대한 부하를 처리할 수 있는 관리형 NoSQL 데이터베이스
다음은 Amazon DynamoDB의 atomic updates 를 이용하여 GraphQL 해상도를 사용자 정의합니다. 이는 계수기의 각'명중'돌연변이를 의미합니다. 우리는 1을 추가하여'명중'열을 추가합니다.
Amplify는 resolvers 의 amplify/backend/api/counter/resolvers 폴더를 사용하여 기본 해상도를 덮어쓰는 편리한 방법을 제공합니다.파일 호출 Mutation.hit.req.vtl 을 만들고 아래 Velocity Template Language 코드를 팝업합니다.
$util.qr($context.args.input.put("__typename", "Counter"))
#if( $util.isNullOrBlank($context.args.input.id) )
$util.error("You MUST pass an `id` parameter")
#else
{
"version": "2017-02-28",
"operation": "UpdateItem",
"key": {
"id": $util.dynamodb.toDynamoDBJson($ctx.args.input.id)
},
"update": {
"expression": "SET #typename = :typename ADD hits :one",
"expressionNames": {
"#typename": "__typename"
},
"expressionValues": {
":one": $util.dynamodb.toDynamoDBJson(1),
":typename": $util.dynamodb.toDynamoDBJson("Counter")
}
}
}
#end
또 다른 단축키amplify push(계속 및 알림 동의)는 음료수를 선택하고 반짝이는 새 API를 되돌려줍니다.
계속하여 GraphQL 편집기에서 사용해 보십시오.
mutation{
hit(input: {
id: "test"
}){
id
hits
}
}
너는 유사한 대답을 받아야 한다.
{
"data": {
"hit": {
"id": "test",
"hits": 118
}
}
}
경탄했어다음 단계는 우리 스스로 작은 카운터를 만들자.cd src.거기서 aws-exports.js과graphql 같은 다른 파일과 폴더를 볼 수 있습니다.package.json라는 새 파일을 만듭니다.
{
"name": "counter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.3"
},
"dependencies": {
"aws-amplify": "^1.1.28"
},
"browserslist": [
"last 2 Chrome versions"
]
}
일단 파일이 위치에runnpm install을 저장하면 몇 분이 걸릴 수 있습니다.이 작업의 일부로서 우리는awsamplify Javascript SDK와 Parcel, 우리의 모듈을 묶고 SDK를 이용하여 나중에 개발하기 쉽도록 제로 설정 묶음 프로그램을 설치하고 있다.
이제 포기하지 마, 우리 곧 도착할 거야!
네, 큰 보답 전의 마지막 두 분.
먼저 index.html 에서 src 파일을 생성합니다.
<!DOCTYPE html>
<html>
<head>
<title>Counter Widget</title>
</head>
<body>
<div data-counter-id="test">Loading...</div>
<script type="text/javascript" src="/index.js"></script>
</body>
</html>
우리는 이 소포가 걸려야 한다.React, Vue, Svelte에서 대부분의 작업을 완료하고 WebPack이나 배에 떠 있는 도구를 사용할 수 있습니다.Amplify SDK는 충분히 이용되었다. 나머지 코드의 작성은 간단명료함을 유지하고 배후의 힘을 설명하기 위해서이다. 나는 어떤 특정한 전단 방법을 바꾸려고 하는 것이 아니다.
마지막으로 우리는 커다란 보답을 받았다.우리도 index.js 에서 src 를 만들었다.
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile);
import * as mutations from "./graphql/mutations";
import * as subscriptions from "./graphql/subscriptions";
/*
Find all the unique counter id on the page.
Send a single hit request for each unique ID.
Subscribe to all updates for each one as well.
*/
const init = function createUpdateCounters() {
const countersToUpdate = document.querySelectorAll(`[data-counter-id]`);
const counterHitIdSet = new Set();
countersToUpdate.forEach((counter) => {
counterHitIdSet.add(counter.dataset.counterId);
})
counterHitIdSet.forEach((id) => {
hitCounter(id);
});
}
/*
Send a mutation to your GraphQL to let it know we hit it.
This also means we get back the current count, including our own hit.
*/
async function hitCounter(id) {
const counter = await API.graphql(graphqlOperation(mutations.hit, { input: { id } }));
updateText(counter.data.hit)
subscribeCounter(id)
}
function updateText(counter) {
const countersToUpdate = document.querySelectorAll(`[data-counter-id=${counter.id}]`);
countersToUpdate.forEach(function (elem) {
elem.innerHTML = counter.hits;
})
}
/*
Subscribe via WebSockets to all future updates for the counters
we have on this page.
*/
function subscribeCounter(id) {
const subscription = API.graphql(
graphqlOperation(subscriptions.hits, { id })
).subscribe({
next: (counter) => updateText(counter.value.data.hits)
});
}
// On dom loaded, kick things off
document.addEventListener("DOMContentLoaded", function () {
init();
});
이 논평들은 현재 발생하고 있는 일에 대한 대부분의 힌트를 포함하고 있지만, Amplify와 GraphQL은 우리를 위해 많은 일을 해 주었다.
계속하여 터미널에서 실행npm start하고 로컬 개발 서버가 시작하는 URL에 액세스합니다.만약 모든 것이 정상이라면, 간단한 Loading... 메시지 후에 계수기를 볼 수 있을 것입니다.
클릭 횟수가 증가함에 따라 계수기를 보기 위해 여러 개의 탭을 열고 새로 고침을 누르면 변경 사항이 실시간으로 모든 탭에 전파되는 것을 볼 수 있습니다.
아래의 작은 프레젠테이션을 보십시오. 얼마나 많은 방문이 이 페이지와 코드펜을 눌렀는지 보십시오!몇 개의 탭에서 열고'재실행'단추를 누르면 실시간 업데이트를 볼 수 있습니다.
그래서 우리는 성공했다!여기에는 몇 가지 중요한 수확이 있어서 생각해야 한다.우리가 하는 일은 생산이 준비되고 대규모로 확장할 수 있는 서비스에서 운행하는 것이다.이것은 초당 수천 개의 요청으로 쉽게 확장할 수 있습니다(기본 제한을 일부 취소한 후).저희가 실제로 작성한 코드는 매우 적습니다. Amplify가 복잡한 작업을 완성할 수 있도록 합니다. 모든 내용이 사실상'코드로서의 인프라 시설'이라는 것은 말할 것도 없고, 이것은 우리가 필요에 따라 완전한 new app instances and environments을 만들 수 있다는 것을 의미합니다.
Serverless의 이념은'무분별한 무거운 부담'을 줄이고 AWS Amplify와 AppSync 등 도구와 서비스를 이용하여 우리가 업무 가치를 창조하는 데 더욱 가깝고 관리 인프라를 더욱 멀리하는 것이다.
Reference
이 문제에 관하여(서버 없는 AWS Amplify 기능 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/trek10inc/build-a-real-time-serverless-visitor-counter-with-aws-amplify-1c0l
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
현재 많은 선택이 있다. Serverless Framework부터 Apex Up, 그리고 많은 다른 공급자와 프레임워크 (그 중 많은 것은 특정한 용례나 언어에 중심을 둔다).
최근 내 대부분의 신규 프로젝트는 AWS Amplify CLI에서 시작되었습니다.AWS Amplify CLI는 클라우드에 대한 복잡성을 어느 정도 포괄하여 고유한 솔루션을 제공하면서도 필요한 곳에 맞춤형 기능을 제공합니다.
노드가 있는지 확인하십시오.js 8.11.x 이상의 버전과 AWS 계정 (구성 걱정은 하지 마십시오. 저희는 이 계정만 필요합니다.) 그리고 저희는 떠납니다.
우리의 오늘 프로젝트는 과거의 폭발로 약간 비뚤어질 것이다.이전에 모든 사람들이 사이트 밑에 있는'방문객 카운터'라는 작은 휘장을 기억하십니까? 보통 그들 나라 국기의 애니메이션gif 옆에 있었습니까?
우리 이렇게 합시다. 하지만 더 좋아요.우리는 그것을 실시간화할 것이다™!
Amplify CLI를 먼저
npm install -g @aws-amplify/cli로 설치하고 터미널에서 실행합니다amplify configure.터미널 및 브라우저 창의 조합에서 여러 단계를 완료한 후 새 IAM 사용자를 만들고 구성합니다.$ npm install -g @aws-amplify/cli
$ amplify configure
Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region: us-east-1
Specify the username of the new IAM user:
? user name: captain-counter
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=captain-counter&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId: AKIAWTXIHO**********
? secretAccessKey: AfGA3kTlGyv6F0GMyzQS********************
This would update/create the AWS Profile in your local machine
? Profile Name: captain-counter
Successfully set up the new user.
$ mkdir counter && cd counter
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project counter
? 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 none
? Source Directory Path: src
? Distribution Directory Path: dist
? 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 captain-counter
⠙ Initializing project in the cloud...
API 추가
만약 우리가 조회수를 추적하는 방법이 없다면, 우리의 작은 프로젝트는 매우 성공하지 못할 것이다.우리는 GraphQL API와 AWS AppSync라는 서비스를 이용할 것입니다.AppSync는 완전히 관리되는 GraphQL 솔루션으로 다양한 데이터 원본에 빠르고 쉽게 비추도록 합니다. 저는 개인적으로 여러 방면에서 사용했습니다. 이것은 라벨의 모든 내용을 포함하고 있습니다.
$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: counter
? Choose an authorization type for the API API key
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? No
? Provide a custom type name Counter
Creating a base schema for you...
좋습니다. 이제 amplify/backend/api/counter/schema.graphql 을 열고 모드를 변경하겠습니다.
type Counter
@model
{
id: String!
hits: Int
}
이제 API를 배포합니다.백그라운드에서 Amplify는 모드를 각종 조회와 돌연변이로 컴파일하고 CloudFormation 템플릿을 업데이트하여 API에 필요한 모든 자원을 관리하며 코드는 작은 클라이언트를 생성하여 API에 접근하고 마지막으로 CloudFormation을 통해 모든 내용을 AWS 계정에 배치합니다.
$ amplify push
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | ----------------- |
| Api | counter | Create | awscloudformation |
? Are you sure you want to continue? Yes
GraphQL schema compiled successfully.
Edit your schema at /Users/jshort/Work/counter/amplify/backend/api/counter/schema.graphql or place .graphql files in a directory at /Users/jshort/Work/counter/amplify/backend/api/counter/schema
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? 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
⠦ Updating resources in the cloud. This may take a few minutes...
....sometime later
GraphQL endpoint: https://ol2t5s4qlvbidcx2mwmigeya4m.appsync-api.us-east-1.amazonaws.com/graphql
GraphQL API KEY: da2-rbk5t2xpuvevlm6qza4onbly7m
이 프로세스가 끝나면 GraphQL 끝점과 API 키를 얻을 수 있습니다.이러한 도구를 사용하여 API 사용 및 탐색을 즉시 시작할 수 있습니다.GraphQL 운동장이나 불면증 같은 것을 사용하는 것이 가장 빠른 방법일 수 있다.
예제에서는 GraphQL을 구성합니다. 인증된 HTTP 헤더와 미리 생성된 모든 CRUD 작업에 주의하십시오.
API를 보면 정상적인 CRUD 작업 (만들기, 읽기, 업데이트, 삭제) 에 사용되는 사전 구축 기능이 많이 있습니다.우리의 용례에 대해 우리는 어떤 것도 필요로 하지 않는다. 우리는 우리 자신의 것을 바꿀 것이다.
이 고정된 패턴을 반영하기 위해 amplify/backend/api/counter/schema.graphql 을 변경합니다.우리는 거의 모든 CRUD 작업을 삭제하고 일부 작업의 이름을 바꾸며 필터 구독 방법을 추가했습니다.자세한 내용은 AWS Amplify docs for GraphQL Transforms 를 참조하십시오.
type Counter
@model(
queries: { get: "counter" },
mutations: { create: "hit" },
subscriptions: null
)
{
id: String!
hits: Int
}
type Subscription {
hits(id: String!): Counter
@aws_subscribe(mutations: ["hit"])
}
배후에서 Amplify는 DynamoDB 테이블을 관리하고 있습니다.거대한 부하를 처리할 수 있는 관리형 NoSQL 데이터베이스
다음은 Amazon DynamoDB의 atomic updates 를 이용하여 GraphQL 해상도를 사용자 정의합니다. 이는 계수기의 각'명중'돌연변이를 의미합니다. 우리는 1을 추가하여'명중'열을 추가합니다.
Amplify는 resolvers 의 amplify/backend/api/counter/resolvers 폴더를 사용하여 기본 해상도를 덮어쓰는 편리한 방법을 제공합니다.파일 호출 Mutation.hit.req.vtl 을 만들고 아래 Velocity Template Language 코드를 팝업합니다.
$util.qr($context.args.input.put("__typename", "Counter"))
#if( $util.isNullOrBlank($context.args.input.id) )
$util.error("You MUST pass an `id` parameter")
#else
{
"version": "2017-02-28",
"operation": "UpdateItem",
"key": {
"id": $util.dynamodb.toDynamoDBJson($ctx.args.input.id)
},
"update": {
"expression": "SET #typename = :typename ADD hits :one",
"expressionNames": {
"#typename": "__typename"
},
"expressionValues": {
":one": $util.dynamodb.toDynamoDBJson(1),
":typename": $util.dynamodb.toDynamoDBJson("Counter")
}
}
}
#end
또 다른 단축키amplify push(계속 및 알림 동의)는 음료수를 선택하고 반짝이는 새 API를 되돌려줍니다.
계속하여 GraphQL 편집기에서 사용해 보십시오.
mutation{
hit(input: {
id: "test"
}){
id
hits
}
}
너는 유사한 대답을 받아야 한다.
{
"data": {
"hit": {
"id": "test",
"hits": 118
}
}
}
경탄했어다음 단계는 우리 스스로 작은 카운터를 만들자.cd src.거기서 aws-exports.js과graphql 같은 다른 파일과 폴더를 볼 수 있습니다.package.json라는 새 파일을 만듭니다.
{
"name": "counter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.3"
},
"dependencies": {
"aws-amplify": "^1.1.28"
},
"browserslist": [
"last 2 Chrome versions"
]
}
일단 파일이 위치에runnpm install을 저장하면 몇 분이 걸릴 수 있습니다.이 작업의 일부로서 우리는awsamplify Javascript SDK와 Parcel, 우리의 모듈을 묶고 SDK를 이용하여 나중에 개발하기 쉽도록 제로 설정 묶음 프로그램을 설치하고 있다.
이제 포기하지 마, 우리 곧 도착할 거야!
네, 큰 보답 전의 마지막 두 분.
먼저 index.html 에서 src 파일을 생성합니다.
<!DOCTYPE html>
<html>
<head>
<title>Counter Widget</title>
</head>
<body>
<div data-counter-id="test">Loading...</div>
<script type="text/javascript" src="/index.js"></script>
</body>
</html>
우리는 이 소포가 걸려야 한다.React, Vue, Svelte에서 대부분의 작업을 완료하고 WebPack이나 배에 떠 있는 도구를 사용할 수 있습니다.Amplify SDK는 충분히 이용되었다. 나머지 코드의 작성은 간단명료함을 유지하고 배후의 힘을 설명하기 위해서이다. 나는 어떤 특정한 전단 방법을 바꾸려고 하는 것이 아니다.
마지막으로 우리는 커다란 보답을 받았다.우리도 index.js 에서 src 를 만들었다.
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile);
import * as mutations from "./graphql/mutations";
import * as subscriptions from "./graphql/subscriptions";
/*
Find all the unique counter id on the page.
Send a single hit request for each unique ID.
Subscribe to all updates for each one as well.
*/
const init = function createUpdateCounters() {
const countersToUpdate = document.querySelectorAll(`[data-counter-id]`);
const counterHitIdSet = new Set();
countersToUpdate.forEach((counter) => {
counterHitIdSet.add(counter.dataset.counterId);
})
counterHitIdSet.forEach((id) => {
hitCounter(id);
});
}
/*
Send a mutation to your GraphQL to let it know we hit it.
This also means we get back the current count, including our own hit.
*/
async function hitCounter(id) {
const counter = await API.graphql(graphqlOperation(mutations.hit, { input: { id } }));
updateText(counter.data.hit)
subscribeCounter(id)
}
function updateText(counter) {
const countersToUpdate = document.querySelectorAll(`[data-counter-id=${counter.id}]`);
countersToUpdate.forEach(function (elem) {
elem.innerHTML = counter.hits;
})
}
/*
Subscribe via WebSockets to all future updates for the counters
we have on this page.
*/
function subscribeCounter(id) {
const subscription = API.graphql(
graphqlOperation(subscriptions.hits, { id })
).subscribe({
next: (counter) => updateText(counter.value.data.hits)
});
}
// On dom loaded, kick things off
document.addEventListener("DOMContentLoaded", function () {
init();
});
이 논평들은 현재 발생하고 있는 일에 대한 대부분의 힌트를 포함하고 있지만, Amplify와 GraphQL은 우리를 위해 많은 일을 해 주었다.
계속하여 터미널에서 실행npm start하고 로컬 개발 서버가 시작하는 URL에 액세스합니다.만약 모든 것이 정상이라면, 간단한 Loading... 메시지 후에 계수기를 볼 수 있을 것입니다.
클릭 횟수가 증가함에 따라 계수기를 보기 위해 여러 개의 탭을 열고 새로 고침을 누르면 변경 사항이 실시간으로 모든 탭에 전파되는 것을 볼 수 있습니다.
아래의 작은 프레젠테이션을 보십시오. 얼마나 많은 방문이 이 페이지와 코드펜을 눌렀는지 보십시오!몇 개의 탭에서 열고'재실행'단추를 누르면 실시간 업데이트를 볼 수 있습니다.
그래서 우리는 성공했다!여기에는 몇 가지 중요한 수확이 있어서 생각해야 한다.우리가 하는 일은 생산이 준비되고 대규모로 확장할 수 있는 서비스에서 운행하는 것이다.이것은 초당 수천 개의 요청으로 쉽게 확장할 수 있습니다(기본 제한을 일부 취소한 후).저희가 실제로 작성한 코드는 매우 적습니다. Amplify가 복잡한 작업을 완성할 수 있도록 합니다. 모든 내용이 사실상'코드로서의 인프라 시설'이라는 것은 말할 것도 없고, 이것은 우리가 필요에 따라 완전한 new app instances and environments을 만들 수 있다는 것을 의미합니다.
Serverless의 이념은'무분별한 무거운 부담'을 줄이고 AWS Amplify와 AppSync 등 도구와 서비스를 이용하여 우리가 업무 가치를 창조하는 데 더욱 가깝고 관리 인프라를 더욱 멀리하는 것이다.
Reference
이 문제에 관하여(서버 없는 AWS Amplify 기능 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/trek10inc/build-a-real-time-serverless-visitor-counter-with-aws-amplify-1c0l
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: counter
? Choose an authorization type for the API API key
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? No
? Provide a custom type name Counter
Creating a base schema for you...
type Counter
@model
{
id: String!
hits: Int
}
$ amplify push
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | ----------------- |
| Api | counter | Create | awscloudformation |
? Are you sure you want to continue? Yes
GraphQL schema compiled successfully.
Edit your schema at /Users/jshort/Work/counter/amplify/backend/api/counter/schema.graphql or place .graphql files in a directory at /Users/jshort/Work/counter/amplify/backend/api/counter/schema
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? 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
⠦ Updating resources in the cloud. This may take a few minutes...
....sometime later
GraphQL endpoint: https://ol2t5s4qlvbidcx2mwmigeya4m.appsync-api.us-east-1.amazonaws.com/graphql
GraphQL API KEY: da2-rbk5t2xpuvevlm6qza4onbly7m
type Counter
@model(
queries: { get: "counter" },
mutations: { create: "hit" },
subscriptions: null
)
{
id: String!
hits: Int
}
type Subscription {
hits(id: String!): Counter
@aws_subscribe(mutations: ["hit"])
}
$util.qr($context.args.input.put("__typename", "Counter"))
#if( $util.isNullOrBlank($context.args.input.id) )
$util.error("You MUST pass an `id` parameter")
#else
{
"version": "2017-02-28",
"operation": "UpdateItem",
"key": {
"id": $util.dynamodb.toDynamoDBJson($ctx.args.input.id)
},
"update": {
"expression": "SET #typename = :typename ADD hits :one",
"expressionNames": {
"#typename": "__typename"
},
"expressionValues": {
":one": $util.dynamodb.toDynamoDBJson(1),
":typename": $util.dynamodb.toDynamoDBJson("Counter")
}
}
}
#end
mutation{
hit(input: {
id: "test"
}){
id
hits
}
}
{
"data": {
"hit": {
"id": "test",
"hits": 118
}
}
}
{
"name": "counter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.3"
},
"dependencies": {
"aws-amplify": "^1.1.28"
},
"browserslist": [
"last 2 Chrome versions"
]
}
<!DOCTYPE html>
<html>
<head>
<title>Counter Widget</title>
</head>
<body>
<div data-counter-id="test">Loading...</div>
<script type="text/javascript" src="/index.js"></script>
</body>
</html>
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile);
import * as mutations from "./graphql/mutations";
import * as subscriptions from "./graphql/subscriptions";
/*
Find all the unique counter id on the page.
Send a single hit request for each unique ID.
Subscribe to all updates for each one as well.
*/
const init = function createUpdateCounters() {
const countersToUpdate = document.querySelectorAll(`[data-counter-id]`);
const counterHitIdSet = new Set();
countersToUpdate.forEach((counter) => {
counterHitIdSet.add(counter.dataset.counterId);
})
counterHitIdSet.forEach((id) => {
hitCounter(id);
});
}
/*
Send a mutation to your GraphQL to let it know we hit it.
This also means we get back the current count, including our own hit.
*/
async function hitCounter(id) {
const counter = await API.graphql(graphqlOperation(mutations.hit, { input: { id } }));
updateText(counter.data.hit)
subscribeCounter(id)
}
function updateText(counter) {
const countersToUpdate = document.querySelectorAll(`[data-counter-id=${counter.id}]`);
countersToUpdate.forEach(function (elem) {
elem.innerHTML = counter.hits;
})
}
/*
Subscribe via WebSockets to all future updates for the counters
we have on this page.
*/
function subscribeCounter(id) {
const subscription = API.graphql(
graphqlOperation(subscriptions.hits, { id })
).subscribe({
next: (counter) => updateText(counter.value.data.hits)
});
}
// On dom loaded, kick things off
document.addEventListener("DOMContentLoaded", function () {
init();
});
Reference
이 문제에 관하여(서버 없는 AWS Amplify 기능 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/trek10inc/build-a-real-time-serverless-visitor-counter-with-aws-amplify-1c0l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
