Share via

Visual Studio Code と Azure App Service の連携で実現できること

  • Article

このポストは、5 月 11 日に投稿された Visual Studio Code and Azure App Service – a perfect fit の翻訳です。

先日の Visual Studio Code (英語) の発表を聞いて、即座に、Azure App Service (英語) にデプロイしたプロジェクトと連携させることができないかと考えた方もいらっしゃるのではないでしょうか。私もその中の 1 人で、//build2015 (英語) でのセッションを終えてからサンフランシスコに戻るまでの間に (同僚の David Ebbo の協力を得て)、そのたたき台を作ることに成功しました。これで、Visual Studio Code を使用して Azure App Service で実行される Node.js アプリを開発し、git push を実行して Azure クラウドに発行することができます。

以下に説明する手順を実行することで、次のような成果物を作成できます。

  • Azure App Service の Web アプリを Node.js で実装
  • GitHub リポジトリを Web アプリと同期 (マスター ブランチをコミットするたびに、GitHub Hook を使用して新しいバージョンの Web アプリを発行)
  • GitHub リポジトリにリモートとしてプッシュするようにローカル Git リポジトリを設定
  • ローカル Git リポジトリを使用するように Visual Studio Code ワークスペースを構成
  • 最終的には、Visual Studio Code で git push を実行すると、Azure クラウドで稼働中のアプリケーションが変更

 

システム要件

これを実現するためには、以下の項目をインストールまたは利用可能にする必要があります。

  1. Azure サブスクリプション (こちらのページからサインアップ)
  2. Visual Studio Code (インストール手順、英語)
  3. Git (ダウンロード、英語)
  4. Curl (GitHub リポジトリの作成に使用。インストール、英語)
  5. Azure CLI (インストール手順)
    メモ : Azure CLI はオプションのコンポーネントです。Azure ポータルまたは PowerShell のいずれかを使用して Web アプリを作成し、GitHub で構成することも可能です。
  6. GitHub (英語) アカウント
    メモ : 今回の Visual Studio Code の初期バージョンでは、SSH または 2 要素認証を使用しない GitHub アカウントを使用しました。

 

手順

今回のデモでは、server.js という 1 つのファイルのみで構成される非常に単純な Node.js アプリケーションを作成します。手順は以下のとおりです。

1. 空のフォルダーを作成します。ここに、Visual Studio Code ワークスペースが作成されます。この例では、C:\websites\CodeWebApp を選択しました。
2. Visual Studio Code を起動し、[File]、[Open Folder] の順にメニューをクリックして、新規作成したフォルダーを選択します。

3. Visual Studio Code で、server.js ファイルを作成して以下の JavaScript スニペットを貼り付けます。

 var http = require('http');
http.createServer(function (req, res) {
    console.log('Got request for ' + req.url);
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('<h1>Hello Code and Azure Web Apps!</h1>');
}).listen(process.env.PORT);

[Save] をクリックし、ファイル名が server.js であること、保存先が手順 1 で作成したフォルダーになっていることを確認して保存します。

4. 次に、後で GitHub と同期させるローカル Git リポジトリを作成します。Visual Studio Code で、左側のナビゲーション バーにある Git アイコンを選択し、[Initialize git repository] をクリックします。
メモ: [Initialize git repository] ボタンが表示されない場合は、[File]、[Open Folder] の順にメニュー項目をクリックして、ワークスペース用フォルダー (手順 1 で作成) を選択する必要があります。

5. コミット コメントを入力し、Enter キーを押して、server.js ファイルをコミットします。ローカル Git リポジトリに server.js がチェックインされます。

6. 以降の手順は、しばらく Git Bash で実行します。オンライン GitHub リポジトリを作成して、ローカル リポジトリを関連付けます。GitHub リポジトリを作成するには、Git Bash ウィンドウに以下のコマンドを入力します。

 curl -u USER https://api.github.com/user/repos -d '{ "name": "NAME" }'

メモ: USER を、GitHub のユーザー名に置き換えます。
メモ: NAME を、新規作成した GitHub リポジトリの名前に置き換えます。

GitHub のパスワードの入力が求められます。
このプロセスを実行すると、一連の JSON が返されます。

7. 次に、ローカル リポジトリを、新規作成した GitHub リポジトリに関連付けます。Git Bash に以下のコマンドを入力します。

 git remote add origin https://github.com/USER/NAME.git

メモ : USER を、GitHub のユーザー名に置き換えます。
メモ : NAME を、作成した GitHub リポジトリの名前に置き換えます。

8. 次に、資格情報をローカルに保存して、Visual Studio Code から生成された push コマンドに自動的に追加するように Git を構成します (Visual Studio Code の今後のリリースでは、認証サポートが改善されることと思います)。Git Bash に以下のコマンドを入力します。

 git config credential.helper store

9. この手順は、GitHub への初回プッシュとなります。これ以降は、すべての push コマンドを Visual Studio Code から実行できます。Git Bash に以下のコマンドを入力します。

 git push –u origin master

メモ: GitHub のユーザー名とパスワードの入力が求められます。

前の手順で credential helper を構成したため、次回 Git Bash または Visual Studio Code から push コマンドを実行する際には資格情報を入力する必要はありません。

10. これで、ローカル リポジトリが GitHub リポジトリと同期されました。これでようやく、Azure App Service の Web アプリを作成できるようになりました! Web アプリを作成する方法は複数あります。プレビュー ポータル (“Ibiza”) または以前のポータルで作成することも、Powershell コマンドレット (英語) を使用することもできます。いずれかのポータルを使用する場合は、Web アプリを新規作成し、[Continuous Deployment] から GitHub を選択します。次に、手順 6 で作成したリポジトリ (マスター ブランチ) を選択します。
この例では、Azure Web アプリを作成し、GitHub リポジトリに関連付けるために Azure CLI を使用します。コマンド ウィンドウ (管理者として実行) に以下のコマンドを入力します。

 azure site create NAME  -- github

メモ : NAME を Web アプリの一意の名前に置き換えます。
メモ: データ センターおよび GitHub リポジトリの資格情報の入力が求められます。

11. これで、Visual Studio Code を使用して行った変更を Web アプリにプッシュできるようになりました。Visual Studio Code で、server.js ファイルの出力行を変更します。

12. [Save] を選択し、左側のナビゲーション バーにある Git アイコンをクリックします。

13. Visual Studio Code で変更内容を保存します。

14. GitHub リポジトリにプッシュします。

メモ: git 操作の出力を確認するには、[View]、[Output] の順にメニュー項目をクリックします。

15. これで、作成した Web アプリをブラウザーで表示し、変更内容を確認できるようになりました。Visual Studio Code を使用して Azure App Service の Web アプリを発行するための設定は完了です。

 

 

まとめ

上記のシナリオは、Visual Studio Code と Azure App Service で実行できることのほんの一例です。チームとして作業したり、運用環境にリリースする前にコードをステージングしたりするような高度なプロジェクトの場合は、GitHub リポジトリを Web アプリのステージング スロットに関連付けて、運用環境にコードをスワップする前にテストを実行できます。

また、GitHub ワークフローを使用して、2 つのサイトの一方をマスター ブランチと同期させ、もう一方をステージング ブランチと同期させてから、プル リクエスト (英語) を使用して運用環境のリリースをゲート処理することもできます。他にもさまざまな使用方法があるはずです。新しい情報を入手したら、またこちらのブログでご紹介したいと思います。