php小编百草今天要为大家介绍一种有趣的技术——在golang二进制文件中嵌入SvelteKit。随着前端技术的不断发展，越来越多的框架和工具涌现出来。而SvelteKit作为一个新兴的框架，通过编译时构建应用程序，提供了更快的加载速度和更高的性能。本文将向大家展示如何将SvelteKit应用程序嵌入到golang的二进制文件中，以实现更方便的部署和分发，让我们一起来了解一下吧！

问题内容

我正在尝试使用 embedd 提供单个二进制文件以包含 sveltekit 网站。我使用 chi 作为我的路由器。但我无法让它发挥作用。我得到下面这些选项之一。据我了解， embedd all: 选项可确保包含以 _ 为前缀的文件。我还尝试了主v1中stripprefix方法的变体：/uibuild/或uibuild/等...

有人可以照亮它吗？

示例存储库

1. 目录列表，在我的例子中为“uibuild”
2. “/”处有空白页，但在 chrome 控制台中，嵌套文件出现 404 错误
3. 主页“/”上出现 404。

​

精简配置：

import preprocess from "svelte-preprocess";
import adapter from "@sveltejs/adapter-static";

/** @type {import('@sveltejs/kit').config} */
const config = {
  kit: {
    adapter: adapter({
      pages: "./../server/uibuild",
      assets: "./../server/uibuild",
      fallback: "index.html",
    }),
  },

  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
};

export default config;

​

main.go v1：

这会产生错误 3。

package main

import (
    "embed"
    "log"
    "net/http"

    chi "github.com/go-chi/chi/v5"
)

//go:embed all:uibuild
var sveltestatic embed.fs

func main() {

    r := chi.newrouter()

    r.handle("/", http.stripprefix("/uibuild", http.fileserver(http.fs(sveltestatic))))

    log.fatal(http.listenandserve(":8082", r))
}

main.go v2：

这将给出错误 2。

static, err := fs.sub(sveltestatic, "uibuild")
    if err != nil {
        panic(err)
    }

r := chi.newrouter()
r.handle("/", http.fileserver(http.fs(static)))

log.fatal(http.listenandserve(":8082", r))

文件结构：

.
├── go.mod
├── go.sum
├── main.go
└── uibuild
    ├── _app
    │   ├── immutable
    │   │   ├── assets
    │   │   │   ├── 0.d7cb9c3b.css
    │   │   │   └── _layout.d7cb9c3b.css
    │   │   ├── chunks
    │   │   │   ├── index.6dba6488.js
    │   │   │   └── singletons.b716dd01.js
    │   │   ├── entry
    │   │   │   ├── app.c5e2a2d5.js
    │   │   │   └── start.58733315.js
    │   │   └── nodes
    │   │       ├── 0.ba05e72f.js
    │   │       ├── 1.f4999e32.js
    │   │       └── 2.ad52e74a.js
    │   └── version.json
    ├── favicon.png
    └── index.html

解决方法

令人沮丧的是，您的“main.go v2”只能添加单个字符。您正在使用：

r.handle("/", http.fileserver(http.fs(static)))

来自文档：

func (mx *mux) 句柄(模式字符串，处理程序 http.handler)

每个路由方法都接受 url 模式和处理程序链。 url 模式支持命名参数（即 /users/{userid}）和通配符（即 /admin/）。可以在运行时通过调用 chi.urlparam(r, "userid")（对于命名参数）和 chi.urlparam(r, "")（对于通配符参数）来获取 url 参数。

所以你传入“/”作为“模式”；这将匹配 / 但没有其他内容；修复使用：

r.handle("/*", http.fileserver(http.fs(static)))
// or
r.mount("/", http.fileserver(http.fs(static)))

我用我的一款精简应用程序对此进行了测试，它运行良好。您可能需要考虑的一项改进是将不存在的文件的任何请求重定向到 / （否则，如果用户使用路径为页面添加书签，则该页面将无法加载）。请参阅此答案了解信息。

除上述内容之外 - 为了演示我在评论中所说的内容，请将 about 添加到 ui/src/routes/+page.svelte 的末尾并重建（两者都是 svelte 和然后去应用程序）。然后，您将能够导航到 about 页面（首先加载主页，然后单击“关于”）。这是由客户端路由器处理的（因此您可能不会看到任何对 go 服务器的请求）。有关如何在直接访问页面（例如 /about）时使其工作的信息，请参阅链接的答案。

这是一个快速（有点hacky）的示例，它将从嵌入式文件系统提供所需的位，并为所有其他请求返回主 index.html （以便 svelte 路由器可以显示所需的页面）。

package main

import (
    "embed"
    "fmt"
    "io/fs"
    "log"
    "net/http"

    "github.com/go-chi/chi/v5"
)

//go:embed all:uibuild
var svelteStatic embed.FS

func main() {

    s, err := fs.Sub(svelteStatic, "uibuild")
    if err != nil {
        panic(err)
    }

    staticServer := http.FileServer(http.FS(s))

    r := chi.NewRouter()

    r.Handle("/", staticServer) // Not really needed (as the default will pick this up)
    r.Handle("/_app/*", staticServer)      // Need to serve any app components from the embedded files
    r.Handle("/favicon.png", staticServer) // Also serve favicon :-)

    r.HandleFunc("/*", func(w http.ResponseWriter, r *http.Request) { // Everything else returns the index
        r.URL.Path = "/" // Replace the request path
        staticServer.ServeHTTP(w, r)
    })

    fmt.Println("Running on port: 8082")
    log.Fatal(http.ListenAndServe(":8082", r))
}