Azure Web SIteでデータベースに接続するサンプル

日曜日 , 8, 6月 2014 Leave a comment

Windows AzureのWebサイトでSQL Serverに接続する簡単なサンプルを所望されたので紹介します。

条件は以下(多分)

 

・Webサイトを作成する(MVCとか凝ったのじゃなくてシンプルなのがいい!!)

・Azure上の既存のSQLデータベースに接続する

・SQLデータベースへの接続はWebサイトからだけでいい(でも、ローカルからも繋げないと開発大変そうなのでローカルからつなぐ方法も調べてあげようじゃないか)

 

1.Webサイトの作成

 

まずはWebサイトを作成します。

Azureポータルの左ナビからWebサイトを選択して、画面左下の「新規」ボタンをクリック。

 

001

 

DBは既存のSQLデータベースへ接続するので今回は作成しません。

 

002

 

2.データベースへの接続

 

この時点では、SQLデータベースは作成していませんので、既存のSQLデータベースにリンクすることにしましょう。

作成したWebサイトを選択して「リンク済みリソース」をクリックします。

 

003

 

リンク済みのリソースは無いので一覧には何も表示されません。

リンクするために、「リソースをリンクします」をクリックします。

 

004

 

「既存のリソースをリンクスする」をクリックします。

 

005

 

「SQLデータベース」をクリックします。

 

006

 

既存のデータベースを選択してID、パスワードを入力します。

 

007

 

追加が完了すると、下の画像のように一覧に表示されます。

(自動で表示されない場合はリロードすると表示されていることがあります。)

 

008

 

3.接続IPの許可

 

WebサイトとSQLデータベースはリンクされましたが、ローカル環境で開発するためにSQLデータベースへのファイアーウォール設定を行います。

ポータルの左ナビのSQLデータベースを選択して、今回利用するデータベースをクリックします。

 

「このIPアドレス用にWindows Azureファイアーウォールを設定」をクリック。

 

011

 

 

画面下部に確認のダイアログが表示されるので「はい」をクリックします。

 

010

 

これで接続許可がされました。

 

4.WebMatrixでチェックアウト

 

作成されたWebサイトに戻り、画面下部のWebMatrixボタンをクリックします。

(WebMatrixがインストールされていない場合は、インストールが始まりますがここでは、すでにインストール済みとします)

 

009

 

 

WebMatrixが起動し、どのような形で編集するかを尋ねられます。

「ローカルコピーの編集」をクリックします。

 

012

この時点でアプリケーションを作成してしまいます。

「はい、テンプレートギャラリーからインストールします」をクリックします。

 

013

 

 

「MVCとか使わないでシンプルな構成」というリクエストなので、

空のサイトを選択します。

 

014

 

 

WebMatrixでは編集せずに速やかにVisual Studioへ移行します。

「Visual Studio」をクリックします。

 

015

 

5.VSで編集

 

データベースへの接続を追加します。

もう一度Azureポータルに戻り、

Webサイトを選択。「構成」をクリックして、画面下部の「接続文字列」項目までスクロールします。

 

「接続文字列の表示」をクリックします。

 

016

 

表示された値をコピーしておきます。

 

Visual Studioに戻ってWeb.configファイルに以下の接続設定を追加します。

 

    <connectionStrings>
        <add
            name="ConnectionString" 
            connectionString="{先ほどコピーした接続文字列}"
            providerName="System.Data.SqlClient"
        />
    </connectionStrings>

 

何も編集していないWeb.configに記載した場合以下のようになります。

 

<?xml version="1.0" encoding="utf-8"?>

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web>
  <connectionStrings>
    <add
        name="ConnectionString"
        connectionString="{接続文字列}"
        providerName="System.Data.SqlClient"
        />
  </connectionStrings>
</configuration>

 

この状態でサーバーエクスプローラーを表示すると以下のようにデータ接続が追加されているのが確認できます。

 

017

 

 

まだ何もテーブルなどが無いDBであればここでテーブルの作成やデータのインサートが行えます。

 

018

 

ここでは、sampledbというテーブルを作成し、そこのnameとdescriptionという2つのカラムをもたせたという想定で進めます。

 

019

 

テーブルには2行のデータが入っていることとします。

 

6.データを取得する

 

この状態でサクッとDBに接続してデータを取り出します。

ダイナミックな変数で受け取っていたり、C#の恩恵があまり感じられないコードですが、そこはサンプルとして簡便さを重視したということで・・・(ちゃんとした書き方も後で紹介します)

 

Default.cshtmlを以下のように書き換えます。

 

@{
    var db = Database.Open("ConnectionString");
    var query = db.Query("SELECT name, description FROM sampledb"); 
}

<!DOCTYPE html>

<html lang="ja">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>マイ サイトのタイトル</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    </head>
    <body>
        <table>
            <tr>
                <th>Name</th>
                <th>Description</th>
            </tr>
            @foreach (var row in query)
            {
                <tr>
                    <td>@row.name</td>
                    <td>@row.description</td>
                </tr>
            }
        </table> 
    </body>
</html>

 

実行するとDBの結果がデーブルに書きだされます。

020

もちろん、ブレークポイントも使えます。

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です