Serverless Consoleを使ってVSCodeでのAWSサーバーレス開発を加速させる🚀

Last updated at 2022-08-23Posted at 2022-07-06

Serverless Consoleとは

Serverless ConsoleというAWSでのサーバーレス開発にうってつけなVS Code拡張機能を見つけたのでご紹介。

準備

適当なServelessアプリを作ります。

$ serverless -v
Framework Core: 2.70.0
Plugin: 5.5.2
SDK: 4.3.0
Components: 3.18.1
$ serverless create --template aws-python3 --name MyServerlessApp --path MyServerlessApp

handler.py

import json
import boto3
import logging
from decimal import Decimal

logger = logging.getLogger()
logger.setLevel(logging.INFO)

dynamodb = boto3.resource("dynamodb")
table = dynamodb.Table("MyServerlessApp")

def decimal_default_proc(obj):
    if isinstance(obj, Decimal):
        return float(obj)
    raise TypeError


def hello(event, context):

    res = table.scan()
    items = res.get("Items")

    logger.info(items)

    response = {
        "statusCode": 200,
        "body": json.dumps(items, indent=2, default=decimal_default_proc)
    }

    return response

serverless.yml

service: MyServerlessApp

frameworkVersion: '2'

provider:
  name: aws
  runtime: python3.8
  lambdaHashingVersion: 20201221
  stage: api
  region: ap-northeast-1
  iam:
    role:
      statements:
        - Effect: "Allow"
          Action:
            - dynamodb:Scan
          Resource: "arn:aws:dynamodb:${self:provider.region}:*:table/MyServerlessApp"

resources:
  Resources:
    DynamoDbTable:
      Type: 'AWS::DynamoDB::Table'
      Properties:
        TableName: MyServerlessApp
        AttributeDefinitions:
          - AttributeName: id
            AttributeType: S
        KeySchema:
          - AttributeName: id
            KeyType: HASH
        ProvisionedThroughput:
          ReadCapacityUnits: 1
          WriteCapacityUnits: 1

functions:
  hello:
    handler: handler.hello
    timeout: 29
    events:
      - http:
          path: /hello
          method: get
          integration: lambda_proxy

$ serverless deploy
～中略～
....................................
Serverless: Stack update finished...
Service Information
service: MyServerlessApp
stage: api
region: ap-northeast-1
stack: MyServerlessApp-api
resources: 12
api keys:
  None
endpoints:
  GET - https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/api/hello
functions:
  hello: MyServerlessApp-api-hello
layers:
  None

$ curl https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/api/hello
[]

$ aws dynamodb put-item --table-name MyServerlessApp --item '{"id":{"S":"001"}, "name":{"S":"foo"}, "list":{"L":[{"S":"foo"}, {"S":"bar"}]}}'
$ aws dynamodb put-item --table-name MyServerlessApp --item '{"id":{"S":"002"}, "name":{"S":"bar"}, "map":{"M":{"foo":{"N":"1"}, "bar":{"N":"2"}}}}'

$ curl https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/api/hello
[
  {
    "id": "001",
    "name": "foo",
    "list": [
      "foo",
      "bar"
    ]
  },
  {
    "map": {
      "bar": 2.0,
      "foo": 1.0
    },
    "id": "002",
    "name": "bar"
  }
]

Serverless Console

Serverless Consoleには大きく２つの機能があり、CloudWatch Logsを確認する機能とDynamoDBテーブルのデータを検索/追加/確認/編集/削除する機能です。

拡張機能をインストールしたら雷アイコンがサイドバーにできるのでそこから利用します。

Logs

LogsとなっていますがCloudWatch Logs以外にLambdaやDynamoDBもここから追加できます。

serverless.yml から接続定義を作るやり方。

CloudFormationスタックから接続定義を作るやり方。

マニュアルでロググループを選択して接続定義を作るやり方の三種類あります。

接続定義を作成すればこのようにCloudWatch Logの参照/検索がVSCode上で行えるようになります。

接続定義は.vscode/settings.jsonに書かれるので、AWSプロファイルを取り決めておけばプロジェクトでシェアすることも可能です。

settings.json

{
    "serverlessConsole.services": [
        {
            "type": "custom",
            "title": "MyServerlessApp",
            "timeOffsetInMs": 0,
            "awsProfile": "default",
            "items": [
                {
                    "title": "/aws/lambda/MyServerlessApp-api-hello",
                    "tabs": [
                        {
                            "region": "ap-northeast-1",
                            "title": "dev",
                            "logs": "/aws/lambda/MyServerlessApp-api-hello"
                        }
                    ]
                }
            ]
        }
    ]
}

DynamoDB

続いてDynamoDBですが、こちらも同じようにプロファイルとリージョンを選んで接続定義を作るだけです。
エンドポイントは任意のURLを指定できるのでDynamoDB Localを使った開発にも対応できます。

接続定義を作るとこのようにVSCode上でテーブルの項目が参照できました！

こちらも同じように接続定義が.vscode/settings.jsonに書かれます。

settings.json

{
    "serverlessConsole.services": [
        {
            "type": "dynamodb",
            "title": "MyServerlessApp",
            "tableName": "MyServerlessApp",
            "awsProfile": "default",
            "region": "ap-northeast-1"
        }
    ]
}