LoginSignup
7

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-10-17

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

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

Netlify 公開設定

1. New site from Git 押下

1.png

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

2.png

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

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

3.png

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

4.png

5. 同画面で Deploy site 押下

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

6. ビルド後に URL を押下

5.png

7. 公開完了

6.png

余談: 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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7