Zenn
💭

【Flutter】 Windows Desktop App ビルド・リリース方法

2021/06/19に公開
Flutter
tech

前回環境構築まで行ったので、今回はビルド＆リリースまでの流れをまとめます。
Web版はビルドしてサーバーに配置すれば完了で特に詰まるところはないと思うので、今回はデスクトップ(Windows)をターゲットにします。

現在(2021/06/19)Flutterでのデスクトップアプリはベータバージョンです。公式ではデスクトップアプリのリリースはお勧めしていませんし、ここに書いた内容が明日変わっているかも知れません。

環境：Windows 10 Pro

リリースビルド

適当なアプリを作成し、以下のコマンドでリリースビルドが実行できます。

flutter build windows

最初リリースモジュールがどこにあるか分からなかったのですが、以下に出力されています。
myapp\build\windows\runner\Release
※ myapp\windows\runnerでは無いので注意
開発環境では出力されたexeを普通に起動できます。

リリース(配布)方法

基本的には公式のリリースアプリを作成するを参考にすれば問題ないですが、証明書周りで少し引っ掛かりました。
まずは簡単なzip形式を記載し、その後MSIXパッケージ(自己署名)を説明します。

zipファイルを作成する

先程リリースビルドしたフォルダーには、dataフォルダー/flutter及びパッケージのdll/実行ファイル(exe)のみが存在すると思います。
ここに以下のファイルをコピーする必要があります。

  • msvcp140.dll
  • vcruntime140.dll
  • vcruntime140_1.dll

これらのファイルはC:\Windows\System32に含まれているので、リリースビルドフォルダーにコピーしてください。
最終的に以下のような構成になります。

Release
├ data(フォルダー)
├ flutter_windows.dll
├ msvcp140.dll
├ myapp.exe
├ vcruntime140.dll
├ vcruntime140_1.dll
└ プラグインのdll(パッケージをインストールしていなければ無い)

このReleaseフォルダーをzipで固めて渡せば他のPCでも動作するはずです。
この方式で問題がなければ、こちらをお勧めします。

MSIXパッケージ(ローカルテスト用自己署名証明書)

手順としては公式ドキュメントの通りですが、所々追記しています。

  1. msixパッケージをインストール。
pubspec.yaml
dev_dependencies:
  flutter_test:
    sdk: flutter
  msix: ^2.1.3
  1. OpenSSLをダウンロード&インストール。
    今回の用途ではlightバージョンで問題ないです。
  2. 環境変数のPathにOpenSSLの実行ファイルがあるフォルダーを追加する。
    64bit版ならC:\Program Files\OpenSSL-Win64\bin
  3. 以下のコマンドを実行し、秘密鍵(RSA)を作成する。
    C:\直下やProgram Filesなどはアクセス制限でファイル出力が出来ない可能性があるため、C:\Users\[ユーザー名]フォルダー以下を推奨。
C:\Users\[ユーザー名]\selfsigned> openssl genrsa -out mykeyname.key 2048
  1. 秘密鍵を使用して証明書署名要求(CSR)を作成する。
C:\Users\[ユーザー名]\selfsigned> openssl req -new -key mykeyname.key -out mycsrname.csr
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:JP
State or Province Name (full name) [Some-State]:Tokyo
Locality Name (eg, city) []:Chiyoda
Organization Name (eg, company) [Internet Widgits Pty Ltd]:mycompany
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:myserver.mydomain.com
Email Address []:myaddress@email.com

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:p@ssw0rd
An optional company name []:
  1. 秘密鍵と証明書署名要求を使用して署名付き証明書(CRT)を作成する。
C:\Users\[ユーザー名]\selfsigned> openssl x509 -in mycsrname.csr -out mycrtname.crt -req -signkey mykeyname.key -days 10000
  1. 秘密鍵と証明書を使用してpfx証明書を作成する。
C:\Users\[ユーザー名]\selfsigned>openssl pkcs12 -export -out CERTIFICATE.pfx -inkey mykeyname.key -in mycrtname.crt
Enter Export Password:
Verifying - Enter Export Password:
  1. pfx証明書のインストール
    8.1. 生成したpfxファイルをダブルクリックすると証明書のインポートウィザードが起動する
    8.2. 「保存場所：ローカルコンピューター」を選択して次へ
    8.3. 証明書のファイルパスがあっていれば次へ
    8.4. 秘密鍵のパスワードを入力して次へ
    8.5. 証明書をすべて次のストアに配置する → 参照 → 信頼されたルート証明機関を選択し、次へ
    8.6. 完了
  2. msix_configの設定
    msixパッケージの設定をpubspec.yamlに追記する
pubspec.yaml
msix_config:
  display_name: Flutter My App
  publisher_display_name: myserver.mydomain.com
  publisher: E=myaddress@email.com, CN=myserver.mydomain.com, O=mycompany, L=Chiyoda, S=Tokyo, C=JP #下記参照
  identity_name: myapp
  msix_version: 1.0.0.0
  certificate_path: C:\Users\[ユーザー名]\selfsigned\CERTIFICATE.pfx
  certificate_password: p@ssw0rd # 手順7.で入力したパスワード
  icons_background_color: "#ffffff"
  architecture: x64
  capabilities: ""

ここのpublisher:は証明書(mycrtname.crt)をダブルクリックして、詳細 → サブジェクトで表示されている文字列を全て記載する必要がある。
当初パッケージのサンプルにあるCN、O、L、S、Cのみを入力してエラーとなった。

  1. 以下のコマンドでMSIXパッケージ作成する
flutter build windows
flutter pub run msix:create

問題がなければReleaseフォルダーにMSIXパッケージが出力される。

まとめ

公式ドキュメントにあるように、Windows AppStoreから配布する場合は証明書を作成する必要がないという事と、開発内や仲間内で共有する場合zipファイルで問題ない場合が多いと思うので、面倒な自己署名証明書を採用するメリットはほとんどないです。

完全に自己満足の作業となってしまいました。

Discussion