Azure Web Apps と SQL Database を使ったWebアプリケーション作成とデータベース接続の基礎

この記事の内容

  • Azure App Service（Web Apps）と Azure SQL Database を組み合わせたWebアプリケーションの構築方法を学びます
  • まずローカル環境でASP.NET アプリを動作確認してから、Azure へデプロイする流れを解説します
  • Visual Studio から直接 Azure リソースを作成・発行する手順を紹介します
  • 接続文字列（Connection String）を使ったデータベース接続の仕組みを理解します
  • より安全な接続方法であるマネージドIDについても触れます

はじめに

今回は Azure の Web Apps（App Service）と SQL Database を使って、簡易的なWebアプリケーションを作成しながら、データベース接続の仕組みを学びます。Microsoft が公式チュートリアルとして提供している「ASP.NET アプリと Azure SQL Database の接続」を実際に手を動かしながら進めていきます。

理解を深めるには、チュートリアルを自分でやってみるのが一番の近道です。

前提条件

このチュートリアルを進めるには、Visual Studio 2019 が必要です。無償版（Community エディション）でも動作しますので、まだインストールしていない方はあらかじめ準備しておきましょう。

ローカル環境でアプリを動かしてみる

サンプルプロジェクトのダウンロードと確認

まずはMicrosoft のチュートリアルページからサンプルプロジェクトをダウンロードします。ダウンロードしたファイルは、念のため一度プロパティを開き「ブロックの解除」を行ってから展開するとスムーズです。

展開後、Visual Studio でプロジェクトを開きます。

ローカルで実行する

Visual Studio 上で Ctrl + F5 キーを押すと、ビルドが開始されアプリケーションがローカルホスト上で起動します。

起動後は「Create」ボタンからアイテムを作成したり、編集・削除ができることを確認できます。このサンプルはToDoアイテムを管理するシンプルなアプリです。

ローカルDBへの接続の仕組み

「Azure も SQL Database も作っていないのに、なぜアプリが動くの？」と思うかもしれません。これはアプリの設定ファイル web.config に接続文字列の設定があるためです。

<!-- web.config の接続文字列（イメージ） -->
<connectionStrings>
  <add name="MyDbConnection"
       connectionString="Data Source=(localdb)\MSSQLLocalDB;..." />
</connectionStrings>

MyDbConnection という名前の設定を参照しており、現時点ではローカルの SQL Server（LocalDB）に接続されています。アプリのコードは MyDbConnection という設定名を読みに行くだけなので、この接続先を後で Azure 上のデータベースに変えることができます。

これが「ローカルで開発して、本番は Azure」という構成の基本的な仕組みです。

Azure へのデプロイ

Visual Studio から直接 Azure にデプロイできる

Azure への発行は、Azure ポータルで手動作成する方法もありますが、Visual Studio から直接行うのが最も簡単です。ソリューションエクスプローラーでプロジェクトを右クリックし、「発行」を選択します。

発行先の選択画面が表示されたら「Azure」を選び、「次へ」をクリックします。

App Service の作成

Azure App Service（Web Apps）のインスタンスを選択する画面で、まだ作成していない場合は「＋」ボタンから新規作成します。

設定項目は以下の通りです。

項目設定例
名前tmp-youtube-web（後で削除するものには tmp プレフィックスを付けるとわかりやすい）
サブスクリプション対象のサブスクリプション
リソースグループ新規作成（例：tmp-youtube）
ホスティングプラン新規作成、サイズは「Free」でOK
場所Japan East

「作成」を押すと Azure 上に App Service が作成されます。これは Azure ポータルで「App Service」→「作成」と操作するのとまったく同じ処理です。

Azure SQL Database の作成

Visual Studio はプロジェクトにデータベース接続が含まれることを検知して、SQL Database の構成も一緒に促してくれます。「構成」ボタンを押して、こちらも新規作成します。

設定項目は以下の通りです。

項目設定例
データベース名任意（例：mydb）
サブスクリプション対象のサブスクリプション
リソースグループApp Service と同じグループ
データベースサーバー新規作成（名前はグローバルで一意にする）
場所Japan East
管理者ユーザー名 / パスワード任意（必ず設定する）

「作成」を押すと Azure SQL Database が作成されます。

補足： Azure はすべての操作が API で提供されているため、ポータル画面・Visual Studio・CLI など、どのツールからでも同じリソースを作成・操作できます。

接続文字列の確認と設定

SQL Database が作成されると、接続文字列が自動生成されます。接続文字列にはデータソース（サーバー名）、データベース名、ユーザーID、パスワードが含まれています。

DIUPansatiesatrsiwSaIooldru=drCy=caoyetuo=arutlarcodppgma:=isymnsoy@wudyorbors;uder;rsveerrv.edra;tabase.windows.net,1433;

この接続文字列が App Service の「構成」設定に MyDbConnection という名前で保存され、アプリからはその名前で参照されます。

発行の実行

すべての構成が完了したら「発行」ボタンを押します。Visual Studio が裏でARMテンプレートを生成し、アプリケーションを Azure App Service にデプロイします。

デプロイが完了すると、https://[アプリ名].azurewebsites.net のような公開URLでアプリにアクセスできるようになります。

Azure 上での動作確認

アプリの動作確認

デプロイ後のURLにアクセスし、「Create」からアイテムを作成してみましょう。アイテムが正常に作成・保存されれば、Azure 上のデータベースへの書き込みが成功しています。

データベースへの直接確認

Azure ポータルの SQL Database から「クエリエディター」を開くと、登録したデータを直接確認できます。

SELECT TOP 1000 * FROM [テーブル名]

ただし、クエリエディターへの接続にはクライアントIPアドレスのファイアウォール許可が必要です。「クライアントIPの追加」ボタンで現在のIPを許可してから接続してください。

登録したアイテムがデータベースに記録されていることを確認できれば、Azure Web Apps と Azure SQL Database の連携は完成です。

接続文字列の仕組みまとめ

今回の構成で重要なのは「接続文字列」の仕組みです。

ロAーzカ└u└ル─r─環─e─境w環Ae境pbp.cSoenrfviigce→構M成yD→bCMoynDnbeCcotninoenct→ioLnoc→alADzBu（rロeーカSルQSLQLD）atabase

アプリのコードは常に MyDbConnection という名前を参照します。接続先のデータベースを切り替えたいときは、この設定値を書き換えるだけです。ローカル開発時はLocalDB、本番はAzure SQL Databaseというように環境ごとに使い分けができます。

より安全な接続方法：マネージドID

今回のチュートリアルでは接続文字列にユーザーIDとパスワードを直接埋め込んでいますが、これはセキュリティ上推奨されない方法です。

より安全な方法として マネージドID（Managed Identity） があります。

  • App Service のマネージドIDを有効にする
  • Azure SQL Database 側でそのマネージドIDに対してアクセス権を付与する
  • これにより、パスワードを一切持たずにデータベースへ接続できる

マネージドIDを使えば「このApp ServiceはこのSQL Databaseにアクセスしてよい」という権限設定のみで接続でき、パスワード管理が不要になります。詳細は別動画での解説があります。

また、接続文字列をコードや設定に直書きしたくない場合は、Azure Key Vault に接続文字列を格納して参照する方法も有効です。

まとめ

今回の内容を整理します。

  • ローカル → Azure の構成変更はコードを変えずに接続文字列だけを差し替えることで実現できます
  • Visual Studio から直接デプロイすることで、Azure ポータルでの手動操作なしにリソース作成からデプロイまで完結します
  • 接続文字列がデータベースとアプリケーションをつなぐ重要な設定であり、コードはその名前を参照するだけです
  • パスワードを直接埋め込む方法は動作しますが、本番環境ではマネージドIDやKey Vaultを使ったより安全な方法への移行を検討しましょう

まずはチュートリアルを実際に手を動かして完走することで、WebアプリとデータベースがAzure上でどのように連携するかを体感できます。ぜひ試してみてください。