2021-04-26

Azure Static Web Apps: カスタムドメインを設定する

Azure AzureStaticWebApps

tsubakimoto/toumei-blazor は Azure Static Web Apps にデプロイしているが、まだカスタムドメインを設定していなかったので設定する。

docs.microsoft.com

今回は toumei.example.net の形式でカスタムドメインを設定する。

手順

Azure ポータル > Static Web Apps > カスタムドメイン > 追加
カスタムドメインに toumei.example.net と入力し、表示される CNAME の値をコピーする（まだ追加しない）
ドメインの DNS 設定画面にて、 CNAME にコピーした値を定義する
Azure ポータルに戻り、カスタムドメインの検証を行い、検証に成功することを確認する
カスタムドメインを追加する

Azure ポータルでの設定

f:id:tech-tsubaki:20210425231316p:plain

DNS の設定（Google ドメイン）

f:id:tech-tsubaki:20210425231327p:plain

これで設定は完了する。
DNS の反映が終われば、カスタムドメインでページにアクセスすることができる。

f:id:tech-tsubaki:20210425231259p:plain

2021-04-25

Blazor WebAssembly: クエリパラメーターからパスパラメーターに変更する

Blazor WebAssembly Blazor WebAssembly .NET Core Blazor

f:id:tech-tsubaki:20210425223059p:plain

github.com

tsubakimoto/toumei-blazor で元々カラーコードはクエリパラメーターで受け取っていた。
ただ、パラメーターといっても1種類しかないので、パスパラメーター /palette/{カラーコード} に変えることにする。

docs.microsoft.com

パスパラメーターを受け付けたい Razor コンポーネントにて以下の実装を行う。

@page ディレクティブに省略可能なパスパラメーターを定義する
@code ディレクティブにパスパラメーターをセットするプロパティを定義する
パスパラメーターが指定されない場合は既定値をセットする

コードで説明すると下記となる。

@page "/palette/{color?}" // #1
@inject IJSRuntime JS
@inject NavigationManager NavManager

/* 中略 */

@code {
  // #2
  [Parameter]
  public string Color { get; set; }

  protected override void OnParametersSet()
  {
    Color = Color ?? "000000"; // #3
  }

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    await JS.InvokeVoidAsync("CalcColor", Color);
  }
}