如何运行 Svelte 中的 Netlify 函数

Question

问题描述

我要运行一个Netlify function in a Svelte app。但是，在开发过程中，找不到该功能的请求（404）。我认为这与 Netlify 提供功能的端口有关。

这个问题只在开发中出现。当应用程序部署在 Netlify 上时，函数调用工作正常。在没有 Svelte 的情况下它也能正常工作。

我用过基本的Svelte template。我的 Netflify 函数称为“数字”，只是 returns“42”。

number.js:

const handler = async (event) => {
    try {
        return {
            statusCode: 200,
            body: JSON.stringify(42),
        };
    } catch (error) {
        return { statusCode: 500, body: error.toString() };
    }
};

module.exports = { handler };

当我运行 netlify dev 时，这会使用 Svelte 启动 Netlify 的开发服务器。它记录：

 Loaded function number (http://localhost:8888/.netlify/functions/number).
◈ Functions server is listening on 52041

但是 http://localhost:8888/.netlify/functions/number 确实给出了 404。这里只有 http://localhost:52041/.netlify/functions/number 有效。谁能解释一下第一条日志，这不是不正确吗？

现在的问题是每次调用 netlify dev 时函数端口都会改变。我们可以通过更改 Netlify 配置文件来解决这个问题：

netlify.toml:

[build]
    publish = "public/"
    functions = "functions/"

[dev]
    publish = "public/"
    functions = "functions/"
    port = 8080
    functionsPort = 52041

最后，我想在我的 Svelte 应用程序中添加一个按钮，用于向该功能发出获取请求。

App.svelte:

<script>
    async function getNumber() {
        const url = `http://localhost:52041/.netlify/functions/number`;
        const res = await fetch(url);
        const data = await res.json();
        window.alert(data);
    }
</script>

<button on:click={getNumber}>Click me</button>

这在开发中有效，但在生产中无效：这里 url 应该是 /.netlify/functions/number。

所以我的问题是：

我们如何确定适用于每种情况的正确 URL (dev/prod)？
有没有更优雅的方式在 Svelte 应用程序中调用 Netlify 函数？
特别是，是否可以在两种情况下以某种方式使用 URL /.netlify/functions/number (dev/prod)？

网上相关问题：

Answer 1

我能够很容易地重现您的问题。要知道您是否可以直接在所需端口 8080 上点击该功能，您应该在运行 ntl dev:

之后在日志中查找以下内容

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8080   │
   │                                                 │
   └─────────────────────────────────────────────────┘

为了让它出现，我必须更改 UI 中的设置（在 netlify.toml 中更改它不起作用）。转到 Site Settings -> Functions -> Functions Directory 并将值从 functions 更改为 netlify/functions。查看我进行更改后设置页面的屏幕截图（我的红框）：

我第一次运行 Svelte 和 Netlify 一起工作时遇到了同样的问题——我记得这也为我解决了这个问题，但我找不到 forum/SO 有帮助的问题我找到了。

Answer 2

在 netlify.toml 中，在 [dev] 下，用 targetPort = 8080 代替 port = 8080.

当运行ning ntl dev 时，Netlify 尝试自动检测正在使用的框架并提供一些默认配置选项。 2021 年 12 月，sirv 2.0.0 的发布发生了重大变化——用于提供 Svelte 应用程序——将默认端口从 更改为 5000 到 8080。Netlify 尚未更新以解决此问题，因此在没有额外配置的情况下，它仍然期望 Svelte 应用程序存在于端口 5000 上。

根据Netlify docs，targetPort对应The port for your application server, framework or site generator。

因此，运行 ntl dev 并确保它的 targetPort 配置选项设置为 8080。

如何运行 Svelte 中的 Netlify 函数

How to run a Netlify function in Svelte

netlify

svelte

serverless

netlify-function

如何 运行 Svelte 中的 Netlify 函数

How to run a Netlify function in Svelte

netlify

svelte

serverless

netlify-function

如何运行 Svelte 中的 Netlify 函数