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"
        }
    ]
}

DynamoDB Consoleではただ参照するだけでなく検索/追加/JSONでの確認/編集/削除ができます。

PK、SKやGSIを使った検索、フィルター

パーティションキー、ソートキーを使った検索や、GSIを切替ての検索。
フィルター条件の指定ができます。

「items」を右クリックすると検索条件の保存ができます。

表示属性の制限

表示する項目の属性を制限して、確認したい項目だけに絞ることができます。

項目の追加

＋マークからエディターを開いて新しい項目を追加できます。
JSON形式で記述し「Execute」で確定します。
確定後リフレッシュすることで新しい項目を読み込みます。

追加も変更も確定前の変更を貯めておける便利仕様になっています。

項目の確認

項目をダブルクリックすることでJSON形式でエディター表示されます。

そのまま編集することで更新することができます。

Ctrlキーを押しながら属性をダブルクリックすることで、任意の属性を範囲選択した状態でエディターを開けます。

項目の編集

表示されたJSONを編集して保存すると更新確定前の状態になります。

確定するまでは更新前後の差分を取ることができます。

「Execute」で更新を確定します。

項目の複製

項目にホバーして右クリックで項目のコピーができます。

PKとSKの組み合わせを重複がないように変えないと登録エラーになるので注意。

項目の削除

項目にホバーして右クリックで項目の削除ができます。

これも即時反映ではなく「Execute」で確定するまで反映されません。

項目や属性をクリップボードにコピー

項目や属性を選択してクリップボードにコピーできます。

項目のピン止め

項目にホバーして右クリックで項目のピン止めができます。

大量のデータを確認しているときなど便利です。

注意点

追加、変更時にJSON構文エラーがあると、Executeボタンが押せません。特にエラーメッセージが出ないのでなかなか気づかず苦労しました。
残念ながらセット型の作成、更新はできません。

DyanmoDBテーブルのデータをローカルからGUIで確認できるツールはいくつかありますが、どれも使い勝手がイマイチだったり有償のものだったりなのですが、私の調べた中では断トツで導入しやすく使いやすいです！
VSCode上で拡張機能として使えるのも開発時にとても便利。

ただ、こんな便利な拡張機能なのにGitHubのスターがとても少ない😢

私と同じように開発が楽になった方は是非スターを押したり作者にコーヒーをおごってあげましょう☕