Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Vscodemeetup6

450 visualizaciones

Publicado el

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

Publicado en: Ingeniería
  • Sé el primero en comentar

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 以上です ご清聴ありがとうございました

×