UWPアプリをappinstallerを構成してGithub Pages で配布する
はじめに
私は，1年半ほどC#を使ったWindowsデスクトップアプリ開発を行ってきました．その中で，アプリインストーラーを構成したアプリのリリースに関するドキュメントや記事が少なく感じたので，自分なりのリリース方法を紹介したいと思います．
私もまだまだ初心者ですので，もっといい方法はあると思います．あくまで一例として参考になればと思います．
使用環境
Visual Studio 2022 Preview
今回やること
-
UWPのアプリをパッケージ化しAppPackages生成する
1.1. UWPアプリにappinstaller構成ファイルを追加する
1.2. UWPアプリをパッケージ化して，AppPackagesを生成する -
AppPackagesをGithub Pagesにデプロイし，リリースページを作成する
2.1. 生成されたAppPackagesをGithubにアップロードする
2.2. static htmlの構成でGithub Pagesのセットアップをする．
2.3. ワークフローを書き換える
1. UWPのアプリをパッケージ化しAppPackages生成する
UWPアプリを用意します．今回は，サンプルとして，ボタンをクリックするとカウントが1ずつ増えるだけのアプリを用意しました．
サンプルアプリの画像
1.1. UWPアプリにappinstaller構成ファイルを追加する
ここから，appinstaller構成ファイルを追加していきます．
ソリューションエクスプローラーの，メインとなるプロジェクトを右クリックして「追加」から「新しい項目」を選択します．
今回の場合，「SampleApp (Universal Windows)」を右クリック
メニューから「新しい項目」を選択
すると，「アプリ インストーラー」という項目があるので，これを選択して「追加」する．
ここで追加されるPackage.appinstallerの中身は変える必要は無いが，<UpdateSettings/>の中身を変えることで，アップデートのタイミング等をいろいろ設定できる．
詳細は以下のリンクを参照.
https://learn.microsoft.com/ja-jp/uwp/schemas/appinstallerschema/element-update-settings
<?xml version="1.0" encoding="utf-8"?>
<AppInstaller Uri="{AppInstallerUri}"
Version="{Version}"
xmlns="http://schemas.microsoft.com/appx/appinstaller/2017/2">
<MainBundle Name="{Name}"
Version="{Version}"
Publisher="{Publisher}"
Uri="{MainPackageUri}"/>
<UpdateSettings>
<OnLaunch HoursBetweenUpdateChecks="0"/>
</UpdateSettings>
</AppInstaller>
1.2. UWPアプリをパッケージ化して，AppPackagesを生成する
AppPackagesを生成する前に前準備
リリースページを配置するためのgithubのリモートリポジトリを作成しておきましょう．今回はSampleReleasePageという名前で作成しておきました．
ここで作成する理由は，AppPackagesを生成する際に，配置するサイトのURLが必要になるためです．
今回はGithub Pagesを使用するため，サイトのURLはhttps://<ユーザー名>.github.io/<リポジトリ名>/となります．
AppPackagesを生成する
プロジェクトを右クリックして「公開」から「アプリパッケージの作成」を選択
「サイドローディング」を選択し，「次へ」
署名をしないと配布ができないため，「作成」を選択
発行者共通名を入力し，パスワードを設定して「OK」をクリック
現段階で証明書を信頼する必要性はありませんが，信頼するとインストールのテストがしやすいため，「信頼する」から証明書を信頼しておいた方がいいと思います．それが終わったら，「次へ」をクリックします．
今回はビルド時間が長くなるため，x86アーキテクチャのみにチェックを入れて公開しますが，必要に応じてチェックを増やしても大丈夫です．
チェックを付けたら，「次へ」を選択
ここで，インストーラーの場所を公開予定のGithub PagesのURLにしましょう．URLを入力したら「作成」を選択して，しばらくすると，AppPackagesの生成が完了します．
生成が完了すると，下の画面が表示されます．
これでAppPackagesの生成が完了です．では，AppPackagesの中身を見てみましょう．
プロジェクトを右クリックして，「エクスプローラーで開く」を選択すると，エクスプローラーの一番上にAppPackagesというフォルダが生成されているのが分かります．
AppPackagesを開くと，index.htmlと<アプリ名>.appinstaller，<アプリ名>_<バージョン>_Testフォルダが生成されています．今回の場合だと，index.html,SampleApp.appinstaller,SampleApp_1.0.0.0_Testが生成されています．index.htmlはアプリインストーラーの起動やダウロードを行えるようになっているため，このAppPackagesの中身をGithub Pagesで静的Webアプリとしてデプロイすれば，アプリの配布が可能となります．しかし，<アプリ名>_<バージョン>_Testのフォルダはかなり容量があるので，このままstatic htmlテンプレートのyamlでCI/CDを組むと，TimeOutでデプロイが通らない場合が出てくるため，少し加筆する必要があります．
2. AppPackagesをGithub Pagesにデプロイし，リリースページを作成する
2.1. 生成されたAppPackagesをGithubにアップロードする
エクスプローラーから，AppPackagesを右クリックし，「ターミナルで開く」を選択．
そこからは，コマンドラインでGithubにアップロードしましょう．
git init
git add .
git commit -m "<commit message>"
git branch -M main
git remote add origin https://github.com/<UserName>/SampleReleasePage.git
git push -u origin main
2.2. static htmlの構成でGithub Pagesのセットアップをする．
リリースページのGithubのリポジトリから，「Settings」から，左のメニューにある「Pages」をクリック．
「Build and deployment」項目の，Sourceを「Github Actions」に設定し，「Static HTML」の「Configure」をクリックする．
すると，yamlファイルの編集画面に入ります．このぐらいのサイズのアプリであれば，このままでもデプロイが可能かもしれませんが，アプリの容量が増えると，デプロイが通らなくなってくるので，このyamlファイルを編集していきます．
ワークフローを書き換える
ではこのテンプレート書き換えていきます．
アプリの容量が大きすぎることが問題なので，<アプリ名>_<バージョン>_Test以下のファイルを圧縮して，軽くする処理を加えます．
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Pages
uses: actions/configure-pages@v3
#---------------ここから-------------------
- name: Compress files
run: |
for dir in SampleApp_*; do
zip -r "%dir.zip" "$dir"
done
- name: Upload compressed files
uses: actions/upload-artifact@v2
with:
name: compressed-files
path: SampleApp_*/.zip
#----------------ここまで--------------------
# "SampleApp_*"を"<プロジェクト名>_*" に変更してください．
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
# Upload entire repository
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
この処理を追加することで，SampleApp_1.0.0.0_Test以下のファイルを圧縮してアップロードしています．アプリのバージョンはリリース毎に変わるため，SampleApp_*という正規表現で指定しています．
このファイルをコミットし，Github Actionsタブに移動し，しばらく待つと，
ワークフローがすべて通っているので，デプロイ成功です！
動作確認
一度設定からSampleAppをアンインストールします．
開発環境のパッケージ化されてないアプリが既に存在していると，競合が起きて正常にインストールが出来なくなってしまいます．
アンインストールが出来たら，デプロイしたGithub Pagesにアクセスして，インストールできるか確認しましょう．
「アプリを取得する」からインストールできます．
インストール完了！
もし，他人に配布する場合は，公開者証明書を持っていないため，アプリインストール時にエラーが発生します．そのため，「追加のリンク」から，「公開者証明書」をダウンロードして，信用する必要があります．
以上でUWPアプリをappinstallerを構成して配布する手順は終わりです．AppPackagesにリリース用のhtmlファイルが生成されるので，これをデプロイしてしまえばすぐに配布可能です．しかし，配布用のパッケージが重たいので，少し工夫が必要をする必要があります．
少しでもこの記事が参考になれば幸いです．
参考記事
https://learn.microsoft.com/ja-jp/windows/application-management/sideload-apps-in-windows-10
https://learn.microsoft.com/ja-jp/windows/msix/package/packaging-uwp-apps
https://learn.microsoft.com/ja-jp/windows/msix/app-installer/web-install-azure