Tesshu's Blog

flutter webをnetlifyにデプロイ

February 23, 2020

flutter webをnetfifyにデプロイできたので、その方法をここに残します。

1. build

こちらの方法を使って、netlfiyのCIツールを使って自動build&deployができたらよかったのですが、なぜかうまく行かなかった。(方法があったら教えて欲しい。)

そこで、ローカルでbuildしてできたファイルをデプロイする方法を取った。 gitにpushする前にbuildしなければならない手間はかかるが、そこはしょうがない。 下記コマンドを実行すると、[project repository]/build/webにファイルが生成される。これをデプロイする。

$ flutter build web

2. .gitignoreを修正

.gitignoreファイルを見ると/build/がgitにupする対象から外れているので、/build/webもpushされる様に修正する。 下記の修正で、/build/webだけがgitの管理対象に新しく追加される

    # Flutter/Dart/Pub related
    ・・・
-   /build/
+   /build/*
+   !/build/web

修正ができたらgitにpush

3. netlifyにデプロイ

  1. new site from gitボタンをクリックし、gitからdeployしたいレポジトリを選ぶ。
  2. build setting画面にて、publish directory欄に build/web を入力。その他の項目はデフォでOk
  3. デプロイされたサイトに接続し、デプロイされていることを確認。

4. まとめ

netlifyはほんと便利flutterでwebアプリケーションの作成もできる様になったことだし、作ったものはせっかくなので、デプロイして皆に見てもらおう〜!


Written by Tesshu Ohkura who lives and works in Tokyo building useful things. Click Here or the thumbnail to know me more!