Serverless Dashboardを使ってみる。

https://t.co/ba0rOdAv2zhttps://t.co/E4uAfffobH

Serverlessのローカル開発はdashboardが便利やで。GUIで操作できるのでコマンドで迷わなくて済むし

— horike takahiro@Serverless Operations (@horike37) March 13, 2017

こんなツイートがあったので試してみました。
serverless/dashboard: Serverless Dashboard – A desktop application providing a UI for the Serverless Framework

インストール

$ git clone https://github.com/serverless/dashboard.git
$ cd dashboard/
$ tree -L 1
.
├── README.md
├── app
├── desktop
├── docs
├── package.json
├── postcss.config.js
├── scripts
├── server.js
├── static
├── webpack.config.base.js
├── webpack.config.development.js
├── webpack.config.electron.js
├── webpack.config.eslint.js
└── webpack.config.production.js

5 directories, 9 files

セットアップ

$ npm install

ここでコケる場合は大体Nodeのバージョンによるものなので、nvmなり使って最新版に切り替えておきましょう。

ダッシュボードの起動

ターミナルの画面を２つ立ち上げて、それぞれ実行しましょう。

$ npm run dev
$ npm start

npm startだけやるとこういうエラーが出ます。

使ってみる

それでは使ってみましょう。
createのほうを選ぶと、ディレクトリ・名前・ランタイムを選択する画面に移ります。

プロジェクトを作成すると、以下のようなダッシュボードが表示されます。

ざっと使ってみた感じだと、serverlessコマンドをGUIから実行するラッパーツールという印象です。ボタンを押して実行して、右側の黒画面に出てくる実行ログを見るという使い方でしょうか。

デプロイ

デプロイ先のリージョンやAWS-CLIのプロファイル、プロジェクトのステージ名をGUIから指定できます。

Lambda functionの追加やイベントの設定など

serverless.ymlの編集はこの画面から実行できませんので、エディタを開いて直接変更しましょう。Electronで動くアプリなので、[F5キー]で更新するとserverless.ymlの最新情報が反映されます。

Lambdaを実行する

Invokeする時のJSONはGUIから指定可能です。ただしローカル実行には現時点で対応していないので、先にデプロイを行いましょう。

使い所

logのtail表示などはまだできない様子ですが、slsコマンドを都度入力するのが面倒くさいという方はこれを使ってポチポチ触っていくほうが気軽かもしれません。
deploy functionのような関数名まで指定しないといけないタイプのコマンドについては、多分こっちを使ったほうが楽かなと思います。

気がかりな点としては、昨年末からアップデートがされていない様子でしょうか。