Make it easier to use gatsby develop behind a reverse-proxy

[davidbarratt]

Description

It's a little difficult to setup gatsby develop in a docker container behind a reverse proxy. I have an nginx reverse proxy that splits the requests between the UI (gatsby) and an API. For development I want the same setup. I was able to figure it out, but it was not simple.

Steps to reproduce

Instruct gatsby develop to use the open host 0.0.0.0 and port 80

gatsby develop -H 0.0.0.0 -p 80

In gatsby-node.js add something like this:

exports.modifyWebpackConfig = ({ config, stage }) => {
  config.merge((current) => {
    switch (stage) {
      case 'develop':
        // Replace the paths with the reverse-proxy.
        return {
          ...current,
          output: {
            ...current.output,
            publicPath: current.output.publicPath.replace('0.0.0.0:80', '127.0.0.1:8888'),
          },
          entry: {
            ...current.entry,
            commons: current.entry.commons.map(entry => entry.replace('0.0.0.0:80', '127.0.0.1:8888')),
          },
        };
      default:
        return current;
    }
  });

  return config;
};

Expected result

I would love to have a configuration variable to specify what the host/port is (from the browser) so Gatsby is aware that there is a reverse proxy. However, since this is running in nodejs.. couldn't it be determined by the Host (or X-Forwarded-Host) headers?

Actual result

Was rather difficult to figure out what paths were wrong.

Environment

• Gatsby version (npm list gatsby): 1.9.231
• gatsby-cli version (gatsby --version): 1.1.34
• Node.js version: 8.10.0
• Operating System: docker container - debian

[hugo-marques-m3]

Are you still doing this @davidbarratt or you found a better solution?

[davidbarratt]

I'm using this workaround: https://github.com/boggs-love/web/blob/80b5b49da4213e9bba300051d59e00b8dccb6e60/gatsby-node.js

My issue was that it was hard to figure this out. I'm not sure how it could be made easier, but the task is for making this easier.

[hugo-marques-m3]

I think your proposal to have an extra configuration variable (--reverse-proxy or something similar) would be a good way to do it.

[hugo-marques-m3]

Do you have the hot module reload working using this method @davidbarratt ?

[davidbarratt]

yep it works.

It might be best to add some sort of configuration option to specify a different //access// host/port from the one it's running on (i.e. it need to run on 0.0.0.0:80 but I'm accessing it on 127.0.0.1:8888). It could really be any IP address though that I'm accessing it on (i.e. if I'm running it on another machine or something). So perhaps making it configurable would be awesome. The default should probably be that both the serving host/port and access host/port are the same (for most users, they will be).

[hugo-marques-m3]

I can't get it working but I think my setup is a bit different. I'm running a docker container in Marathon/Mesos that has the 8000 port exposed and I need to access it from a url and I can't seem to make it work.

[davidbarratt]

Yeah you might need to mess with the ports (i.e. change 8888 to 8000) but also you might have to look at how I setup the watch container: https://github.com/boggs-love/web/blob/a7c761c29bedc8a9d0982686cf1f5782a21fb665/Dockerfile.local and https://github.com/boggs-love/web/blob/b5c6bb403e3db981f36f25873f0b27ea7b4ae9d3/package.json#L6 and the binding to the host: https://github.com/boggs-love/web/blob/3a89c317453084321d352377a1b76a50ad784583/docker-compose.local.yml#L11

so basically in this line:

publicPath: current.output.publicPath.replace('0.0.0.0:80', '127.0.0.1:8888'),

0.0.0.0:80 should match what's in gatsby develop and 127.0.0.1:8888 should match how you are trying to access it in your web browser.

[davidbarratt]

This might be solved in v2 though? https://github.com/gatsbyjs/gatsby/issues/5264#issuecomment-402055692

[hugo-marques-m3]

Yeah that's what I did and I get the page loading but don't have the hmr working because it tries to access http://0.0.0.0:8000/__webpack_hmr and that obviously doesn't work so I need to reload the page to see the changes.

If it's fixed by v2 then that's great but I don't want to update until it's out of beta (company policy)

[davidbarratt]

This looks like the relevant code: https://github.com/gatsbyjs/gatsby/blob/d13f3c3650593dd4d11d25a0101b9456a96d3ad2/packages/gatsby/src/utils/webpack.config.js#L71-L76

[hugo-marques-m3]

Thank you. I think I now know what to do. 👍

[davidbarratt]

fantastic! well when you get it working, please share it here. :)

[hugo-marques-m3]

Will do, if I can actually make it work haha

[hugo-marques-m3]

Well the thing I thought would make it work didn't but it turns out that flag that they speak in https://github.com/gatsbyjs/gatsby/issues/5264#issuecomment-402055692 is also working in V1 so you can just use that.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍