🌎
FlutterWebをGoogle Cloud Storageにデプロイしてみた
やりたいこと
前回の記事で作成したFlutter Webアプリを実際のWeb上にアップロードして動かしてみたい。ただそれだけです。
前提条件
- Google Cloud Projectを作成している
- Google Cloud Storage(以下GCS)のバケットを作成している
- Flutter Webアプリを作成している
今回のGCSバケット名はexapmle-web-parametersとしますので、各自置き換えてください。
手順
- index.htmlの編集
- FlutterWebアプリのbuild
- GCSにアップロード
- ブラウザで立ち上げる
基本GUIで操作していきます。
index.htmlの編集
FlutterWebアプリではJavaScriptに変換したmain.dart.jsを参照して動いています。従って、ローカル環境を参照したままのindex.htmlをGCSにアップロードしてもさっぱり動きません。
なので、index.htmlの参照先を編集します。
index.html
<!DOCTYPE html>
<html>
<head>
//・・・略
//変更
<link rel="manifest" href="https://storage.googleapis.com/exapmle-web-parameters/web/manifest.json">
</head>
<body>
<script>
//・・・略
//変更
scriptTag.src = 'https://storage.googleapis.com/exapmle-web-parameters/web/main.dart.js';
//・・・略
//変更
var serviceWorkerUrl = 'https://storage.googleapis.com/exapmle-web-parameters/web/flutter_service_worker.js?v=' + serviceWorkerVersion;
//・・・略
</script>
</body>
</html>
これでindex.htmlの編集は完了です。
FlutterWebアプリのbuild
次はbuildしましょう。
$ flutter build web
GCSにアップロード
無事にbuildできたらGCSに作成したバケットにアップロードします。ドラック&ドロップでも可能です。
アップロードできたらこんな感じです。
webファイルの中身はこんな感じ。
ブラウザで立ち上げる
GCSのindex.htmlの詳細を見ると公開URLがあるはずなので、それはブラウザで開きましょう。
今回のバケット名であれば、以下の様なURLが作成されます。
https://storage.googleapis.com/exapmle-web-parameters/web/index.html
これでやりたかったことはできました。
おわりに
終わってみると結構簡単でしたが、2日くらい掛かってしまいました。ただ、今回の取り組みでindex.htmlの仕組みが少しわかったので良かったと言い聞かせています。
Discussion