🌎

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

2 min read

やりたいこと

前回の記事で作成したFlutter Webアプリを実際のWeb上にアップロードして動かしてみたい。ただそれだけです。

https://zenn.dev/matsumaru/articles/562b32fc949df5

前提条件

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

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

GCSの無料枠が下り(外向き)ネットワーク1GBまでなので、ご注意を。気付いたら377円課金していました。。orz

手順

  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

Missing index.html.が出てきたら以下コマンドを叩いて、もう一度flutter build webしましょう。

$ flutter create .

GCSにアップロード

無事にbuildできたらGCSに作成したバケットにアップロードします。ドラック&ドロップでも可能です。

アップロードできたらこんな感じです。

webファイルの中身はこんな感じ。

ブラウザで立ち上げる

GCSのindex.htmlの詳細を見ると公開URLがあるはずなので、それはブラウザで開きましょう。

今回のバケット名であれば、以下の様なURLが作成されます。

https://storage.googleapis.com/exapmle-web-parameters/web/index.html

これでやりたかったことはできました。

おわりに

終わってみると結構簡単でしたが、2日くらい掛かってしまいました。ただ、今回の取り組みでindex.htmlの仕組みが少しわかったので良かったと言い聞かせています。

Discussion

ログインするとコメントできます