Flutter for Web を Netlify で無料公開する


公開するプロジェクト用意

以下の対応事項を済ませておくこと。

Netlify 公開設定

1. New site from Git 押下

2. プロジェクトを配置したホスティングサービスを選択

3. 公開するプロジェクトを選択

  • 備考
    • プロジェクトが表示されない場合、 Netlify からの閲覧権限が設定されてない可能性あり。

4. 以下の入力フィールドに情報入力

  • 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

5. 同画面で Deploy site 押下

  • 押下後、flutter のリリースビルドが行われるため、終了まで待つ。

6. ビルド後に URL を押下

7. 公開完了

余談: netlify.tomlでコマンド管理

  • 上記の 4 の工程では、リリースビルドのコマンドを直書きしている。
  • しかし、netlify.tomlを使用すると、コマンドをローカルで管理可能となる。
  • 参考 URL
./netlify.toml
[build]
  command = "chmod 777 ./build.sh && ./build.sh"
  publish = "build/web"
./build.sh
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