Gatsby JS 中的 Netlify 函数

安德斯·基特森

我正在尝试按照本教程https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/

我安装了依赖项,这似乎没问题。我在 package.json 中添加了必要的脚本,这是我目前拥有的脚本

"scripts": {
    "build": "gatsby build && netlify-lambda build src/lambda",
    "start": "run-p start:**",
    "start:app": "npm run develop",
    "develop": "gatsby develop",
    "build:app": "gatsby build",
    "build:lambda": "netlify-lambda build src/lambda",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\""
  },

我在根目录中添加了 netlify.toml。

我附加了我的 gatsby-config.js 来添加 developMiddleWare 部分和这里看到的 var 代理

require('dotenv').config()
var proxy = require("http-proxy-middleware")


module.exports = {
  siteMetadata: {
    title: `Creative Portfolio`,
  },
  developMiddleware: app => {
    app.use(
      "/.netlify/functions/",
      proxy({
        target: "http://localhost:9000",
        pathRewrite: {
          "/.netlify/functions/": "",
        },
      })
    )
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-datocms`,
      options: {
        apiToken: process.env.DATO_API_TOKEN,
      },
    },
  ],
  
}

然后我在 src/lambda/hello.js 中创建了以下文件

// For more info, check https://www.netlify.com/docs/functions/#javascript-lambda-function
export function handler(event, context, callback) {
    console.log("queryStringParameters", event.queryStringParameters)
    callback(null, {
      // return null to show no errors
      statusCode: 200, // http status code
      body: JSON.stringify({
        msg: "Hello, World! " + Math.round(Math.random() * 10),
      }),
    })
  }

最后在我的 index.js 页面上,我添加了一个按钮来获取响应。

function handleClick(e) {
    fetch("/.netlify/functions/hello")
  .then(response => response.json())
  .then(console.log)
  }

组件中的按钮

<a href="#" onClick={handleClick}
      Click me
    </a>>

现在对于结果,当我运行 yarn start 时,我在终端中获得了以下代理成功。

info [HPM] Proxy created: /  -> http://localhost:9000
info [HPM] Proxy rewrite rule created: "/.netlify/functions/" ~> ""

当我点击按钮时,我的控制台出现以下错误。

GET http://localhost:8000/.netlify/functions/hello 504 (Gateway Timeout)
Uncaught (in promise) SyntaxError: Unexpected token E in JSON at position 0 

希望有人可以帮助我解决这个问题。

我的控制台中也出现以下错误

[HPM] Error occurred while trying to proxy request hello from localhost:8000 to http://localhost:9000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 
阿布马利克

你忘记了start:lambda脚本中的package.json脚本

"start:lambda": "netlify-lambda serve src/lambda",

参考https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Gatsby Netlify构建错误:无法解析“ / opt / build / repo / src / templates”中的“ ../components/GridTemplate/GridTemplate.js”

在Gatsby JS中缓存

在Netlify AWS Lambda函数中包括模块

Gatsby网站的Netlify构建失败

Gatsby中的外部CSS / JS

Netlify在我的Gatsby JS上引发有关jQuery的错误

如何在netlify-cms Gatsby starter中的`yaml`文件中按范围限制字符数

使用Netlify Dev和Vue JS和Netlify函数进行开发

Netlift构建:gatsby-source-prismic-无效的插件选项| Netlify中的环境变量

Netlify Gatsby构建错误,本地构建

Gatsby Build在Netlify Deploy上失败

Netlify部署在Gatsby构建上失败

@ typeform / embed中断Gatsby Netlify构建

无法部署 Gatsby + Netlify + DatoCMS

在Gatsby JS中动态生成路由

在 Gatsby JS 中获取 WordPress 子菜单

将Gatsby JS网站部署到Netlify时出现“错误运行命令:构建脚本返回了非零退出代码”

动态导入在Netlify中不起作用(react.js)

Gatsby.js 添加全局函数到 checkUserSession

在 Gatsby 中,扩展组件与箭头函数的区别是什么

Netlify Lambda 函数 - 构建失败

Gatsby Redux combineReducers 函数

从函数访问Gatsby组件

在Netlify函数中设置环境变量的正确方法是什么?

如何在我的React应用程序中调用netlify lambda函数?

无法使用Gatsby和Typescript从gatsby-config.js文件中读取siteMetadata对象

gatsby-node.js 中的 Gatsby Node API onPostBuild 无法执行

使用最新版本的Gatsby在gatsby-node.js中找不到getNode()方法

无法从gatsby-config.js多个查询GrahQL中读取siteMetadata对象-Gatsby ReactJS