webpack-dev-server - 如何使用 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 现在支持 Express 中间件，在 this merged PR 中.这将不支持 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 支持这种常见情况肯定会更好。