2020/7/15に開催された「VS Code Meetup #6」での私(Masaki Suzuki)の発表資料です。

1. VS Code Meetup #6
VS Code + Serverless Frameworkによる
AWS環境構築＆デプロイ確認
Author: Masaki Suzuki
@makky12

2. VS Code Meetup #6
自己紹介
• 名前：鈴木 正樹 (Masaki Suzuki)
• 在住：愛知県半田市
• 職業：フリーランスエンジニア
• 業務：サーバーレスアプリのアーキテクチャ構築/設計/開発 など
• 技術：
• AWS/Azure/Serverless Framework/Swagger/Vue.js など
• 各種イベント・SNS・ブログでのクラウド普及活動(個人的に)
• MS系技術(Power Platform/TypeScriptなど)
• SNS
http://makky12.hatenablog.com/
https://github.com/smt7174
@makky12 (Masaki Suzuki＠フリーランスクラウドエンジニア)
名古屋市
豊橋市
中部国際空港
(セントレア)
名古屋市
豊橋市
中部国際空港
(セントレア)
半田市

3. VS Code Meetup #6
内容
• 今回の発表について
• 今回登場するツールなど
• VS Codeが良かった点
• Serverless Frameworkが良かった点
• デモ(動画)
• 構築する際の注意
• まとめ

4. VS Code Meetup #6
今回の発表について
• 1年間サーバーレスSPA開発のリードエンジニアを担当
• プロジェクト自体は、取りあえず無事終了
• 上記SPAのAWS環境をVSCode+Serverless Frameworkで構築
• その際の感想・ノウハウなど
• 「クラウド環境を構築する」際の一助になれば…と思っています
• 特に「初めて構築する」「構築の仕方が分からない」人にとって
※資料URL：https://vscode.connpass.com/event/176699/presentation/

5. VS Code Meetup #6
今回登場するツールなど
• Visual Studio Code
• https://azure.microsoft.com/ja-jp/products/visual-studio-code/
• Serverless Framework(サーバーレスアプリ構成管理・デプロイツール)
• https://www.serverless.com/
• Rest Client(VS Code拡張機能のRESTクライアントソフト)
• https://marketplace.visualstudio.com/items?itemName=humao.rest-client

6. VS Code Meetup #6
VS Codeが良かった点 1
• クラウドには、CLIコマンドでの機能が充実
• AWS CLI, Azure CLI など
• 環境構築(≒デプロイ)を行う機能(=サービス)も、CLIに対応
• CloudFormation, Azure Template Manager(ARM) など
• CLIコマンドから、環境構築を行うことができる(Infrastructure as Code)
• CLI(ターミナル)が使いやすい
• ファイル編集→即CLIコマンド実行…が行いやすい(ウィンドウ切替不要)
• カスタマイズしやすい
• Settings.jsonによる設定
• 自分の好きなターミナルを使用・追加することも可能

7. VS Code Meetup #6
VS Codeが良かった点 2
• 拡張機能による、作業の効率化・便利化
• ファイル編集の効率化
• 入力補助・チェッカー・フォーマッタ など
• Rest APIの動作確認(実行したLambdaの確認)
• Rest Client など
• AWS・Azure公式の拡張機能など
• AWS Toolkit・Azure Tools・ARM Template Viewer など
• 拡張機能を用いて、作業を効率的に行える

8. VS Code Meetup #6
Serverless Frameworkが良かった点 1
• 定義ファイル(serverless.yml)の記載がシンプル
• CloudFormationのリソース定義より、シンプルに書ける(特にLambda)
• 各種トリガの定義も非常にシンプル
• CloudFormationのリソース定義そのままの記法も可能
• プラグインを用いた機能拡張が可能
• Deployment Bucket：デプロイ先バケットの各種設定を行える(バケット名など)
• Split Stacks：デプロイリソース数に合わせて、スタックを自動分割する
• CloudFormationでは、1スタックのリソース数は200が上限

9. VS Code Meetup #6
Serverless Frameworkが良かった点 2
• デプロイなど、必要な作業は全てCLIコマンド(slss xxxx)で行う
• VS Codeとの相性が良い
• テンプレートファイルに、最低限の定義が行われている
• API Gateway, Lambdaに関しては、必要最低限は定義済み
• アカウント関連情報(リージョン, profileなど)を定義すれば、環境構築可能
• 「とりあえず環境構築する」だけなら、非常に短い時間で行える

10. VS Code Meetup #6
Rest Clientが良かった点
• VS Codeの拡張機能である
• VS Codeの拡張機能から検索してインストールを実行するだけ
• 「Rest」と入力するだけでトップに表示される
• 相当メジャーである
• VS CodeのRestクライアントソフトとしては、1, 2を争うほどメジャー
• ネット上にも情報量が多く、情報収集に苦労しない
• 定義、実行が簡単
• 必要な定義が少なく、導入しやすい
• 右図参照(Post実行)
• 実行するのが非常に簡単
• Ctrl+Alt+Rキーを押すだけ
POST https://example.com/abc
Authorization: Bearer xxxxxx
Content-Type:application/json
{
“hoge”: “hogehoge”
“fuga”: “fugafuga”
}

11. VS Code Meetup #6
デモ(動画)
• 実際に、VSCode+Serverless Frameworkで
• AWSにリソース(API Gateway+Lambda)を作成する
• Rest Clientにて動作確認を行う
を行う動画です
※Serverless Framework, Rest Clientはインストール済の状態です
※AWS CLIのcredential情報(profile)は設定済の状態です

12. VS Code Meetup #6
まとめ
• VS Codeは、クラウド環境構築と相性がいい
• CLI(ターミナル)が使いやすく、ファイル修正→コマンド実行…が便利
• クラウドはCLIコマンドでの機能が多いため、CLIが使いやすいのは便利
• 各種拡張機能を用いて、作業の効率化・便利化を実現できる
• ファイル編集、フォーマッタ、Rest Clientによる動作確認 など
• クラウド環境構築ツールを有効活用する
• Serverless Framework, Terraform など
• 各種操作をCLIコマンドで行うため、VS Codeと相性が良い
• 独自の機能拡張(プラグイン)を利用し、さらに使いやすくする

13. VS Code Meetup #6
以上です
ご清聴ありがとうございました