Flutter for Web mittels Google Cloud Bucket veröffentlichen
Ziel des Blogposts ist es, ein für das Web gebautes Flutter Projekt mit minimalem Aufwand über die Google Cloud verfügbar zu machen. Dafür benötigen wir neben einer Flutter App lediglich einen Account bei Google Cloud Plattform. Wenn für das Einrichten die Kommandozeile bevorzugt wird muss zudem das gsutil-Tool installiert werden, worauf wir hier nicht weiter eingehen.
Google Cloud Projekt erstellen
Sollte schon ein passendes Projekt existieren, in dem die Webapp veröffentlicht werden soll, kann dieser Punkt übersprungen werden. Falls nicht muss ein neues erstellt werden. Das kann einfach über die Google Konsole geschehen. Dazu in das Dashboard navigieren, „create a project“ wählen und einen passenden, verfügbaren Namen aussuchen. Hier kann nach erfolgreicher Erstellung auch die Projekt-ID eingesehen werden, welche im nächsten Schritt relevant ist.
Ein Storage Bucket erstellen
Nun können wir ein Storage Bucket erstellen. Dies ist der Container, in dem die Dateien des Flutter Projekts liegen und auf die durch die Clients zugegriffen wird. Dabei sollte man beachten, dass der vergebene Name Teil der URL wird und entsprechend gewählt werden sollte. Für die Erstellung über die Browser-Konsole zum Storage-Browser navigieren und „create bucket“ wählen. Neben dem Namen muss eine passende Region gewählt werden und die Zugriffskontrolle kann direkt auf Uniform gesetzt werden, die restlichen Optionen können auf den Voreinstellungen belassen werden.
Mittels des Kommandozeilentools gsutil kann dasselbe Ergebnis mit dem folgenden Befehl erreicht werden:
gsutil mb -p flutter-in-google-cloud -l europe-west3 -b on gs://exensio-animated-logoBedeutung der verwendeten Flags:
- -p: Gibt das Projekt an, mit dem der Bucket verknüpft wird. Beispiel: flutter-in-google-cloud
- -l: Standort des Buckets an. Beispiel: europe-west3 (für Frankfurt, Single Region).
- -b: Aktiviert den einheitlichen Zugriff auf Bucket-Ebene
Öffentlichen Zugriff erlauben
Damit auf das Flutter Projekt zugegriffen werden kann, muss dieses öffentlich zugänglich sein. Dazu setzen wir die Rechte für „allUsers“. Dazu im neu erstellten Bucket zu den „Permissions“ wechseln und mittels „+ add“ den Dialog öffnen. Dort als neues Mitglied „allUsers“ auswählen und die Rolle „Storage Object Viewer“ wählen. Google warnt davor, dass das Bucket dadurch öffentlich zur Verfügung steht. Das ist genau unser Ziel und kann bestätigt werden.
Denselben Effekt erzielen wir mit dem folgenden gsutil-Befehl:
gsutil iam ch allUsers:objectViewer gs://exensio-animated-logoHochladen der Dateien
Damit haben wir es fast geschafft. Es fehlen nur noch die Daten, welche über das Bucket ausgeliefert werden sollen. Hierzu laden wir alle Dateien und Ordner des gebauten Flutter Projekts aus build/web/ hoch. Über die Oberfläche im Bucket zurück zu „Objekte“ wechseln und die Dateien hochladen.
Auch dies funktioniert über gsutil, dafür einfach <local-uplead-dir> mit dem Pfad zum build/web/ Ordner ersetzen:
gsutil rsync -R <LOCAL-UPLOAD-DIR> gs://exensio-animated-logoEin wichtiger Hinweis zu Änderungen nach dem initialen Veröffentlichen: Google Cloud Storage cached Dateien für 1h. Änderungen werden entsprechend erst nach Ablauf dieser Zeit sichtbar. Falls dies umgangen werden soll können wie in der Dokumentation beschrieben die Metadaten entsprechend überschrieben werden.
Zugriff
Wenn alle hier beschriebenen Schritte erfolgreich durchlaufen sind sollte die Flutter Web App nun unter der folgenden Adresse verfügbar sein:
https://<BUCKET_NAME>.storage.googleapis.com/index.html
Dies ist ein schneller und einfacher Weg statische Webseiten über die Google Cloud zur Verfügung zu stellen, wenn die Domäne keine Rolle spielt. Will man die eigene verwenden, ist dies auch mittels Buckets möglich, erfordert aber ein paar zusätzliche Schritte um eine https Verbindung sicher zu stellen. Mehr dazu finden Sie hier.
Links
Gsutil-Tool: https://cloud.google.com/storage/docs/gsutil
Flutter Reihe:
- Teil 1: Mobile App-Entwicklung mit Google Flutter
- Teil 2: Flutter und Dart im Einsatz für Apps – ein Erfahrungsbericht
- Teil 3: Animationen mit Flutter - das exensio Logo als Ladeanimation
- Teil 4: Flutter for Web mittels Google Cloud Bucket veröffentlichen
- Teil 5: Wie erstellt man Packages mit Google Flutter
- Teil 6: Barcodes Scannen mit Google Flutter
- Teil 7: Wie eine Google Flutter App sprechen lernt
- Teil 8: Flutter meets Video
- Teil 9: Flutter und schimmernde Skelette
- Teil 10: Flutter Design Series: Glas Morphismus
- Teil 11: App State-Management mit Flutter BLoC
- Teil 12: Mit Quick Actions Schnellzugriffe in Flutter Apps umsetzen
- Teil 13: Listen in Listen: Flutter Performance Optimierung
