람다에서 장켄 게임을 만들자

10955 단어 람다cognitoKinesisAWS

개요



람다에서 장켄 게임을 만드세요.
ぁtp // ぁmb다-짱. s3-우아 b-아아 p-r ぇ아 st-1. 아마조나 ws. 이 m [정지 중]


※데이터가 흐르고 있는 부분을 테두리로 표시하고 있습니다
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

※구초키퍼로 결과를 표시합니다
※소재:굿코 놀이 - ht tp // 놀이 놀이. 코 m/미안_쟈켄. HTML

AWS 서비스를 최대한 활용합니다.
「JavaScript만으로 할 수 있는 얀・・」이라는 츳코미는 두고 있어, 이하의 서비스를 조합해 실장합니다.
Amazon Cognito
Amazon Kinesis
Amazon Lambda
Amazon SQS
Amazon S3

브라우저에서 받은 요청을 Kinesis 에 흘려 넣어, 이것을 받아 발화한 Lambda 함수로, 구초키 파를 나타내는 난수를 생성해, SQS 에 메세지로서에 결과를 큐잉 합니다. 브라우저는 큐잉된 SQS를 취득해, 구초키 파의 일러스트를 표시해 전환합니다.

※현시점에서 Lambda는 프리뷰를 위해, 모두 us-east-1 리전을 이용합니다.

Kinesis 설정



AWS Management Console에서 적절한 이름으로 스트림을 생성합니다.

설정
stream_name = LambdaJanken
ARN = arn:aws:kinesis:us-east-1:xxxxxxxxxx:stream/LambdaJanken
number of shard = 1

SQS 설정



AWS Management Console에서 적절한 이름으로 대기열을 생성합니다.

설정
queue_name = LambdaJanken
URL = https://sqs.us-east-1.amazonaws.com/xxxxxxxxxx/LambdaJanken"
ARN = arn:aws:sqs:us-east-1: xxxxxxxxxx:LambdaJanken

Lambda 설정



index.js를 만듭니다.

index.js
var aws = require('aws-sdk');
var kinesis = new aws.Kinesis({region:'us-east-1'});
var sqs = new aws.SQS({region:'us-east-1'});
exports.handler = function(event, context) {
   var rand = Math.floor( Math.random() * 3 );
   var params = {
      MessageBody: String(rand),
      QueueUrl: 'https://sqs.us-east-1.amazonaws.com/xxxxxxxxxx/LambdaJanken',
      DelaySeconds: 0,
   };
   sqs.sendMessage(params, function(err, data) {
     if (err) {
        console.log(err, err.stack);
     }else{
       console.log(data);
       context.done();
     }
   });
}

index.js를 zip화하여 index.zip을 만듭니다.

AWS CLI에서 Function을 생성하고 업로드합니다.

upload-function
aws lambda upload-function \
--region us-east-1 \
--function-name LambdaJanken \
--function-zip index.zip \
--runtime nodejs \
--role arn:aws:iam::xxxxxxxxxx:role/lambda_exec_role \
--handler index.handler \
--mode event \
--timeout 30

AWS CLI에서 이벤트를 연결합니다.

add-event-source
aws lambda add-event-source \
--region us-east-1 \
--function-name LambdaJanken \
--role arn:aws:iam::xxxxxxxxxx:stream:role/lambda_invoke_role \
--event-source arn:aws:kinesis:us-east-1:xxxxxxxxxx:stream/LambdaJanken \
--batch-size 1 \
--parameters InitialPositionInStream=LATEST

Cognito 설정



AWS Management Console에서 적절한 이름으로 풀을 생성합니다.

설정
identity_pool_name = LambdaJanken
identity_pool_id = us-east-1:cf2xxxx-1xxx-4xxx-9xxx-1856xxxxxxxx
Unauthenticated Identities is checked

IAM 설정



Cognito_LambdaJankenUnauth_DefaultRole
{
    "Version": "2012-10-17",
    "Statement": [{
        "Action": [
            "mobileanalytics:PutEvents",
            "cognito-sync:*"
        ],
        "Effect": "Allow",
        "Resource": [
            "*"
        ]
    }]
}
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "kinesis:*",
      "Resource": "arn:aws:kinesis:us-east-1:xxxxxxxxxx:stream/LambdaJanken"
    }
  ]
}
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Action": [
        "sqs:*"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:sqs:us-east-1:xxxxxxxxxx:LambdaJanken"
    }
  ]
}

Entities-cognito-identity.amazonaws.com
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "",
      "Effect": "Allow",
      "Principal": {
        "Federated": "cognito-identity.amazonaws.com"
      },
      "Action": "sts:AssumeRoleWithWebIdentity",
      "Condition": {
        "StringEquals": {
          "cognito-identity.amazonaws.com:aud": "us-east-1:cxxxxx-1xxx-4xxx-9xxx-1xxxxxxxx"
        },
        "ForAnyValue:StringLike": {
          "cognito-identity.amazonaws.com:amr": "unauthenticated"
        }
      }
    }
  ]
}

HTML 작성



index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lambda ジャンケン</title>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.28.min.js"></script>
<style type="text/css"><!--
    .waku{  position: absolute; top: 180px; left: 95px; z-index: 1; }
    .gu{    position: absolute; top: 20px; left: 180px; z-index: 1; display: none;  }
    .choki{ position: absolute; top: 20px; left: 180px; z-index: 1; display: none;  }
    .pa{    position: absolute; top: 20px; left: 180px; z-index: 1; display: none;  }
    textarea {  margin-left: 50px; width: 850px; height: 300px; line-height: 1.5em; }
--></style>
</head>
<body>
<img src="LambdaJanken.png" />
<img src="LambdaJanken_waku.png" class="waku" id="waku" />
<img src="gu.png" class="gu" id="gu" />
<img src="choki.png" class="choki" id="choki" />
<img src="pa.png" class="pa" id="pa" />
<textarea cols="40" rows="7" id="tex"></textarea>
<p style="padding-left:50px">素材提供：ごっこあそび - http://gokkoasobi.com/omen_jyanken.html</p>

<script>
var janken;
var tex = document.getElementById('tex');
var waku = document.getElementById('waku');

//Cognito
var params = {
    AccountId: "xxxxxxx",
    RoleArn: "arn:aws:iam::xxxxxxx:role/Cognito_LambdaJankenUnauth_DefaultRole",
    IdentityPoolId: "us-east-1:cxxxxxx-1xxx-4xxx-9xxx-1xxxxxxx"
};
AWS.config.region = 'us-east-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials(params);
AWS.config.credentials.get(function(err) {
    if (!err) {
        //Log
        tex.value = tex.value + "===== Cognito authentication =====" + "\n"
        tex.value = tex.value + "Cognito Identity Id: " + AWS.config.credentials.identityId + "\n";     
        //CSS
        waku.style.left = "280px";
    }
});

//Kinesis
var kinesis = new AWS.Kinesis();
var params1 = {
          Data: 'Hello', /* required */
          PartitionKey: 'partitionkey', /* required */
          StreamName: 'LambdaJanken', /* required */
};
kinesis.putRecord(params1, function(err, data) {
    if (err){
        console.log(err, err.stack); // an error occurred
    }else{
        //Log
        tex.value = tex.value + "===== Kinesis put object =====" + "\n";
        tex.value = tex.value + "SequenceNumber: " + data.SequenceNumber + "\n";
        tex.value = tex.value + "ShardId: " + data.ShardId + "\n";  
        //Lambda
        tex.value = tex.value + "===== Lambda invoke function =====" + "\n";

        //CSS
        waku.style.left = "465px";

        //Log
        tex.value = tex.value + "===== SQS send message =====" + "\n";      

        //SQS
        var sqs = new AWS.SQS();
        var params2 = {
            QueueUrl: 'https://sqs.us-east-1.amazonaws.com/xxxxxxxx/LambdaJanken', /* required */
            MaxNumberOfMessages: 1,
            WaitTimeSeconds: 5
        };
        sqs.receiveMessage(params2, function(err, data) {
            if (err) {
                console.log(err, err.stack); // an error occurred
            }else{              
                janken = data.Messages[0].Body;

                //CSS
                waku.style.left = "650px";

                //Log
                tex.value = tex.value + "===== SQS retrieve message =====" + "\n";
                tex.value = tex.value + "ReceiptHandle: " + data.Messages[0].ReceiptHandle + "\n";
                tex.value = tex.value + "Body: " + data.Messages[0].Body + "\n";

                var params3 = {
                              QueueUrl: 'https://sqs.us-east-1.amazonaws.com/xxxxxxxxxxx/LambdaJanken', /* required */
                              ReceiptHandle: data.Messages[0].ReceiptHandle /* required */
                };
                sqs.deleteMessage(params3, function(err, data) {
                    if (err){
                        console.log(err, err.stack); // an error occurred
                    }else{
                        //Log
                        tex.value = tex.value + "===== SQS delete message =====" + "\n";
                        tex.value = tex.value + "RequestId: " + data.ResponseMetadata.RequestId + "\n";

                        //CSS
                        waku.style.display = "none";

                        //Display Janken
                        switch (Number(janken)){
                            case 0:
                                var ele = document.getElementById('gu');
                                ele.style.display = "block";
                                break;
                            case 1:
                                var ele = document.getElementById('choki');
                                ele.style.display = "block";
                                break;
                            case 2:
                                var ele = document.getElementById('pa');
                                ele.style.display = "block";
                                break;
                        }
                    }
                });
            }
        });
    }
});
</script>
</body>
</html>

소스 트리
|-index.html（本体）
|-LambdaJanken.png (背景)
|-LambdaJanken_waku.png (オレンジ枠)
|-gu.png（グー）
|-choki.png（チョキ）
|-pa.png（パー）

이 파일을 S3에 업로드하고 게시합니다.

면책
이쪽은 개인의 의견으로 회사와는 관계 없습니다.
필드 내용을 팝업 도움말에 표시
[Amazon Cognito] JavaScript로 데이터 동기화

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage