如何在 flutter web 应用程序中拥有静态 HTML 站点？

Question

我在 Flutter Web 中有一个项目，我想为其创建一个纯 HTML 的登录页面以用于 SEO 目的。我的目的是创建一个服务于更高优先级的静态文件的服务器，如果静态 HTML 文件会 return 请求错误，则应将构建的 flutter web 项目用作后备。

我在 Golang 中创建了这个服务器：

package main

import (
    "net/http"
)

func main() {
    http.ListenAndServe(":2000", professionalServer{})
}

type professionalServer struct{}

var flutterServer = http.FileServer(http.FileSystem(http.Dir("../../../professional/build/web")))
var staticServer = http.FileServer(http.FileSystem(http.Dir("../../../professional/landing-page/dist")))

func (professionalServer) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    res := preflightResponseWriter{OutputData: make(map[string]int)}
    staticServer.ServeHTTP(res, r)
    if res.OutputData["status_code"] == 200 {
        staticServer.ServeHTTP(w, r)
    } else {
        flutterServer.ServeHTTP(w, r)
    }
}

type preflightResponseWriter struct {
    OutputData map[string]int
}

func (preflightResponseWriter) Header() http.Header {
    return http.Header{}
}

func (preflightResponseWriter) Write([]byte) (int, error) {
    return 0, nil
}

func (p preflightResponseWriter) WriteHeader(statusCode int) {
    p.OutputData["status_code"] = statusCode
}

这实际上可行，但问题是 Flutter Web 使用哈希格式的路由（即 http://website.com/#/dashboard) and browser don't send the part that comes after the hashtag, so my golang server sees http://website.com/，然后它检查静态文件服务器是否可以处理这个 URL，它可以等静态文件服务器发送响应。

我该如何解决这个问题？是否可以将完整的 URL 发送到服务器，包括 #?

之后的部分

提前感谢您的帮助！

我是如何解决它的，灵感来自@ResamVi 的建议： 我按照答案中的步骤进行操作，以便我的应用程序最终拥有基本 href /app/.

然后，为了让服务器正常工作，我对我的服务器文件做了这些修改：

package main

import (
    "net/http"
    "strings"
)

func main() {
    http.ListenAndServe(":2000", professionalServer{})
}

type professionalServer struct{}

var flutterServer = http.StripPrefix("/app/", http.FileServer(http.FileSystem(http.Dir("../../../professional/build/web"))))
var staticServer = http.FileServer(http.FileSystem(http.Dir("../../../professional/landing-page/dist")))

func (professionalServer) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    if strings.HasPrefix(r.URL.Path, "/app") {
        rw := preflightResponseWriter{OutputData: make(map[string]int)}
        flutterServer.ServeHTTP(rw, r)
        if rw.OutputData["status_code"] >= 400 && rw.OutputData["status_code"] < 500 {
            http.ServeFile(w, r, "../../../professional/build/web/index.html")
        } else {
            flutterServer.ServeHTTP(w, r)
        }
    } else {
        staticServer.ServeHTTP(w, r)
    }
    // check if starts with /app
    // if no -> staticServer
    // if yes:
    //      simulate request, check if response code is ok
    //      if response code is ok, serve via flutterServer.Serve
    //      else serve file directly
}

type preflightResponseWriter struct {
    OutputData map[string]int
}

func (preflightResponseWriter) Header() http.Header {
    return http.Header{}
}

func (preflightResponseWriter) Write([]byte) (int, error) {
    return 0, nil
}

func (p preflightResponseWriter) WriteHeader(statusCode int) {
    p.OutputData["status_code"] = statusCode
}

现在，以 /app 开头的请求将加载 flutter web 应用程序的资产，或者，如果没有资产满足请求，将加载 index.html。如果请求 URL 不是以 /app 开头，则提供静态文件。

Answer 1

这可能更适合作为评论，如果你想更改网络应用程序的URL strategy，我会问你澄清，但我没有代表（请原谅我，上帝，但这条规则有点限制）

如果您可以随意更改 URL 策略，您可以按照上面 link 中所述在适当的位置添加依赖项：

import 'package:url_strategy/url_strategy.dart';

void main() {
  setPathUrlStrategy();
  runApp(MyApp());
}

另请参阅：

如何在 flutter web 应用程序中拥有静态 HTML 站点？

How to have static HTML sites in a flutter web application?

http

go

flutter

flutter-web