Flutter for Web mittels Google Cloud Bucket veröffentlichen

von

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-logo

Bedeutung 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


Link zur Dokumentation

Ö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-logo

Hochladen 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-logo

Ein 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.

Link zur Dokumentation

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

Link zur Dokumentation


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.


Kategorien: DartFlutterGoogle Cloud

Zurück