🌎
FlutterWebをGoogle Cloud Storageに自動デプロイ
前回、FlutterWebアプリをGoogle Cloud Storage（以下GCS）にデプロイする方法を記事にしました。
今回は、このデプロイを自動化します。
自動化したいこと
- index.htmlの参照ファイルを変更してbuildする
- buildしたFlutterWebアプリをGCSのバケットにアップロード
- GCS上のindex.htmlをブラウザで立ち上げ動作を確認する
ローカル環境で開発中のFlutterWebアプリをWeb上での動作確認をするのに、いちいちGUIで操作してやっていくのはめんどくさいですよね。
今回の自動化が最適とも限らないので他に良い方法があればコメントください。
手順
大まかな手順は以下の通り
- ローカルで動かす用のindex.htmlとGCS用のindex.htmlを作成
- GCS用にindex.htmlの中身を編集
- シェルスクリプトの作成と編集（こいつが主役）
- ターミナルでシェルスクリプトを実行
1~3は最初のみの手順で、以降は4だけでGCSへ自動アップロードされます。
ローカルで動かす用のindex.htmlとGCS用のindex.htmlを作成
- webファイル直下にconfigディレクトリ作成。その直下にdevディレクトリ、releaseディレクトリを作成し、それぞれindex.htmlを用意する。
実際にbuildするときは、dev/index.htmlかrelease/index.htmlを選んで、web/index.htmlにコピーしてからbuildすることによって使い分けをします。
GCS用にindex.htmlの中身を編集
今回はreleaseディレクトリのindex.htmlをGCS用に編集する。
変更点は３つ
１つ目
<link rel="manifest" href="https://storage.googleapis.com/GCSのバケット名/web/manifest.json">
２つ目
scriptTag.src = 'https://storage.googleapis.com/GCSのバケット名/web/main.dart.js';
３つ目
var serviceWorkerUrl = 'https://storage.googleapis.com/GCSのバケット名/web/flutter_service_worker.js?v=' + serviceWorkerVersion;
シェルスクリプトの作成と編集
ターミナルで以下実行し、run.sh(シェルスクリプト)作成
touch run.sh && chmod +x run.sh
run.shの編集
# $1 はrun.sh実行時の引数をとる。releaseかdevのどちらか。どちらかをweb/index.htmlにコピーしてbuildする
cp web/config/$1/index.html web/index.html && flutter build web --release --web-renderer html
# 一応google-cloud-sdkのパスを通しておく。google-cloud-sdkがインストールしている場所を指定する必要あり。すでにパスを通していれば必要ないコマンド
source '/Users/ユーザー名/google-cloud-sdk/path.bash.inc'
source '/Users/ユーザー名/google-cloud-sdk/path.zsh.inc'
# GCSの指定したバケットにアップロード
gsutil cp -r /Users/ユーザー名/AndroidStudioProjects/プロジェクト名/build/web gs://GCSのバケット名/
# ブラウザで開く
open https://storage.googleapis.com/GCSのバケット名/web/index.html
ターミナルでシェルスクリプトを実行
./run.sh release //releaseは引数
ソースコード
一応Githubのせておきます。
おわりに
自動化するの好き
Discussion