Zenn
🌎

FlutterWebをGoogle Cloud Storageにデプロイしてみた

2021/10/13に公開
Flutter
GCP
tech

やりたいこと

前回の記事で作成したFlutter Webアプリを実際のWeb上にアップロードして動かしてみたい。ただそれだけです。
https://zenn.dev/matsumaru/articles/562b32fc949df5

前提条件

  • Google Cloud Projectを作成している
  • Google Cloud Storage（以下GCS）のバケットを作成している
  • Flutter Webアプリを作成している

今回のGCSバケット名はexapmle-web-parametersとしますので、各自置き換えてください。

手順

  1. index.htmlの編集
  2. FlutterWebアプリのbuild
  3. GCSにアップロード
  4. ブラウザで立ち上げる

基本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の仕組みが少しわかったので良かったと言い聞かせています。

GitHubで編集を提案

Discussion