はじめに
Azure Cloud ShellはMicrosoftが提供するブラウザベースのクラウドシェル環境です。Azure CLI、PowerShell、Git、Dockerなどの開発ツールがあらかじめインストールされており、通常はAzureポータル上部のCloud Shellアイコンからブラウザ内ターミナルとして利用します。
しかし、ブラウザベースでの利用には以下のような課題があります：
- コードエディタとの画面切り替えによるコンテキストスイッチの発生
- ブラウザとエディタ間での頻繁な画面遷移
- 開発フローの中断による生産性の低下
本記事では、VS Code内でAzure Cloud Shellを直接利用する方法を解説します。この統合により、ローカル環境構築の手間、ツールのバージョン管理の煩雑さ、ブラウザとエディタ間の往復を大幅に削減できます。
重要な変更点：Azure Account拡張機能の廃止について
重要な注意事項
従来利用されていた拡張機能「Azure Account」は2025年1月に廃止されました。現在は「Azure Resources for Visual Studio Code」拡張機能を使用する方法が推奨されています。
Azure Account拡張機能が廃止された背景：
- 認証基盤の刷新
- リソース管理機能の統合
- より統一されたAzure開発体験の提供
現在の推奨拡張機能：
セットアップの流れ
セットアップは以下の4つのステップで完了します：
- Node.jsのインストール
- Azure Resources拡張機能のインストール
- Azureへのサインイン
- Cloud Shellの起動
※ 本記事はWindows環境を想定しております。
Node.jsのインストール
Azure Resources拡張機能は内部でNode.jsを使用するため、事前にインストールが必要です。
インストール手順
-
Node.js公式サイトからLTS版をダウンロード
- ダウンロードしたインストーラーを実行
- インストールウィザードの指示に従って進行
- インストール完了後、PowerShellまたはコマンドプロンプトで動作確認：
node --version
npm --version
Azure Resources拡張機能のインストール
インストール手順
- VS Codeの左サイドバーにある拡張機能アイコン（四角形のアイコン）をクリック
- 検索欄に「azure resources」と入力
- 「Azure Resources」を選択
- [インストール] ボタンをクリック
- インストール完了まで待機
Azureへのサインイン
サインイン手順
-
Ctrl+Shift+Pでコマンドパレットを開く - 「Azure: Sign In」と入力し、表示された項目を選択
- ブラウザで認証画面が自動で開く
- Azureアカウントの認証情報を入力してログイン
- 認証完了後、VS Codeに戻る
Cloud Shellの起動
起動手順
- VS Codeのメニューバーから [ターミナル] → [新しいターミナル] を選択
- ターミナル右上の プロファイルメニュー（▼アイコン） をクリック
- 以下のいずれかを選択：
- [Azure Cloud Shell (Bash)]
-
[Azure Cloud Shell (PowerShell)]
- 初回起動時は接続に数秒かかる場合があります
接続確認
Cloud Shellが正常に起動したら、以下のコマンドで接続状態を確認できます：
# 現在のAzureアカウント情報を表示
az account show
# 利用可能なサブスクリプション一覧を表示
az account list --output table
正常に動作していれば、現在ログインしているAzureアカウントの詳細情報が表示されます。
トラブルシューティング
Node.jsの警告メッセージ
[DEP0040] DeprecationWarning: The `punycode` module is deprecated.
原因： Node.js 21以降での非推奨モジュールによる警告
対処法： 動作には影響しないため、警告は無視して問題ありません
認証エラーが発生する場合
対処法：
- VS Codeを完全に再起動
- コマンドパレットから「Azure: Sign Out」を実行後、再度サインイン
- 別ブラウザでAzureポータル（https://portal.azure.com）にアクセスできるか確認
Cloud Shellオプションが表示されない場合
対処法：
- Azure Resources拡張機能が正常にインストールされているか確認
- Azureへの認証が完了しているか確認
- VS Codeの再起動を実行
[Setup needed.]の状態で停止しCloud Shellが起動しない
サインインに使用したアカウントでブラウザを用いてAzure ポータルへサインインし、Azure Cloud Sehllの初期セットアップを実施
Node.js関連のエラーが発生する場合
対処法：
- Node.jsのバージョンが最新のLTS版か確認
- 古いバージョンの場合は最新版に更新
- 必要に応じてNode.jsの再インストールを実行
まとめ
VS Code内でAzure Cloud Shellを利用することで、以下のメリットが得られます：
- 開発効率の向上： ブラウザとエディタ間の切り替え時間を削減
- 統一された開発環境： コードエディタとクラウドツールの一元管理
- コンテキストスイッチの削減： 集中した開発作業の実現
Azure Account拡張機能の廃止により設定方法は変更されましたが、Azure Resources拡張機能を使用することで、より安定した統合環境を構築できます。
ぜひこの方法を活用して、より効率的なAzure開発を実現してください。