VSCode の Azure Tools 拡張機能を一通り試してみた

VS Code から Azure を使おうと思ったときに、真っ先に出てくる Azure Tools で何が出来るのかをまとめました。
Tools の名前の通り 10 種類の主要なものが含まれており、 Azure を初めて触る人はどれかしらのサービスから使い始めると思うため、どなたでも役に立つ拡張機能だと思います。

拡張機能の全ての機能や深い部分は解説しないため、サクッとこんな機能があるんだというのを確認したい人向けの記事です。

[![Image from Gyazo](https://i.gyazo.com/20e8640c4c7d83f29ec98e8436df09f4.png)](https://gyazo.com/20e8640c4c7d83f29ec98e8436df09f4)

## 全般

- サインイン、サインアウト

拡張機能の説明に記載されている通り、まずは Azure へのサインインが必要です。 Azure Explorer またはコマンドパレットからサインインが可能です。サインアウトはコマンドパレットから可能です。

[![Image from Gyazo](https://i.gyazo.com/07d9b87cd4c9760652a44f26f0fbb637.png)](https://gyazo.com/07d9b87cd4c9760652a44f26f0fbb637)

[![Image from Gyazo](https://i.gyazo.com/e64d69dccbf2d13dc2224a0d088c8a54.png)](https://gyazo.com/e64d69dccbf2d13dc2224a0d088c8a54)

## Azure App Service

- Web App の設定を確認、変更
- Web App をデプロイ
- Web App の開始、停止、再起動、削除
- Log の確認
- Deployment Slots の切り替え
- 新しい Web App を作成

主要な作業はここから可能です。右クリックで色々出てきます。
新しい Web App の作成は名前入力、 OS, ランタイムの三つの操作だけで作成できます。プランやリソースグループなどもう少し細かい情報を設定したい場合は Advanced を使えば対応可能です。

[![Image from Gyazo](https://i.gyazo.com/769a22553a3ebb8ef79e5179fda533e3.png)](https://gyazo.com/769a22553a3ebb8ef79e5179fda533e3)

[![Image from Gyazo](https://i.gyazo.com/2df70a3b5f15dea808777724fa24902b.png)](https://gyazo.com/2df70a3b5f15dea808777724fa24902b)

> コマンドパレット

[![Image from Gyazo](https://i.gyazo.com/e8cb1c7b1a6c461b1e32557557d25760.png)](https://gyazo.com/e8cb1c7b1a6c461b1e32557557d25760)

## Azure Functions

- Azure Functions の設定を確認、変更
- Azure Functions をデプロイ
- Azure Functions の開始、停止、再起動、削除
- Log の確認
- 新しい Azure Functions を作成

Azure App Service と同じく主要な作業はここから可能です。右クリックで色々出てきます。これも数回操作するだけで新しい Functions が作成できます。 Functions を作成したあと、 HTTP トリガーなどを使用した Function を作成してデバッグ、実行などが可能です。

[![Image from Gyazo](https://i.gyazo.com/c6fc463fe4d7d15a65e6352fb17185da.png)](https://gyazo.com/c6fc463fe4d7d15a65e6352fb17185da)

[![Image from Gyazo](https://i.gyazo.com/6d28dd21c1fe1dae0afdaaa2b962777f.png)](https://gyazo.com/6d28dd21c1fe1dae0afdaaa2b962777f)

[![Image from Gyazo](https://i.gyazo.com/fbf8fb11d0972779d183d199272a8abf.png)](https://gyazo.com/fbf8fb11d0972779d183d199272a8abf)

> コマンドパレット

[![Image from Gyazo](https://i.gyazo.com/9bb6bafab54268ac8f29889956b30b62.png)](https://gyazo.com/9bb6bafab54268ac8f29889956b30b62)

## Azure Databases

- Cosmos DB のデータベース、コレクションの作成や削除
- Cosmos DB のドキュメント（レコード）の CRUD 操作
- 新しい Cosmos DB を作成
- 新しい Azure Database for PostgreSQL を作成

Cosmos DB の主要な作業はここから可能です。データの中身もエディターから参照したり更新したりと言ったことが可能なので便利です。 Azure Database for PostgreSQL は作ることだけ可能で、なぜか Azure SQL Database は作れませんでした。
この拡張機能は Cosmos DB で使うのがよいと思います。 PostgreSQL や Azure SQL Database などの RDBMS 操作は出来ないため、 SQL Server Management System や DataGrip などのデータベース IDE を使う必要があります。

[![Image from Gyazo](https://i.gyazo.com/b43eca0377be33851e20197b2cdcaa0d.png)](https://gyazo.com/b43eca0377be33851e20197b2cdcaa0d)

## Azure Storage

- Azure Storage アカウントの管理
- Blob, File Storage の CRUD 操作
- Queue, Table Storage の一覧表示
- 新しい Azure Storage アカウントを作成

ストレージの中では一般的な Blob Storage の主要な操作が可能です。 CRUD 操作が出来るためわざわざ Portal や別アプリの Storage Explorer を使う必要がないのは便利だと思います。Queue や Table の操作だったり、詳細な情報が知りたい場合は Storage Explorer を使うほうがよいです。 Storage Explorer で開くという操作があるため、 VS Code から開くことが可能だと思います。

[![Image from Gyazo](https://i.gyazo.com/4febab67dec3fbfd22b4692e510f3438.png)](https://gyazo.com/4febab67dec3fbfd22b4692e510f3438)

[![Image from Gyazo](https://i.gyazo.com/edd7b1ff5c826d2912351f0b5b570443.png)](https://gyazo.com/edd7b1ff5c826d2912351f0b5b570443)

> コマンドパレット

[![Image from Gyazo](https://i.gyazo.com/e4f4308c91b74a6d84c39c433d2cc26a.png)](https://gyazo.com/e4f4308c91b74a6d84c39c433d2cc26a)

## Azure Virtual Machines (VM)

- Virtual Machine の開始、停止、再起動、削除
- Virtual Machine に SSH キーを追加
- Virtual Machine の IP アドレスを取得
- 新しい Virtual Machine を作成

VM の作成や起動などが可能です。 Portal を開かずに VM を停止したり開始したりできるため、 VM の起動停止を頻繁に行う人におすすめです。この拡張機能で VM を作成するとローカルフォルダ の ~/.ssh に鍵ファイルが自動的に作成され config ファイルに仮想マシンへの接続設定が自動的に書き込まれます。
別の拡張機能 [Remote Development - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) (Remote - SSH) と組み合わせることで、 VS Code だけで VM の作成から SSH 接続までシームレスに行うことができます。

[![Image from Gyazo](https://i.gyazo.com/86733b8b3d0317b3224f1b3de3aae28a.png)](https://gyazo.com/86733b8b3d0317b3224f1b3de3aae28a)

[![Image from Gyazo](https://i.gyazo.com/6ac8a53afaaedee8d6159f559046f2c9.png)](https://gyazo.com/6ac8a53afaaedee8d6159f559046f2c9)

[![Image from Gyazo](https://i.gyazo.com/9d4b8843ddb0c619cdadd815263cdf3e.png)](https://gyazo.com/9d4b8843ddb0c619cdadd815263cdf3e)

[![Image from Gyazo](https://i.gyazo.com/565962b2713ee528b18e5d2d7151bed5.png)](https://gyazo.com/565962b2713ee528b18e5d2d7151bed5)

> コマンドパレット

[![Image from Gyazo](https://i.gyazo.com/dd9850af39c6115caf9a7bfba44c1fb1.png)](https://gyazo.com/dd9850af39c6115caf9a7bfba44c1fb1)

## Azure Resource Groups

- Resource Group の一覧や中身確認、削除
- 新しい Resource Group を作成

リソースグループの一覧や中身を参照できます。 App Service Plan の設定値なども参照可能です。 VS Code から新しい Web App を作成などで自動的に作られたリソースグループも削除できるため、 Azure Portal を開いてリソースを完全削除するのがめんどくさい人におすすめです。

[![Image from Gyazo](https://i.gyazo.com/04487a569b0583602d83820b6f212632.png)](https://gyazo.com/04487a569b0583602d83820b6f212632)

[![Image from Gyazo](https://i.gyazo.com/f022ade8ccee05e32d61761dd0cbd7c0.png)](https://gyazo.com/f022ade8ccee05e32d61761dd0cbd7c0)

> コマンドパレット

[![Image from Gyazo](https://i.gyazo.com/9bf4ab3b05de9b854e2a76eff33b4805.png)](https://gyazo.com/9bf4ab3b05de9b854e2a76eff33b4805)

## Azure CLI Tools

- Azure CLI のコード補完
- Azure CLI の実行 (Terminal を使って)

とても便利です。 Azure CLI を VS Code を使って書く人は入れることをおすすめします。 `.azcli` という拡張子を持つ Azure CLI ファイルに対してコード補完や、ショートカットキーでの Azure CLI の実行が可能になります。

[![Image from Gyazo](https://i.gyazo.com/69d5788728564bd7e76c7da3141131ce.png)](https://gyazo.com/69d5788728564bd7e76c7da3141131ce)

[![Image from Gyazo](https://i.gyazo.com/2fdc518d6d0b3bbf8d0257c838377f81.png)](https://gyazo.com/2fdc518d6d0b3bbf8d0257c838377f81)

> コマンドパレット

[![Image from Gyazo](https://i.gyazo.com/4c3fd919858bfe1358960740e03b3da1.png)](https://gyazo.com/4c3fd919858bfe1358960740e03b3da1)

## Azure Resource Manager (ARM) Tools

- Azure Resource Manager Template のスニペット追加
- Azure Resource Manager Template のコード補完
- Azure Resource Manager Template のナビゲーション
- Azure Resource Manager Template のエラーチェック

ARM Template に対して様々な便利機能が追加されます。 Azure 構成管理ツールに ARM Template を使っている人は便利だと思います。拡張機能の説明ページが細かく色々説明してくれています。

[![Image from Gyazo](https://i.gyazo.com/f4d5af0682b5a03b19e2c63884193bc3.png)](https://gyazo.com/f4d5af0682b5a03b19e2c63884193bc3)

[![Image from Gyazo](https://i.gyazo.com/669da27bf83fe1ea6fab7cf8d9e63d26.png)](https://gyazo.com/669da27bf83fe1ea6fab7cf8d9e63d26)

> コマンドパレット

[![Image from Gyazo](https://i.gyazo.com/5622efc1e5ccb16f88834a85dfa9c415.png)](https://gyazo.com/5622efc1e5ccb16f88834a85dfa9c415)

## Azure Pipelines

- Azure Pipelines YAML のコード補完
- Azure Pipelines YAML のエラーチェック

Azure Pipelines YAML を VS Code で書く人向けの拡張機能です。ミニマムな拡張機能なのであまり機能は多くないです。

[![Image from Gyazo](https://i.gyazo.com/b9a872d58b5814e2199f16ccde1791ba.png)](https://gyazo.com/b9a872d58b5814e2199f16ccde1791ba)

[![Image from Gyazo](https://i.gyazo.com/3d9028f9a3bb97ac41bf3b298fd1ba31.png)](https://gyazo.com/3d9028f9a3bb97ac41bf3b298fd1ba31)

> コマンドパレット

[![Image from Gyazo](https://i.gyazo.com/9283240edfee784fb0b4c4d8df029fc1.png)](https://gyazo.com/9283240edfee784fb0b4c4d8df029fc1)

## Docker

- Azure Container Registry のリポジトリ管理
- Azure Container Registry にイメージファイルを Push / Pull
- Azure Container Registry のイメージファイル削除
- 新しい Azure Container Registry を作成
- Docker の管理など

主な機能は Docker を管理するための拡張機能です。それだけで一つ記事が書けるくらい便利なのですが、今回は Azure に関しての機能のみ見ていきます。
Azure Container Registry の内容確認やイメージファイルの Push / Pull することが出来ます。この拡張機能は Azure Explorer ではなく Docker Explorer で利用します。 CLI コマンドを書かずに GUI だけで Push / Pull したり出来るのはすごく楽だと思います。

[![Image from Gyazo](https://i.gyazo.com/05950fc07e5e312f1b58afe4b3e6783c.png)](https://gyazo.com/05950fc07e5e312f1b58afe4b3e6783c)

[![Image from Gyazo](https://i.gyazo.com/fc35e7cbaa30d89e87a3c444db2f3843.png)](https://gyazo.com/fc35e7cbaa30d89e87a3c444db2f3843)

[![Image from Gyazo](https://i.gyazo.com/e5a5d6ed7f08bd24faea0ebd8891d507.png)](https://gyazo.com/e5a5d6ed7f08bd24faea0ebd8891d507)

[![Image from Gyazo](https://i.gyazo.com/436be8b08a4d5b8df14064449f0fba62.png)](https://gyazo.com/436be8b08a4d5b8df14064449f0fba62)

> コマンドパレット

[![Image from Gyazo](https://i.gyazo.com/d28e91b50e2191a51966ca1ed133c53f.png)](https://gyazo.com/d28e91b50e2191a51966ca1ed133c53f)

## 参考リンク

- [Azure Tools - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack)