NetlifyにFlutter Webアプリをデプロイする

Flutterで開発した webアプリを公開する方法には、いくつかあります。公式サイトでは以下の3つが挙げられています。

• Firebaseホスティング
• GitHubPages
• Google CloudHosting

今回は、Netlifyへのデプロイを試してみました。

Netlifyとは

https://www.netlify.com/

NetlifyはいわゆるWebサイトのホスティングサービスです。数ある中で私がNetlifyを選択した主な理由は以下の通りです。

• GitHub （プライベートリポジトリ）と連携した自動デプロイ
• Dockerコンテナを使わないこと
• 使い方によっては、無償で使えること
• サブドメイン名が付けれること

他にもVercelなどもありましたが、試してはいません。

デプロイ手順

1. 予め、GitHubのリポジトリにFlatturプロジェクトをプッシュしておきます。
2. [Add new site]から[Import an existing project]を選択します。
3. Connect to Git providerでGitHub を選択します。
4. Flutterプロジェクトのリポジトリを選択します。リポジトリが表示されないときには、
   「Can’t see your repo here? Configure the Netlify app on GitHub.」
   のリンクから、アクセス可能なリポジトリを選択します。
5. 入力フィールドに以下の情報を入力します。
   Build command
if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release
Publish directory
build/web
6. [Deploy site]をクリックします

以上で完了です。

参考サイト）Flutter for Web を Netlify で無料公開する

トラブル

アプリの公開自体は、非常に簡単にできました。

最初はカウントアップのFlutterDemoを公開したのですが、何の問題もありませんでした。

次に、自作のボットアプリを公開したところ、動作はしますが、以前に書いた「XMLHttpRequest error」が出てしまいました。

試行錯誤の結果、自作の応答生成サーバを使わずに、HugginFaceのAPIを使うことで回避できました。

おそらくですが、自作のサーバがhttpsではなく、httpであったためだと思われます。

https対応することも考えましたが、そもそも、VPS上で動作させているのはちょっと不安なので、そろそろMLの推論モデルを実装する方法を真剣に見直したいと思います。

当面は、Hugging Faceに1$/日を支払うことになりますが、モデル数が増えていくことを考えると、別の方法を考えた方がよさそうです。

おまけ

私の知る限りホスティングサービスで作成したサイトのurlは機械的につけられます。もちろん、ドメインを購入してカスタムドメインを割り当てることもできますが、わざわざするほどでもないと思っていました。

今回、サブドメインを自分でつけることができて、いいな、と思ったのでご紹介しておきます。

Site overviewのDomain settingから、Custom domainsを設定することができます。このとき[Add custom domain]ではなく[Options]から[Edit site name]を選択すると、好きな名前をつけることができます。（当然、既存の名前はダメだと思いますが）

例えば、nagomi-informalと入力すると、nagomi-informal.netlify.appがurlとなります。この名前なら、覚えやすくていいですよね。

もしかしたら、他のサービスでもあるかもしれませんが、初めて気づいたので。。