Microsoft Azure入門 - Web Appsを使って簡単にWebアプリやAPIを公開してみよう

Azureに入門するために、まずは手を動かしてみよう!数あるAzureのサービスの中からWeb Apps、Functions、SQL Databaseをチョイスし、これらを組み合わせ、簡単なWebアプリケーションやAPIのサンプルを作成・公開してみます。

Microsoft Azure入門 - Web Appsを使って簡単にWebアプリやAPIを公開してみよう

Web Apps、Functions、SQL Databaseそれぞれの特徴
Web Apps/Functions/SQL Database
Azureを利用するための準備をしよう
開発環境の準備/Azure サブスクリプションの作成
Webアプリケーションを作成する
Web API プロジェクトの作成/APIの確認/アプリケーションのデバッグ実行/アプリケーションをホストするWeb Appsの作成
SQL Databaseと連携する
データベースの作成/APIの追加/Functionsプロジェクトの作成/Functionsのデバッグ/SQL Databaseとの連携/Functionsの作成/Functionsへのデプロイ/リソースの削除

マイクロソフトが提供するクラウドサービス「Microsoft Azure」(以下、Azure)は、SaaSを含めたクラウド全般の領域において、データベースやAI、機械学習など、多岐にわたるサービスを提供しています。

今回はその中から、Azure Web Apps(以下、Web Apps)Azure Functions(以下、Functions)Azure SQL Database(以下、SQL Database)を組み合わせ、簡単なWebアプリケーションやAPIのサンプルを作成・公開してみましょう。

実際の業務におけるAzureを使ったWebアプリケーションの作成からSQL Databaseとの連携まで、概要を把握できるようチュートリアル形式で紹介していきます。用途に応じて柔軟に、かつ簡単にサービスを選択できるAzureの特性も交えます。

Web Apps、Functions、SQL Databaseそれぞれの特徴

Web Appsとは

Web AppsはWebアプリケーションやREST API1をホストするためのクラウドサービスです。WindowsはもちろんLinuxベースの環境も利用可能。開発には、.NET/Java/Ruby/Node.js/PHP/Pythonと、さまざまな言語を利用できます。

フルマネージドサービスであるため、ホスト環境の管理に気を遣う必要はありません。またセキュリティや負荷分散、自動スケーリングなどはサービスとして提供されているため、独自に実装することなく、設定を変更するだけで柔軟に構成できます。

1Web App Service | Microsoft Azure

Functionsとは

Functionsとは、サーバーを意識することなく比較的小規模なプログラムを実行できる環境で、いわゆるサーバーレス実行環境と呼ばれるものです。前述したREST APIの実行ができますし、他のサービスと簡単に連携することもできます。対応言語についても、.NET、Java、Python、JavaScript、TypeScript などをサポートしています。

2Azure Functions | Microsoft Azure

SQL Databaseとは

Azure上で提供されるリレーショナルデータベースで、オンプレミスで動作するSQL Serverのクラウド版です。もちろんフルマネージドサービスであるため、オンプレミスで運用していた際に必要だった煩雑な管理は必要ありません。設定によっては自動的にバックアップもできます。性能については購入モデルに応じてさまざまなパフォーマンスのデータベースを利用できますので、需要に応じて柔軟な構成を取れます。

3SQL Database | Microsoft Azure

Azureを利用するための準備をしよう

本記事で必要な開発環境とAzure サブスクリプションについて説明します。

開発環境の準備

本記事では以下の環境を想定して進めていきます。.NETやVisual StudioがWindowsでしか動作しないフレームワークであったのは昔話です。.NET Core やVisual Studio Codeはいずれも複数プラットフォームで動作しますので、これらを利用します。したがって、本記事では特に動作OSについては限定しません

  • .NET Core 2.2
    • 一部ローカルデータベースを利用する際はWindowsに限定されます
    • .NET Core 3.0がリリースされていますが、執筆時点でAzure側が未対応であるためこのバージョンを利用しています
  • Visual Studio Code 1.38.1 (執筆時点の最新板)

.NET Core フレームワークは、Download .NET Core 2.2 (Linux, macOS, and Windows) よりダウンロードできます。各プラットフォーム向けのインストーラーが用意されています。参考までに、Ubuntu 16.04 でのインストール例を紹介します。

以下のコマンドを実行して、Microsoftのキーとフィードを登録します。マシンごとに1回だけ実行します。

wget -q https://packages.microsoft.com/config/ubuntu/16.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb

次にaptコマンドで、リポジトリを追加しインストールします。

sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-2.2

dotnetコマンドを実行して情報が出力されれば、正しくインストールされています。

$ dotnet --info
.NET Core SDK (reflecting any global.json):
 Version:   2.2.401
 Commit:    729b316c13
....

もし、.NET Core 3.0が表示される場合は、「 使用する .NET Core のバージョンを選択する - .NET Core | Microsoft Docs 」を参考にしてバージョンを変更してください。

Azure サブスクリプションの作成

Azureを利用するためには、「Azure サブスクリプション」を作成する必要があります。その前提としてMicrosoftアカウントが必要です。Microsoftアカウントは、マイクロソフトが提供するサービスを利用する場合には必ず使いますので、保有していない場合は以下のリンクを参考に作成してください。

新規のAzure サブスクリプションは以下のリンクから作成できます。作成から30日の間は、任意のAzureサービスを約2万円分、無償で利用可能です。さらにいくつかのサービスでは永続的に無償利用枠が設定されています。作成にはクレジットカードが必要ですが、無償期間を過ぎたからといって勝手に課金されることはありません。

Azure サブスクリプションを作成すると、自分自身のAzure サブスクリプションを管理するポータル画面にアクセスできるでしょう。下図のような画面が表示されれば正しく作成されています。ちなみに、複数のサブスクリプションを作成し、契約することもできます。

4

Azureのリソース作成にはポータル画面を利用するのがお手軽ではあるのですが、「手順が煩雑であり、間違いやすい」「繰り返し同じリソースを作成できない」などの欠点もあります。Azureではポータル画面以外に、コマンドラインインターフェースとしてAzure CLIAzure PowerShell コマンドレットが提供されており、さらにはテンプレートベースのリソース作成も可能です。

初学者にとってはやや難しいかもしれませんが、早めに習得した方がスキルアップを目指せるということで、本記事ではAzure CLIを利用したリソース作成の手順を紹介していきます。

Webアプリケーションを作成する

ここから、Web Appsへデプロイするための実際のWebアプリケーションを作成していきます。作成するのは.NET Coreで動作するアプリケーションで、SQL Databaseへのアクセスを伴うREST APIを想定しています。

サンプルの概要図は以下の通りです。はじめにローカルでアプリケーションを作成し実行確認を行います。次に、実際にAzure上にWeb AppsとFunctions、SQL Databaseを作成し、アプリケーションをデプロイして、実行確認を行っていきます。

5

Web API プロジェクトの作成

dotnet コマンドで.NET Core プロジェクトを作成します。引数に指定した new は新規作成、webapiは REST API形式のWebアプリケーションテンプレートを利用してプロジェクトのひな形の生成を意味します。単にdotnet newコマンドを実行すると作成可能なテンプレートが表示されますので、確認してみてください。

$ dotnet new webapi -o sample-webapi
テンプレート "ASP.NET Core Web API" が正常に作成されました。

作成後のアクションを処理しています...
'dotnet restore' を sample-webapi\sample-webapi.csproj で実行しています...
  c:\ws\sample-webapi\sample-webapi.csproj の復元が 3.17 sec で完了しました。

正常に復元されました。

正常に作成されるとsample-webapiプロジェクトが作成されます。Visual Studio Codeでそのフォルダを開いてみましょう。実行パスが通っていれば、code sample-webapiを実行するとVisual Studio Codeが起動します。

初めてC#のプロジェクトを開く場合、アプリケーションのビルドとデバッグに必要な拡張機能の追加を求められますので、その場合は「Yes」を選択してください。

6

画面左側の縦に表示されているアイコンが、各機能を切り替えるボタンになっています。Visual Studio Codeに拡張機能をインストールすれば、機能を追加できます。

APIの確認

このプロジェクトテンプレートでは、あらかじめ ValuesController.cs というソースが生成されています。中身を確認していきましょう。

    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {
        // GET api/values
        [HttpGet]
        public ActionResult<IEnumerable<string>> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public ActionResult<string> Get(int id)
        {
            return "value"; // "value = " + id に書き換える
        }

        ... 中略 ...
    }

まず、このコントローラクラスとは個々のリクエストに応じた処理を行うクラスで、HTTPのリクエストに応じて対応するメソッドが呼び出されます。それらを定義するのが角括弧([])で囲まれた属性と呼ばれるコードです。この属性はクラスやメソッドに追加情報を与えます。

ここでまず注目したいのはApiControllerRoute属性です。ApiControllerはこのクラスがREST APIのコントローラクラスとして利用されることを指定しており、Route属性はURLのルーティング情報を指定しています。この場合、api/Values/~ でAPIにアクセスできるようになります。

次にHttpで始まる各属性は、HTTPリクエストメソッドに対応しており、呼び出しリクエストの種類によって振り分けられます。{id}は追加のパスを取ることを表しており、api/values/123 のようにリクエストすると、idに対応するパスの値が代入されます(ここでは123)。

Get()メソッドでは、文字配列を返却していますが、これは結果的にJSONに変換されます。Get(int id) は固定の文字列を返却していますが、こちらは単なるテキストで返却されます。ひな形で生成されたコードはidを利用していませんが、コメントのように書き換えれば入力されたidが返却され確認できるでしょう。

アプリケーションのデバッグ実行

まずはローカル環境でデバッグ実行してみましょう。画面左側にあるデバッグアイコン( 7 )をクリックしてデバッグ画面にします。左上のデバッグするターゲットを.NET Core Launch(web) にして隣の三角ボタンをクリックするとデバッグが始まります。

環境によっては、以下のメッセージとともに例外が発生する場合があります。その時は、dotnet dev-certs https コマンドを実行し、開発用の自己署名証明書を設定してください。

Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found.

8

ブラウザが起動しますがルートページは存在しないので404エラーとなります。先ほどのRoute属性の通り https://localhost:5001/api/valuesに書き換えてアクセスします。自己署名証明書を利用しているため、安全でない旨のエラーが出ますが、ローカルホストですので無視してアクセスしてください。以下の画面が表示されれば正常に実行できています。

9

通常のデバッガですので、ブレークポイントの設定やスタックトレース、変数の参照などができます。デバッグを終了する際は右上の赤い四角ボタンをクリックしてください。

作成したアプリケーションをWeb Appsへデプロイ

それでは作成したアプリケーションをWeb Appsにデプロイしてみましょう。

アプリケーションをホストするWeb Appsの作成

はじめに、Azure上にアプリケーションをホストするWeb Appsを作成します。冒頭で説明したとおりAzure CLIで作成していきましょう。ブラウザベースの「Cloud Shell」を利用すれば、Azure CLIをローカルにインストールせずに使えます。

ブラウザ上部のシェルアイコン( 10 )をクリックします。BashもしくはPowerShellベースのシェルにするか選択を促されるので「Bash」を選びます。

11

次にどのサブスクリプション上に作成するか質問されますが、先ほど作成したサブスクリプションを選択し、「ストレージの作成」をクリックします。このストレージは、Azure上に作成されるクラウドストレージを指します。ホームディレクトリなどがここに保存されます。

12

正常に起動すると以下の画面になります。

13

Azureのリソース作成はazコマンド を使っていきます。azコマンドの書式は以下の通りです。名前には操作したいリソースの名前を指定し、コマンドにはどのような操作をしたいか選択します。例えば、新規作成や一覧、削除などです。次に詳細な引数と続きます。az -hコマンドでヘルプが出ますので参考にしてください。

az 操作対象の機能名 コマンド サブコマンド 引数 ....

はじめにリソースグループを作成します。Azureではあらゆるリソースは、リソースグループと呼ばれるコンテナに属するルールとなっています。また、リソースグループはネストできません。

az group createでリソースグループを作成します。引数にはリソースグループ名と作成するロケーション2を指定します。この例であれば「sample-reg」という名前のグループを「東日本」(japaneast)に作成します。

今後作成していくリソースは全てこのリソースグループ内に配置し、ロケーションは東日本を指定します。

$ az group create --name sample-rg --location japaneast
{
  "id": "/subscriptions/xxxxxxxx-yyyy-eeee-zzzz-eeeeeeee/resourceGroups/sample-rg",
  "location": "japaneast",
  "managedBy": null,
  "name": "sample-rg",
  "properties": {
    "provisioningState": "Succeeded"
  },
  "tags": null,
  "type": null
}

次にApp Service プランを作成します。App Service プランとは、一言で言えばWeb AppsやFunctionsなどのクラウドサービスの総称で、これらのサービスのホスト環境となるものです。

App Service プランはアプリケーションを具体的にホストする環境として、課金額に応じたCPUやメモリなどを持ちます。CPUやメモリに応じて、フリープランからシェアードプラン、スタンダード、プレミアム、専有プランまで、幅広いワークロードに対応したプランが用意されています。

例えば、フリープランではWeb Appsを10個までホストできますが、1日あたり60分までのCPU使用時間までしか許されていないなどの制限があります。スタンダードプランでは、1コア CPU、RAM 1.75GBの仮想環境が1カ月あたり1万円で利用可能で、Web Appsは無制限にホストできます。

プラン別の機能と価格は以下を参考にしてください。

以下のコマンドでApp Service プランを作成します。Web AppsではWindowsまたLinuxの環境を利用できますが、ここでは --is-linuxを指定して明示的にLinux環境を指示します。指定しなければWindows環境となります。また--skuでは、開発環境向けの「B1」を指定します。

$ az appservice plan create --resource-group sample-rg --name sample-appplan --location japaneast --is-linux --sku B1

各プラン作成オプションの内容は以下の通りです。

オプション 内容
--resource-group App Service プランを作成するリソースグループを指定
--nameApp Service Plan名を指定
--location ロケーションを指定(東日本)
--is-linux App Service プランの環境を指定
--sku App Service プランの種類を指定。B1, B2, B3, D1, F1, FREE, P1V2, P2V2, P3V2, PC2, PC3, PC4, S1, S2, S3, SHARED から指定可能

App Service プランの作成が終わったら、以下のコマンドでWeb Appsを作成します。引数には先ほど作成したプラン名を指定し、名前にはWeb Appsの名前を指定します。名前はURLの一部となるため、Azureで一意とする必要があります。ランタイムには、.NET Core 2.2を利用します。

$ az webapp create --resource-group sample-rg --name sample-20190912 --plan sample-appplan --runtime "dotnetcore|2.2"

Web Apps作成オプションは以下の通りです。

オプション 内容
--resource-group Web Appsを作るリソースグループを指定
--name Web Appsの名前を指定
--plan App Service プラン名を指定
--rutime ランタイムスタックを指定。指定可能なランタイムスタックは、az webapp list-runtimes --linuxで確認できる

ポータル画面に戻り、左の「リソースグループ」をクリックすると、先ほど作成したsample-rgが一覧に表示されています。さらにをクリックして作成されたリソースが表示されていれば問題ありません。

14

Web Appsにデプロイし実行

作成したWebアプリケーションをAzure上のWeb Appsにデプロイするにはいくつかの方法がありますが、ここではVisual Studio Codeの拡張機能から行います。Visual Studioの拡張機能画面から、Azure App Service を検索しインストールしてください。インストール後、右側のアクティビティバーにAzureのアイコン( 15 )が表示されるでしょう。

Azure拡張機能に切り替えたら Sign in to Azure ... をクリックし、Azureに接続します。ブラウザが起動し、サインインを求められます。Azure サブスクリプションを作成したMicrosoftアカウントでサインインしてください。サインインが完了してから、先ほど作成したWeb Appsが表示されることを確認してください。

16

デプロイするための実行ファイル群をビルドするため、ターミナルを開きます。メニューから「ターミナル」―「新しいターミナル」を選択すると、画面下部でターミナルが起動するので、以下のコマンドを実行します。これでpublishという名前のフォルダに、アプリケーションのReleaseパッケージが作成されます。エクスプローラからpublishファルダが作成されていることを確認してください。

dotnet publish -c Release -o ./publish

次にpublishフォルダを選択し、表示されたコンテキストメニューから「Deploy to Web App ...」を選択します。画面上部のコマンドパレットに先ほど作成したWeb Appが表示され、それを選択するとデプロイがスタートします。

17

画面の右下にデプロイ進行中の画面が表示されます。最終的にデプロイが完了すると、「Browse WebSite」ボタンが表示されるので、クリックして該当のWeb Appsにアクセスします。

先ほどと同様にURLを書き換えて以下のように表示されれば、正常にデプロイできています。

18

SQL Databaseと連携する

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く