Azure SQL VM上のSQL Serverと接続するサンプルWebアプリをAzure App Serviceで動かす【.NET Core/.NET6】

こんにちは。最近、仕事で必要になり、SQL Serverを触り始めています。

何か技術を新しく勉強するときは、ドキュメント読むより何かものを作ってみた方が圧倒的に効率的に覚えられますよね。ということで今日は、手始めとして、SQL Serverと接続するWebアプリをつくってみたいと思います。

なお、SQL Serverは、ローカルに用意してもよかったのですが、準備を簡単にするため、Microsoft Azureが提供する、SQL Serverが事前インストールされた仮想マシン、SQL仮想マシンを利用したいと思います。

また、当方.NETのコーディングについては初心者なため、コードの書き方については目をつむっていただけると幸いです。最低限動くコード、ということで。

それではまいります。

前提

  • Microsoft Azureのアカウントを持っていること
  • .NET Coreまたは.NET6ランタイムがあること(今回私は.NET6で開発していますが、.NET Coreでも同様に動作するものと思われます。動かなかったらごめんなさい。)

Azure VM / SQL仮想マシンの作成

最初にSQL仮想マシンリソースの作成です。この手順は以下に説明がありますので、説明の詳細は譲ろうと思います。

https://docs.microsoft.com/ja-jp/azure/azure-sql/virtual-machines/windows/sql-vm-create-portal-quickstart

ポイントだけまとめておきます。

  • SQL ServerとWindows Serverのバージョンは、いちおう最新の2019/2022としました。
  • 手順と同様、まずはパブリックアクセスを許可した状態で作成しました。
  • その他の構成は、いったんは規定値のままとしています。

SQL Serverへのテーブル作成&テストデータの追加

  • SSMS (SQL Server Management Studio)をローカルPCなどにダウンロードして、そこから先ほどのVMに接続します。
  • SSMSからテスト用に新規データベースとテーブルを作成し、その中にデータを投入します。

テーブルレイアウト

データ

データの投入にあたっては、以下のサイトを参考にして、一括投入しました。

https://qiita.com/MtBigYashi/items/dc7c2e6f75c41fa71503

Azure App Serviceリソースの作成

続いて、Webアプリを動かす環境として、Azure App Serviceのリソースを作成します。

こちらもポイントだけ・・・

  • ランタイムは.NET6
  • OSはWindows
  • App Service PlanはFreeプランで
  • それ以外は規定値で

Webアプリテンプレートの作成

Visual Studioで”ASP.NET Core Webアプリ”を新規作成します。

適当なプロジェクト名で、あとは規定値でアプリを作成したら、いったんApp Serviceにデプロイして正常動作することを確認しておきます。

「公開」>「Azure」>「App Service(Windows)」と進んで、先ほど作成したApp Serviceリソースを指定して「発行」を実行すればOKです。

一瞬でデプロイが完了するので、App ServiceのURLにアクセスして、テンプレートアプリのトップ画面が表示されることを確認しておきます。

SQL Serverとの接続を構成

ここからは再びVisual Studioに戻って開発を進めます。SQL Serverとの接続実装については、以下の公式ドキュメントも参考になるかと思います。

https://docs.microsoft.com/ja-jp/azure/azure-sql/database/connect-query-dotnet-core

まず、アプリプロジェクトに、SQL Serverと接続するためのライブラリ「System.Data.SqlClient」を追加します。

以下のコード修正を加えます。

1, SQLVM.cshtmlとSQLVM.cshtml.csを追加

  • TestTableというテーブルからデータを取得して画面に表示する
#SQLVM.cshtml
@page
@model SQLVMModel
@using System.Data.SqlClient;
@{
        List<SQLVMModel.TestTable>resultSet = new List<SQLVMModel.TestTable>();
        try
        {
            SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder();

            builder.DataSource = "SQLVMのIPアドレスまたはURL";
            builder.UserID = "SQL認証のユーザ名";
            builder.Password = "SQL認証のパスワード名";
            builder.InitialCatalog = "接続先データベース名";

            using (SqlConnection connection = new SqlConnection(builder.ConnectionString))
            {
                connection.Open();

                String sql = "SELECT * FROM testTable;

                using (SqlCommand command = new SqlCommand(sql, connection))
                {
                    using (SqlDataReader reader = command.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            //1列づつ読みだしていく。テーブルの構造によって変えてください。
                            SQLVMModel.TestTable details = new SQLVMModel.TestTable();
                            details.id = reader[0].ToString();
                            details.timestamp = reader[1].ToString();
                            details.charColumn = reader[2].ToString();
                            details.varcharColumn = reader[3].ToString();
                            resultSet.Add(details);
                        }
                    }
                }
            }
        }
        catch (SqlException e)
        {
            Console.WriteLine(e.ToString());
        }
    ViewBag.Title = "SQLVM";
    ViewBag.Body = resultSet;

}

//画面のレンダリング
<h1>@ViewBag.Title</h1>
<p>Show Database Records</p>

//取得結果をループで出力
<table border="1" width="90%">
    <tr>
        <th>ID</th>
        <th>Timestamp</th>
        <th>charColumn</th>
        <th>varcharColumn</th>
    </tr>
@foreach(var v in ViewBag.Body)
{
    <tr>
        <td>@v.id</td>
        <td>@v.timestamp</td>
        <td>@v.charColumn</td>
        <td>@v.varcharColumn</td>
    </tr>
}
</table>
#SQLVM.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WebApp_SQLVM.Pages
{
    public class SQLVMModel : PageModel
    {
        private readonly ILogger<SQLVMModel> _logger;

        public SQLVMModel(ILogger<SQLVMModel> logger)
        {
            _logger = logger;
        }

        //データ取得結果を格納する箱の構造を定義
        public class TestTable
        {
            public string? id { get; set; }
            public string? timestamp { get; set; }
            public string? charColumn { get; set; }
            public string? varcharColumn { get; set; }
        }

        public void OnGet()
        {
        }
    }
}

2, _Layout.cshtmlに以下のコードを追加

<li class="nav-item">
   <a class="nav-link text-dark" asp-area="" asp-page="/SQLVM">SQLVM</a>
</li>

以上で必要な変更は完了です。ここで、アプリをデプロイまたはVisual Studioのデバッグ機能を利用してローカルで起動してみます。

すると、上のメニューに”SQLVM”ページが追加されていることが分かります。

そのタブをクリックすると、以下のようにテーブルの内容が出力されました・・!

以上、SQL Serverと接続する.NETアプリを作成する手順でした。

データベースと接続してデータを表示する、というのは超基本的な処理かと思いますが、意外にどんぴしゃな公式Doc情報などがなく苦戦しました・・・

同じところで苦戦されている方のお役に立ちましたら幸いです。

おしまい

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。