GitHub Actions for App Service を使ってサーバーサイド Blazor をデプロイしてみよう

8 月の時点でこういうブログ出てたのね！対応早い。

azure.github.io

ということで試してみようと思います。

プログラムの準備

サーバーサイド Blazor を試してみようと思うので dotnet new blazorserver -o GitHubActoinsBlazor と打ち込んで適当にプロジェクトを作ります。 出来たら VS Code で開きます。

とりあえず git のリポジトリーにします。

Add .gitignore すると

ひな型選んで追加できるのも便利。

適当にコミットして GitHub にリポジトリー作って git remote add して git push -u origin master 相当のことを VS Code からやって準備完了！

デプロイ用の資格情報の取得

適当に Azure に Web App を作って発行プロファイルの取得を選んでファイルをダウンロードします。

GitHub のリポジトリーに移動して Settings の Secrets で適当な名前でダウンロードした発行プロファイルのファイルの中身を張り付けてシークレットを作ります。

YAML の準備

では GitHub のリポジトリーの Actions から Set up a workflow yourself を選んで main.yml を以下のような感じで作ります。

name: Build and deploy to Azure

on: [push]

jobs:
  build:
    name: build using
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master

      - name: Setup .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: 3.0.100
    
      - name: Build with dotnet
        run: dotnet build --configuration Release
      - name: dotnet publish
        run: dotnet publish -c Release -r win-x86 --self-contained -o myapp
      
      - name: deploy to Azure
        uses: azure/webapps-deploy@v1
        with:
          app-name: myappservicename
          publish-profile: ${{ secrets.azureWebAppPublishProfile }}
          package: './myapp'

作ると…なんか動き始めた

全部成功したので Web App のページを開いてみると…、ちゃんと動いた！！

試しにちょっと更新してみよう。

凄い勢いで増える気持ちいいカウンターになるようにコードを変更して…

コミットしてプッシュするとビルドが走り始めました

デプロイまで完了したのでアプリを見てみると…ちゃんと更新されてますね！

まとめ

GitHub Actions for App Service 使えば簡単に Azure App Service にデプロイできそうです。 最初に紹介したブログには node.js, Java など何故か .NET 以外の例がふんだんに載ってるので、ここでは最新 .NET Core 3.0 のサーバーサイド Blazor を試してみました！

あとは、サーバーサイド Blazor を Azure に本格的にデプロイするなら SignalR Service 使ったりしたいとかあるけど、まぁそれはコードちょっと変えて構成ちょっと足すだけなので今回はいいかな。