search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.28k stars 10.31k forks source link

Advanced Proxying Example doesn't proxy #10985

Closed ghost closed 5 years ago

ghost commented 5 years ago

Description

Trying to use the advanced proxying example as-is for netlify functions.

The proxy doesn't seem to work, as i get 404 when i try to call /.netlify/functions/hello.

I see the same repro when i use the vanilla create-react-app-lambda repository.

Calls to the .netlify endpoint fail to proxy.

Steps to reproduce

  1. clone https://github.com/netlify/create-react-app-lambda
  2. install dependencies
  3. yarn start
  4. attempt to click the call function link.
  5. observe xhr request

Expected result

http://localhost:3000/.netlify/functions/hello should proxy to the hello lambda and return json. (when using gatsby develop, GET to ':8000` for same repro)

Actual result

GET to above url returns home dev server index. (when using gatsby develop, GET request returns 404)

Environment


  System:
    OS: macOS 10.14.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.6.2 - /usr/local/bin/zsh
  Binaries:
    Node: 8.15.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 71.0.3578.98
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.90 => 2.0.91 
    gatsby-image: ^2.0.25 => 2.0.25 
    gatsby-plugin-config: ^1.0.7 => 1.0.7 
    gatsby-plugin-emotion: ^4.0.1 => 4.0.1 
    gatsby-plugin-eslint: ^2.0.1 => 2.0.1 
    gatsby-plugin-mailchimp: ^4.0.0 => 4.0.0 
    gatsby-plugin-manifest: ^2.0.13 => 2.0.13 
    gatsby-plugin-netlify-cms: ^3.0.9 => 3.0.9 
    gatsby-plugin-offline: ^2.0.21 => 2.0.21 
    gatsby-plugin-react-helmet: ^3.0.5 => 3.0.5 
    gatsby-plugin-react-svg: ^2.0.0 => 2.0.0 
    gatsby-plugin-sharp: ^2.0.17 => 2.0.17 
    gatsby-plugin-typography: ^2.2.5 => 2.2.5 
    gatsby-source-datocms: 2.0.1 => 2.0.1 
    gatsby-source-filesystem: ^2.0.13 => 2.0.13 
    gatsby-transformer-remark: ^2.2.0 => 2.2.0 
    gatsby-transformer-sharp: ^2.1.10 => 2.1.10 
    gatsby-transformer-yaml: ^2.1.7 => 2.1.7 
  npmGlobalPackages:
    gatsby-cli: 2.4.8
ghost commented 5 years ago

here's some code to repro:

gatsby-config.js

developMiddleware: app => {
    app.use('/.netlify/functions/', (request, response, next) => {
      console.log('hit');
      next();
    });
    app.use(
      '/.netlify/functions/',
      proxy('/.netlify/functions/', {
        logLevel: 'debug',
        target: 'http://localhost:9000',
        pathRewrite: function(path, req) {
          console.log('proxying', path);
          const newPath = path.replace('/.netlify/functions', '');
          console.log('newPath', newPath);
          return newPath;
        },
        // {
        //   '^/\\.netlify/functions': '',
        // },
      })
    );
  },

starting gatsby

$ yarn start
...
[HPM] Proxy created: /.netlify/functions/  ->  http://localhost:9000
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
...
ℹ ｢wdm｣: Compiled successfully.

curling the netlify function (404 HTML returned)

$ curl http://localhost:8000/.netlify/functions/hello
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title data-react-helmet="true"></title><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#663399"/><script src="/socket.io/socket.io.js"></script></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"></div><script src="/commons.js"></script></body></html>%

output from gatsby server

...
hit
proxying /.netlify/functions/hello
newPath /hello
[HPM] GET /.netlify/functions/hello ~> http://localhost:9000

localhost:9000 does not received any requests.

ghost commented 5 years ago

for reference, when i use changeOrigin: true, the requests hang, and when i don't, they're being proxied to the local dev server (as opposed to localhost:9000).

swyxio commented 5 years ago

hi andy

does this project run if you clone it? https://github.com/sw-yx/jamstack-hackathon-starter

just trying to narrow down what the cause of this is

sidharthachatterjee commented 5 years ago

Hey @andycunn

I just cloned the repository, added Gatsby, the gatsby-config.js from https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying and moved App into pages so that Gatsby creates a page for it and it seems to work fine.

Here's my fork: https://github.com/sidharthachatterjee/create-react-app-lambda

And here is the diff: https://github.com/netlify/create-react-app-lambda/compare/master...sidharthachatterjee:master

Could you please try this and let us know if it works?

sidharthachatterjee commented 5 years ago

Here's a gif

2019-01-11 18 40 25

Ran gatsby develop and npm run build:lambda and then npm run start:lambda

swyxio commented 5 years ago

right. my hunch is andy got some small part of the config wrong. need to check closely.

ghost commented 5 years ago

trying your suggestions. will check back in a bit

ghost commented 5 years ago

hmmm maybe this is environmental? can't get https://github.com/sw-yx/jamstack-hackathon-starter to work.

  1. clone https://github.com/sw-yx/jamstack-hackathon-starter
  2. yarn
  3. yarn start
  4. open localhost:8000
  5. click function button
Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

response is the empty gatsby index

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title data-react-helmet="true"></title><link rel="shortcut icon" href="/icons/icon-48x48.png"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#663399"/><script src="/socket.io/socket.io.js"></script></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"></div><script src="/commons.js"></script></body></html>

any environmental info i can provide that would be helpful?

ghost commented 5 years ago

FYI @sidharthachatterjee i had to use SKIP_PREFLIGHT_CHECK=true to yarn your fork, dunno if that's helpful info. also your fork did not compile when i cloned it: https://github.com/sidharthachatterjee/create-react-app-lambda

Failed to compile.

./src/index.js
Module not found: Can't resolve './App' in '/Workspace/sandbox/jamstack-hackathon-starter/function-bug-tester/src'
swyxio commented 5 years ago

this seems an environment issue then. something is up in your computer that is getting in the way of your ability to do a proxy. read the error messages closely - anything jump out?

ghost commented 5 years ago

there aren't really any error messages. any way i can turn on some more low-level logging there? We do use ZScaler network security in my office. wonder if that could interfere?

ghost commented 5 years ago

that was it! got our IT to turn off our traffic monitor and it's all good now :)

sorry for the confusion. closing this out.

swyxio commented 5 years ago

loll that was rough. glad u figured it out

ghost commented 5 years ago

thanks for your help and your time!