個人的な φ(｀д´)ﾒﾓﾒﾓ…: flutter_web を netlify + github で CI/DI

flutter webで作成したお試しアプリをnetlifyで動かしてみたので、CI/DI (Continuous integration/Continuous Delivery) 設定手順をメモ。
注意すべきは、初期状態でflutterコマンドが使えないのでビルドでひと手間加える必要があること、GitHubのアクセス設定が見つけにくいこと、以上の2点。

設定手順

レポジトリの準備

レポジトリを作成し、netlify.tomlとbuild.shを追加してpushしておく。netlify側のデプロイ設定をnetlify.tomlに記載する。

https://docs.netlify.com/configure-builds/file-based-configuration/

# netlify.toml

[build]
command = "chmod 777 ./build.sh && ./build.sh"
publish = "build/web"

netlify.tomlでは、自前のシェルスクリプトを呼び出すよう指示。

# build.sh

FLUTTER=`which flutter`
if [ -z $FLUTTER ]; then
  if cd flutter 2>/dev/null; then
    git pull
    cd ..
  else
    git clone https://github.com/flutter/flutter.git -b stable --depth=1
  fi
  FLUTTER="flutter/bin/flutter"
fi

$FLUTTER config --enable-web
$FLUTTER pub get
$FLUTTER gen-l10n
$FLUTTER pub run flutter_native_splash:create
$FLUTTER pub run grinder download-data
$FLUTTER build web --release

flutterコマンドをインストールしてflutter buildを行う。
言語リソースの作成や、スプラッシュ画面の作成、gridnerタスク等も追加で実行。

接続とアクセス許可

Site SettingsのBuild & DeployでLink repository。
GitHubを選んで認証を行う。

一覧から対象のレポジトリを選ぶ。レポジトリが表示されていない場合はGitHub側でアクセス設定が必要。
[Configure the Netlify app on Github]リンクからGitHubの設定ページへ。（GitHub内ではSettings > Integrations: Applications > Installed Github Apps > Netlify: Configureとたどる)

Repository accessへリポジトリを追加してやる。

CI設定

netlify.tomlの内容で自動構成されるので、そのままデプロイできる。

以上で、設定完了。
レポジトリへPUSHするたびに自動でデプロイされる。

その他

デプロイのスキップ

デプロイをスキップしたい更新は、最終コミットのメッセージに[skip ci]や[skip netlify]と書いておくとスキップできるようだ。

https://docs.netlify.com/site-deploys/manage-deploys/#skip-a-deploy

ビルド作成API

また、任意のタイミングでデプロイさせたい場合は、APIが簡便に使える。sites/{SITE_ID}/buildsエンドポイントへPOSTするだけで良い。
SITE_ID、TOKEN共にnetlifyで作成・確認できる。

curl -XPOST -H "Authorization: Bearer {TOKEN}" https://api.netlify.com/api/v1/sites/{SITE_ID}/builds

使用したアプリ

コロナ感染症データを読み込むようにしたflutterサンプルコードの改修品を使用した。実用性はほぼないが、過去に大騒ぎしていた頃のさざ波感は味わえる。

個人的な φ(｀д´)ﾒﾓﾒﾓ…

stylesheet

2022-08-03

flutter_web を netlify + github で CI/DI