LoginSignup
0
1

More than 3 years have passed since last update.

@yukurash(yukurash)

Azure App Configurationを用いて動的な構成のWeb Appsを作成する

Last updated at Posted at 2020-07-24

はじめに

Azureで複数のWeb AppsやFunctionsを管理している場合、アプリケーション設定の整合性を図ることは大変だと思います。
「Web Apps 1 ではAの設定に変更したけど、Web Apps 2ではBのままだった...」みたいなことが起こる可能性が十分考えられます。何より管理が面倒くさいですよね、、、

そこで、Azure App Configurationを使うと、アプリケーション設定を一元的に管理できます。
今回は一例として、Web Appsのレイアウト設定をAzure App Configurationで管理し、動的な構成のWeb Appsを作成してみました。

Azure App Configurationとは

アプリケーション設定や機能フラグを一元的に管理するサービス。
https://docs.microsoft.com/ja-jp/azure/azure-app-configuration/overview

前提条件

  • Azure サブスクリプション
  • Visual Studio2019

Azure App Configurationの設定

Azureポータルから「App Configuration」を選択し、新しくリソースを作成します。
そこから、[アクセスキー] - [読み取り専用キー] に移動し、主キーの接続文字列をコピーします。（後に使用します。）
図13.png

次に、[構成エクスプローラー] に移動し、Azure App Configurationで管理する「鍵」と「値」を追加します。今回は、Web Appsのレイアウト設定を管理するので、以下のような「鍵」と「値」を設定します。

鍵 値
TestApp:Settings:BackgroundColor white
TestApp:Settings:FontColor Black
TestApp:Settings:FontSize 24
TestApp:Settings:Message Azure App Configuration からのデータ
TestApp:Settings:Sentinel 1

図5.png

Sentinelキーとは、Azure App Configurationの [構成エクスプローラー] で追加した「値」が変更されたときに、通知として、アプリケーション側で使用されるキーです。アプリケーションではSentinelキーを監視するように実装し、Sentinelキーの変更をトリガーとすることで、新しく設定した「値」を適用します。
例えば、「TestApp:Settings:BackgroundColor」の値を「Black」に変更するとき、Sentinelキーも適当な値に変更します。すると、アプリケーションがSentinelキーの変更を検知することで、「TestApp:Settings:BackgroundColor」の変更を適用し、バックグランドの色が黒になったWebページを表示します。

Azure App Configurationを利用するWeb Appsの作成

今回は、Visual Studio2019でASP.NET CoreのWebアプリケーションを作成し、Web Appsにデプロイします。

ASP.NET Coreアプリケーションの作成

Visual Studio2019でASP.NET Coreアプリケーションを作成します。
図1.png

作成時、ASP.NET Coreのバージョンは3.1、WebアプリケーションはMVCモデルを選択してください。
図6.png

次に、NuGetパッケージのMicrosoft.Azure.AppConfiguration.AspNetCoreを取得します。
作成したプロジェクト内の [依存関係] を右クリックし、[NuGet パッケージの管理] を選択します。
図7.png
そこから [参照] タブを開き、Microsoft.Azure.AppConfiguration.AspNetCoreを検索し、インストールします。
図8.png
これでASP.NET Coreアプリケーションの環境が整いました。
次に、Azure App Configurationに接続し、レイアウト設定を反映させるコードを追加していきます。

Azure App Configurationへの接続

まずは、Azure App Configurationに接続するコードを追加していきます。
Program.csを開き、.NET Core App Configurationプロバイダーへの参照を追加し、CreateWebHostBuilderメソッドを以下の通り更新します。
ここで、Azure App Configurationを使用することを示してます。また、先ほど説明した、Sentinelキーの変更を検知します。

Program.cs
using Microsoft.Extensions.Configuration.AzureAppConfiguration;
Program.cs
public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
            webBuilder.ConfigureAppConfiguration((hostingContext, config) =>
            {
                var settings = config.Build();
                config.AddAzureAppConfiguration(options =>
                {
                    options.Connect(settings["ConnectionStrings:AppConfig"])
                           .ConfigureRefresh(refresh =>
                                {
                                    refresh.Register("TestApp:Settings:Sentinel", refreshAll: true)
                                           .SetCacheExpiration(new TimeSpan(0, 5, 0));
                                });
                });
            })
        .UseStartup<Startup>());

Settings.csファイルを新しく作成し、以下のコードを追加します。

Settings.cs
namespace TestAppConfig
{
    public class Settings
    {
        public string BackgroundColor { get; set; }
        public long FontSize { get; set; }
        public string FontColor { get; set; }
        public string Message { get; set; }
    }
}

次に、Startup.csを開き、ConfigureServicesメソッド、Configureメソッドを以下のように更新します。
ConfigureServicesメソッドでは、構成データをSettingsクラスにバインドし、Configureメソッドでは、UseAzureAppConfigurationミドルウェアを追加することで、構成設定を更新できるようにします。

Startup.cs
public void ConfigureServices(IServiceCollection services)
{
    services.Configure<Settings>(Configuration.GetSection("TestApp:Settings"));
    services.AddControllersWithViews();
}
Startup.cs
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        // Add the following line:
        app.UseAzureAppConfiguration();

        app.UseHttpsRedirection();

        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
}

services.Configure(Configuration.GetSection("TestApp:Settings"));を設定するとき、Settingsが見つからないといった、以下のエラーが出る場合があります。その場合、一度の部分だけを削除し、を手動で書き込むことでエラーが解決されます。今後も同様のエラーが出たとき、この手法で解決できます。
図9.png

Azure App Configurationのレイアウト設定

次に、Azure App Configurationで管理している、レイアウト設定を適用するコードを追加します。
ControllersディレクトリにあるHomeController.csを開き、Microsoft.Extensions.Options パッケージの参照、HomeControllerクラスの更新を以下の通り行います。

HomeController.cs
using Microsoft.Extensions.Options;
HomeController.cs
public class HomeController : Controller
{
    private readonly Settings _settings;
    private readonly ILogger<HomeController> _logger;

    public HomeController(ILogger<HomeController> logger, IOptionsSnapshot<Settings> settings)
    {
        _logger = logger;
        _settings = settings.Value;
    }

    public IActionResult Index()
    {
        ViewData["BackgroundColor"] = _settings.BackgroundColor;
        ViewData["FontSize"] = _settings.FontSize;
        ViewData["FontColor"] = _settings.FontColor;
        ViewData["Message"] = _settings.Message;

        return View();
    }

   [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
   public IActionResult Error()
   {
        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
   }
}

ViewsのHomeディレクトリにあるIndex.cshtmlを開いて、以下の内容に全て書き換えます。

Index.cshtml
<!DOCTYPE html>
<html lang="en">
<style>
    body {
        background-color: @ViewData["BackgroundColor"]
    }
    h1 {
        color: @ViewData["FontColor"];
        font-size: @ViewData["FontSize"]px;
    }
</style>
<head>
    <title>Index View</title>
</head>
<body>
    <h1>@ViewData["Message"]</h1>
</body>
</html>

ViewsのSharedディレクトリにあるLayout.cshtmlを開いて、以下の内容に全て書き換えます。

Layout.cshtml
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - hello_world</title>

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <div class="container body-content">
        @RenderBody()
    </div>

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

以上で、Azure App Configurationに接続するASP.NET Coreアプリケーションが完成しました。

Web Appsへデプロイ

上記で作成したASP.NET CoreアプリケーションをWeb Appsにデプロイします。
Visual StudioからWeb Appsへのデプロイ方法
https://docs.microsoft.com/ja-jp/visualstudio/deployment/quickstart-deploy-to-azure?view=vs-2019#publish-to-azure-app-service

Web Appsの設定

デプロイ完了後、該当のWeb Appsを開き、[構成] - [＋新しい接続文字列] を選択し、上記でコピーしたAzure App Configurationの接続文字列を追加します。
図14.png

続いて、Web Appsにアクセスし、Azure App Configurationのレイアウト設定が反映された画面が表示されます。
図10.png
これで、Azure App Configurationからレイアウト設定を取得するWeb Appsが作成されました。

Web Appsのレイアウトを動的に変更

続いて、Azure App Configurationのレイアウト設定を変更し、Web Appsのレイアウトが動的に変更するか確認します。
まず、Azure App Configurationの次に、[構成エクスプローラー] に移動し、「鍵」と「値」を以下の通り変更します。

鍵 値
TestApp:Settings:BackgroundColor green
TestApp:Settings:FontColor lightGray
TestApp:Settings:Message Data from Azure App Configuration - now with live updates!
TestApp:Settings:Sentinel 2

そして、再度、先ほどのWeb Appsにアクセスします。すると、、、
図12.png
Azure App Configurationで変更したレイアウト設定が反映されています。つまり、Azure App Configurationでレイアウト設定を管理する、動的な構成のWeb Appsが作成できました。

おわりに

Azure App Configuration 非常に便利ですね。アプリケーションを再デプロイ、または再起動せず、アプリケーション設定を動的に変更できるところもいい点だと思います。

参考文献

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1