VS Code Meetup #2 - Live Share編 2020/1/23

1. 1
2020/01/23
#vscodejp
Shinsuke Saito (@masalabo716)
インフラエンジニアに送る Visual Studio Code
～Azure 編～

2. 自己紹介
• 名前 : Shinsuke Saito (斉藤 慎輔)
• Twitter : @masalabo716
• ブログ : https://blog.masa-labo.net
• 所属 : AvePoint Japan 株式会社
• 属性 : MS 系インフラエンジニア
• お気に入り : しろたん
• Home 365 環境 : M365 E5 導入済み

3. インストールしている拡張機能が
70 になりました！！(先月比+12)

4. VSCode を Azure 向けにカスタマイズ！

5. VSCode の Azure 向け拡張機能
⚫VSCode は MS 製のエディターなだけあり、
Azure での開発やリソースの作成・管理を行うのに
便利な拡張機能が多数公開されています！
⚫今回は、インフラエンジニア向けなので、
管理・運用の利便性を上げたり、ARM テンプレートを
使って IaC (Infrastructure as Code) がはかどる拡張機能を
ピックアップしていきます。
5

6. VSCode の Azure 向け拡張機能
⚫まずは、拡張パック「Azure Tools」をインストールしましょう！
6
“Azure” で MARKETPALCE を
検索すると TOP に出ます！

7. VSCode の Azure 向け拡張機能
⚫Azure Account 拡張機能で Azure にサインイン
7
Ctrl (cmd) + Shift + P で
コマンドパレットを開き
「Azure Sign in」と入力
Azure Sign in を実行するには
「Azure Account」をインストール

8. VSCode の Azure 向け拡張機能
⚫VSCode から Cloud Shell に接続 (要 Node.js)
8
Ctrl (cmd) + Shift + P で
コマンドパレットを開き
「Azure Open PowerShell」と入力
1度サインインしておけば、
コマンドパレットから実行するだけ！

9. VSCode の Azure 向け拡張機能
⚫Azure 向け拡張機能を利用
9
インストールされている拡張機能に
よって扱えるサービスが増える
新規作成やアプリのデプロイも可能
サイドバーで
Azure アイコンをクリック

10. VSCode の Azure 向け拡張機能
⚫Azure 向け拡張機能を利用
10
Logic Apps の Designer を表示
※編集不可
Logic Apps を JSON で表示
※編集してアップロード可能

11. VSCode の Azure 向け拡張機能
⚫ARM テンプレート作成支援の拡張機能
11
Azure VM の起動と停止
ARM Template の LSP 機能で
アウトラインを表示

12. VSCode の Azure 向け拡張機能
⚫ARM テンプレート作成支援の拡張機能
12
「ARM Template Viewer」で
ビジュアル表示

13. VSCode の Azure 向け拡張機能
⚫Automation アカウントで Runbook の作成
13
コマンドパレットから
Runbook の発行や実行を実施
Automation アカウントに
保存されている Runbook 一覧

14. 今回使用した拡張機能

15. 今回使用した拡張機能
⚫Azure Tools
https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack
⚫Azure Account
https://marketplace.visualstudio.com/items?itemName=ms-vscode.azure-account
⚫Azure Logic Apps
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-logicapps
⚫Azure Virtual Machine Explorer
https://marketplace.visualstudio.com/items?itemName=formulahendry.azure-virtual-machine-explorer
15

16. 今回使用した拡張機能
⚫Azure Resource Manager (ARM) Tools
https://marketplace.visualstudio.com/items?itemName=msazurermtools.azurerm-vscode-tools
⚫ARM Template Viewer
https://marketplace.visualstudio.com/items?itemName=bencoleman.armview
⚫Azure Automation
https://marketplace.visualstudio.com/items?itemName=AwesomeAutomationTeam.azureautomation
16

17. 参考情報

18. Docs 参考情報
⚫Visual Studio Code を使って
Azure Resource Manager テンプレートを作成する
https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/templates/use-vs-code-to-create-
template
⚫クイック スタート:Visual Studio Code を使って
Azure Resource Manager テンプレートを作成する
https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/templates/quickstart-create-
templates-use-visual-studio-code?tabs=CLI
18

19. ご清聴ありがとうございました！