LoginSignup
0
0

Lambda ってなんですか〜SkillBuildersってのがある話

Last updated at Posted at 2024-04-03

はじめに

ちょっと執筆中です LTなどで使ったパワポを記事にしていこうと思います。
アプリケーション(まわりにJava アプリケーションエンジニアがおおかったのもあり、JAVA+Tomcatあたりのアプリケーション書いてる人を前提に進めます)エンジニア向けに書いていきます。

経緯

後輩や同僚から、「AWS始めたい」「アプリケーションエンジニアもそろそろサーバレスをしたい」「ラムだって何?」と、いろんなレベル感のメンバから聞かれるので書いたLT資料です。
行間が読めなくなるのでちょこちょこ説明を追記していこうと思います。

目標は「AWS Lambda を使い始める皆様へ」の第一歩目を作る。

## はじまり,はじまり〜

image.png

image.png

Lambdaをざっくりと

image.png

image.png

アプリケーションエンジニアの気持ちで、一般アプリケーションから考えてみよう

image.png

image.png

image.png

image.png

Lambda の立ち位置

image.png

Lambda をコードにしたけど、 一体どこだ?

image.png

image.png

Lambda はここだ。書きたいことを書くんだぜ。

image.png

Javaのちょっと前に出てきたしそうPOJOであるということ

image.png

Lambdaは APIもくてきだけじゃないんだぜ

image.png

ベーシックに画面の説明(これよく求められる)

話ばかりで実際どう触るのよ?見せてでもして欲しいよ。
とリクエストがあるので、 実際にAWSアカウントからコンソールに入ってみてみましょう。 覚えるべきポイントはまずこの辺りと
「ソースコード書ける領域があるんだな」を知ること。
image.png

image.png

やってみよう LambdaとAPIGateway

※ APIGateway は、ただREST/APIを公開するだけの仕組みにあらず。 環境ステージングを1インスタンスで管理したりとDevOps的な観点から様々な機能を提供してくれている。(今回はこの辺りは省略します)

image.png

image.png

image.png

エンジニアトランスフォーメーション1:Java(おじさん)エンジニアには懐かしいJavaPetStore を例に例える

image.png

エンジニアトランスフォーメーション2: 若者にはアマゾンWebサイトを例にとるとわかりやすいです

image.png

[PetStore] https://cz9lmfit0d.execute-api.us-east-2.amazonaws.com/study/pets/
[PetStore] https://www.oracle.com/java/technologies/petstore-v1312.html
[J2EE] https://www.oracle.com/java/technologies/java-blueprint.html

image.png

あるあるタブー、LambdaからLambdaを呼び出すなし!

image.png

なんでか?答えは、re:invent2022 CTO Vogels さんの世界にある 「世の中は非同期でできている」

image.png

参考: マトリクスの世界を模した内容から始まるキーノート(英語わからなくても面白いよ)
  https://www.youtube.com/watch?v=RfvL_423a-I

image.png

解決策 → あるあるタブー、LambdaからLambdaを呼び出すなし!

image.png

image.png

image.png

image.png

おまけ: Lambdaをおぼえたら書いてみよう サンプルアプリケーション

Lambda + APIGateway を使ってサンプルを書いてみよう。
ただHelloWorld とかするなら 入門書やSkillBUildersを利用して、その次の今一歩。

表示されたサイト上にあるテキストエリアに入れた文字を、Lambdaに送り
送られたテキストをもとに AWS SDKを利用してPollyで 音声に起こします。
この起こした文字をS3にアップロードすることで、 サイトが発話する仕組みをサンプルにしてあります。

発展系で AmazonCOnnectやSNSにすると 通知や通話伝達の仕組みが作れます。
(もしかしたらAlexaってこんな仕組みなのかもしれませんね)

image.png

Lambda側のソース
import json

import os
import logging
import sys
import traceback
import boto3
from boto3 import Session
from boto3 import resource
from botocore.exceptions import BotoCoreError, ClientError

from contextlib import closing
 
logger = logging.getLogger()
logger.setLevel(logging.INFO)


def lambda_handler(event, context):
    ##AWS lib session
    session = Session(region_name="ap-northeast-1")
    
    ## Params
    s3bname = event['queryStringParameters']['s3bname']
    logger.info( "{}".format(s3bname) ) 
    emoiText = event['queryStringParameters']['emoiText']
    logger.info( "{}".format(emoiText) ) 

    
    ## Generate Polly data from string to mp3
    polly = session.client("polly")
    filename = "voice_by_polly.mp3"
    try:
        response = polly.synthesize_speech(
                Text=emoiText,
                OutputFormat="mp3",
                VoiceId="Takumi")
        with closing(response["AudioStream"]) as stream:
            ## To Put in voice data 
            s3 = resource('s3')
            bucket = s3.Bucket(s3bname)
            bucket.put_object(Key=filename, Body=stream.read(), ACL='public-read')
    except BotoCoreError as error:
        logging.error(error)

    ## Return json to sample display.
    res = 'Hello from Lambda!'
    res = event
    return {
        'statusCode': 200,
        'body': json.dumps(res)
    }

image.png

フロント側ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>playaudio2</title>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<body>
<h1>心の声再生くん</h1>

<div>
<h2>俺の話を聞いてくれ<h2>
  <div> <img src="./myvoice.png"> </div>
<form>
<div>
<label for="s3bname">バケット名</label>
  <input  id="s3bname" type="text" value="★★S3バケット名★★" />
</div>

<div>
<label for="apigateway">APIGateway名</label>
  <input  id="apigateway" type="text" value="https://★★APIエンドポイント★★.execute-api.ap-northeast-1.amazonaws.com/default/emoi" />
</div>
<div>
<label for="emo">さけびたいこと</label>
  <input id="emo" type="text" value="今日は早く帰りましょう" >
</div>
<div>
  <input type="button" value="作ってみる" onclick="makeMyHeart()">
  <input type="button" value="叫んでみる" onclick="tryToEmoion()">
</div>

</form>
</div>




<script type="text/javascript">
function makeMyHeart(){
  const s3bname = $('#s3bname').val()
  const s3Path =
            "https://s3-ap-northeast-1.amazonaws.com/" +
            s3bname +
            "/voice.mp3";
  const apigatewayPath = $('#apigateway').val();
  const emoiText = $('#emo').val(); //document.getElementById('emo').value;

  console.log(apigatewayPath);
  console.log(emoiText);


  let resutl = $.ajax({
        url: apigatewayPath,
        type:'GET',
        data:{
            's3Path':s3Path,
            's3bname':s3bname,
            'emoiText':emoiText
        }
    })
    .done( (data) => {
        $('.result').html(data);
        console.log(data);
        //alert("Created");
    })
    .fail( (data) => {
        $('.result').html(data);
        console.log(data);
        //alert("Failed");
    })
    .always( (data) => {
      console.log("done");
    });

}

function tryToEmoion(){
  //s3バケットと 音声ファイルURLを作成する
  const s3bname = document.getElementById('s3bname').value;
  const s3Path =
            "https://s3-ap-northeast-1.amazonaws.com/" +
            s3bname +
            "/voice_by_polly.mp3";
            //"/voice.mp3";
  console.log( "音声:" + s3Path );
  // s3バケットに配置されるmp3 を再生する。
  let audioElem = new Audio();
      const param = new Date().getTime();
      const src = s3Path + "?cb=" + param;
      //audioElem.load(src);
      audioElem.src = src;
      audioElem.play();
}
</script>
</body>
</html>

image.png

さいごに: SkillBuilders

実際に学び始める際には、AWSには SkillBuildersという自己学習できるサイトが用意されているので、最後にそちらを紹介しておわりたいとおもいます。 (必ずしも初心入門社だけではないということが最近わかりました)

image.png

フィルタ機能で: 言語 を 「日本語」 にすると やりやすいよ。
image.png

参考:
https://explore.skillbuilder.aws/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0