Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vscodemeetup6

413 views

Published on

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

Published in: Engineering
  • Be the first to comment

Vscodemeetup6

  1. 1. VS Code Meetup #6 VS Code + Serverless Frameworkによる AWS環境構築&デプロイ確認 Author: Masaki Suzuki @makky12
  2. 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. 3. VS Code Meetup #6 内容 • 今回の発表について • 今回登場するツールなど • VS Codeが良かった点 • Serverless Frameworkが良かった点 • デモ(動画) • 構築する際の注意 • まとめ
  4. 4. VS Code Meetup #6 今回の発表について • 1年間サーバーレスSPA開発のリードエンジニアを担当 • プロジェクト自体は、取りあえず無事終了 • 上記SPAのAWS環境をVSCode+Serverless Frameworkで構築 • その際の感想・ノウハウなど • 「クラウド環境を構築する」際の一助になれば…と思っています • 特に「初めて構築する」「構築の仕方が分からない」人にとって ※資料URL:https://vscode.connpass.com/event/176699/presentation/
  5. 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. 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. 7. VS Code Meetup #6 VS Codeが良かった点 2 • 拡張機能による、作業の効率化・便利化 • ファイル編集の効率化 • 入力補助・チェッカー・フォーマッタ など • Rest APIの動作確認(実行したLambdaの確認) • Rest Client など • AWS・Azure公式の拡張機能など • AWS Toolkit・Azure Tools・ARM Template Viewer など • 拡張機能を用いて、作業を効率的に行える
  8. 8. VS Code Meetup #6 Serverless Frameworkが良かった点 1 • 定義ファイル(serverless.yml)の記載がシンプル • CloudFormationのリソース定義より、シンプルに書ける(特にLambda) • 各種トリガの定義も非常にシンプル • CloudFormationのリソース定義そのままの記法も可能 • プラグインを用いた機能拡張が可能 • Deployment Bucket:デプロイ先バケットの各種設定を行える(バケット名など) • Split Stacks:デプロイリソース数に合わせて、スタックを自動分割する • CloudFormationでは、1スタックのリソース数は200が上限
  9. 9. VS Code Meetup #6 Serverless Frameworkが良かった点 2 • デプロイなど、必要な作業は全てCLIコマンド(slss xxxx)で行う • VS Codeとの相性が良い • テンプレートファイルに、最低限の定義が行われている • API Gateway, Lambdaに関しては、必要最低限は定義済み • アカウント関連情報(リージョン, profileなど)を定義すれば、環境構築可能 • 「とりあえず環境構築する」だけなら、非常に短い時間で行える
  10. 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. 11. VS Code Meetup #6 デモ(動画) • 実際に、VSCode+Serverless Frameworkで • AWSにリソース(API Gateway+Lambda)を作成する • Rest Clientにて動作確認を行う を行う動画です ※Serverless Framework, Rest Clientはインストール済の状態です ※AWS CLIのcredential情報(profile)は設定済の状態です
  12. 12. VS Code Meetup #6 まとめ • VS Codeは、クラウド環境構築と相性がいい • CLI(ターミナル)が使いやすく、ファイル修正→コマンド実行…が便利 • クラウドはCLIコマンドでの機能が多いため、CLIが使いやすいのは便利 • 各種拡張機能を用いて、作業の効率化・便利化を実現できる • ファイル編集、フォーマッタ、Rest Clientによる動作確認 など • クラウド環境構築ツールを有効活用する • Serverless Framework, Terraform など • 各種操作をCLIコマンドで行うため、VS Codeと相性が良い • 独自の機能拡張(プラグイン)を利用し、さらに使いやすくする
  13. 13. VS Code Meetup #6 以上です ご清聴ありがとうございました

×