📑

webサーバーにFlutter webをアップしたら白紙になってる場合の対処

2024/10/10に公開1

まずhttps://url/manifest.jsonにアクセスしてみてください。JSONのデータが表示される場合はディレクトリの変更が必要です。
次にindex.html の中身を確認します。以下の要素を <head> タグの中で探し、書き換えます。

<base href="/">
<link rel="manifest" href="manifest.json">

<body>タグの中にある以下の要素も探して書き換えていきます。

<script src="flutter_bootstrap.js" async></script>

ルートディレクトリのままにしているとブラウザが [親ディレクトリ/manifest.json] のように解釈してしまいNot Foundエラーが発生します。これが原因で白紙が表示されています。
なのでhttps://url/ディレクトリ/manifest.jsonのような形で解釈してもらうことでエラーはなくなると思うので

<base href="/ディレクトリ名">
<link rel="manifest" href="/ディレクトリ名/manifest.json"> 
<script src="/ディレクトリ名/flutter_bootstrap.js" async></script>

のようにindex.htmlを変更してください。
このように変更し更新してhttps://url/ディレクトリ/index.htmlにアクセスしてみるとおそらく白紙の状況は回避されてFlutter webを適切な形で表示できると思います。
もし状況が改善されないのであればurlのディレクトリと書き加えたディレクトリが同じかどうかを確かめて見てください。

Discussion

koji-1009koji-1009

urlをhrefに指定したい場合には、flutter build web --base-href "/url/" を利用することができます。