Client Side Blazorでツールを作ってみました。 Azure WebappsやFunctionsで利用される設定情報をロカール環境とクラウド環境で相互に変換を行うツールになります。

1. Client Side Blazorで
ツールを作ってみた
2020年7月29日
C# TOKYO ONLINE

2. 自己紹介
・名前 : 木下 裕之
・HN：kingkino
・SNS Twitter：@kingkinoko FaceBookやってます
・Azure暦：9年
・MCSE : Cloud Platform and Infrastructure 2017
・Azureもくもく会主催
・Microsoft MVP for Microsoft Azure

3. 注意
※この資料は2020年7月29日時点での情報を元に作成しています
※更新が早いのですぐに古い情報になる可能性がありますが予めご了承ください

4. 作ったツール
AppSettingsConverterという設定ファイルを開発環境とAzure環境で相互変換するツールを作成
しました。

5. 作成の経緯
Azure WebAppsやFunctionsの開発を行っていると割とよくある問題として、ク
ラウド環境への設定情報の反映のめんどくささに直面する。
{
"IsEncrypted": false,
"Values": {
"SettingsA”: “ConnectionStrings”,
"SettingsB": "FilePath",
"SettingsC": "APIUrl",
"SettingsD": "DefualtUrl",
"SettingsF": {
"Id":"id",
"Pass":"pass"
}
}
}

6. 作成の経緯
運用に入ると開発者の端末にのみ設定情報が保管されていることがよくあり、他人
がデバッグするときに設定情報をクラウド環境から持ってくることがある。
{
"IsEncrypted": false,
"Values": {
"SettingsA”: “ConnectionStrings”,
"SettingsB": "FilePath",
"SettingsC": "APIUrl",
"SettingsD": "DefualtUrl",
"SettingsF": {
"Id":"id",
"Pass":"pass"
}
}
}

7. 作成の経緯
開発環境とクラウド環境の設定情報のフォーマットに差異がある
{
"IsEncrypted": false,
"Values": {
"SettingsB": "FilePath",
"SettingsC": "APIUrl",
"SettingsD": "DefualtUrl",
"SettingsF": {
"Id":"id",
"Pass":"pass"
}
}
}
[
{
"name": "SeetingsB",
"value": "FilePath",
"slotSetting": false
},
{
"name": "SeetingsC",
"value": "APIUrl",
"slotSetting": false
},
{
"name": "SeetingsD",
"value": "DefualtUrl",
"slotSetting": false
},
{
"name": "SeetingsF:Id",
"value": "id",
"slotSetting": false
},
{
"name": "SeetingsF:Pass",
"value": "pass",
"slotSetting": false
}
]
Local.Settings App.Settings

8. Local.Settings.JsonからAppSettingsへ変換
メインメニューからConvert
「LocalSettings To AppSettings」
を選択します。
左側のTextBoxにLocalSettingsの
Json情報を入力すると、右側のテキス
トボックスにAppSetting向けに変換
されたJsonが表示されます。
左側のTextBox内で直接編集すること
も可能です。Jsonフォーマットが崩れ
ている場合はエラーメッセージが表示
されます。
変換後のSlotSettingは上部のラジオ
ボタンで一括で変換することができま
す。
変換後のJsonをコピーしてAzureの
AppSettingsに適応しましょう。

9. Local.Settings.JsonからAppSettingsへ変換
Azureの構成からAppSettingsに適
用を行います。この場合、「高度な
編集」を選択して直接編集を行うと
一括で変更することができます。
「アプリケーションの設定」からひ
とつづつ設定情報を追加する必要が
ないので簡単に追加・編集すること
ができます。

10. AppSettingsからLocal.Settings.Jsonへ変換
ここでは逆の手順でAppSettingsの
情報をLocalSettingsに変換する方
法を説明します。
Azureの構成から「高度な編集」を
選択してJson情報をコピーします。

11. AppSettingsからLocal.Settings.Jsonへ変換
メインメニューからConvert
「AppSettings To LocalSettings
」を選択します。
左側のTextBoxにAppSettingsの
Json情報を入力すると、右側のテキス
トボックスにLocalSetting向けに変換
されたJsonが表示されます。
左側のTextBox内で直接編集すること
も可能です。Jsonフォーマットが崩れ
ている場合はエラーメッセージが表示
されます。
変換後のJsonをコピーしてAzureの
LocalSettingsに適応しましょう。

12. まとめ
当初はAspNet Coreで作ろうと思っていたのですが、設定情報の中にはアイパスや接続文字列など
のセンシティブな情報が含まれることが多いため、サーバ通信するアプリだと情報漏洩の危険性があ
るためClient Sideで完結するBlazor WebAssemblyを選択しました。
VS CodeのAzure Extensionでも設定情
報を編集、ダウンロード・アップロードす
る機能があります。こちらはカジュアルに
運用環境の設定情報を変更したり上げ下げ
したりできます。
明示的に削除しない限り設定情報がなくな
ることはありませんが、変更が簡単にでき
てしまうのと更新時にインスタンスが再起
動するため注意が必要です。
Github : https://github.com/kingkino/AppSettingsConverter
Github Pages : https://kingkino.github.io/AppSettingsConverter/

13. 終わりに
ご清聴ありがとうございました