如何使用 Gatsby 和自定义 Webpack 配置进行代理 (netlify-lambda)

Question

我正在使用 Gatsby 和 netlify-lambda，它为 9000 个端口上的函数创建了一个服务器：

http://localhost:9000/myFunctionName

在生产中函数的地址是：

/.netlify/functions/myFunctionName

所以我想要一个开发模式代理，当我调用 /.netlify/functions 时服务 http://localhost:9000/。

我在 gatsby-node.js 中的自定义 Webpack 配置：

exports.modifyWebpackConfig = ({ config, stage }) => {

  if (stage === 'develop') {

    config.merge({

      devServer: {
        proxy: {
          '/.netlify/functions': {
            target: 'http://localhost:9000',
            pathRewrite: {
              '^/\.netlify/functions': ''
            }
          }
        }
      }

    })

  }

}

无效。

我也试过了 https://www.gatsbyjs.org/docs/api-proxy/#api-proxy 但我需要重写 url 而不仅仅是前缀。

将 netlify-lambda 与 Gatsby 一起使用的最佳方法是什么？

谢谢

Answer 1

更新：Gatsby 现在在 this merged PR 中支持 Express 中间件。这将不支持 Webpack Dev Server 代理配置，但将允许使用普通的 Express 代理中间件。

要与 netlify-lambda 一起使用，只需将其添加到您的 gatsby-config.js :

const proxy = require("http-proxy-middleware")

module.exports = {
  developMiddleware: app => {
    app.use(
      "/.netlify/functions/",
      proxy({
        target: "http://localhost:9000",
        pathRewrite: {
          "/.netlify/functions/": "",
        }
      })
    )
  }
}

https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying

不幸的是，Gatsby 开发代理配置根本不可扩展。由于 Gatsby 不使用 webpack 开发服务器，因此其代理选项不可用。参见 https://github.com/gatsbyjs/gatsby/issues/2869#issuecomment-378935446

我通过在我的 Gatsby 开发服务器和 netlify-lambda 服务器前面放置一个 nginx 代理来实现这个用例。这是代理服务器配置的一个非常简化的版本（尾部斜杠很重要）：

server {
    listen       8001;

    location /.netlify/functions {
        proxy_pass        http://0.0.0.0:9000/;
    }

    location / {
        proxy_pass        http://0.0.0.0:8000;
    }
}

无论如何我都在使用 nginx 代理，所以这并不是不需要的额外开发设置，但如果 Gatsby 支持这种常见情况肯定会更好。

如何使用 Gatsby 和自定义 Webpack 配置进行代理 (netlify-lambda)

How to proxy with Gatsby and custom Webpack config (netlify-lambda)

webpack-dev-server

gatsby

netlify