fix(dev): Pass host arg from devserver command to dev webpack server (#18309)

Correctly pass the ADDRESS argument to the `sentry devserver ADDRESS`
command to the webpack proxy server.  Before only the ports for backend
and the proxy were passed and the proxy server always was bound to
localhost where it expected the backend as well.

For example for command `sentry devserver 192.168.0.120:8888` the uwsgi
server would correctly listen on the supplied host `192.168.0.120:8889`
but the webpack proxy would listen on `localhost:8888` and also
incorrectly proxying to `localhost:8889`. Which is now fixed by passing
the host part of the `ADDRESS` to the webpack proxy via an env variable
as well.

src/sentry/runner/commands/devserver.py

@@ -160,9 +160,13 @@ def devserver(
         uwsgi_overrides["protocol"] = "http"
 
         os.environ["FORCE_WEBPACK_DEV_SERVER"] = "1"
+
         os.environ["SENTRY_WEBPACK_PROXY_PORT"] = "%s" % proxy_port
         os.environ["SENTRY_BACKEND_PORT"] = "%s" % port
 
+        os.environ["SENTRY_BACKEND_HOST"] = host
+        os.environ["SENTRY_WEBPACK_PROXY_HOST"] = host
+
         # webpack and/or typescript is causing memory issues
         os.environ["NODE_OPTIONS"] = (
             (os.environ.get("NODE_OPTIONS", "") + " --max-old-space-size=4096")

webpack.config.js

@@ -38,6 +38,10 @@ const WEBPACK_MODE = IS_PRODUCTION ? 'production' : 'development';
 // Ports used by webpack dev server to proxy to backend and webpack
 const SENTRY_BACKEND_PORT = env.SENTRY_BACKEND_PORT;
 const SENTRY_WEBPACK_PROXY_PORT = env.SENTRY_WEBPACK_PROXY_PORT;
+// Host to bind the webpack dev server to and host location of backend
+const SENTRY_BACKEND_HOST = env.SENTRY_BACKEND_HOST;
+const SENTRY_WEBPACK_PROXY_HOST = env.SENTRY_WEBPACK_PROXY_HOST;
+
 // Used by sentry devserver runner to force using webpack-dev-server
 const FORCE_WEBPACK_DEV_SERVER = !!env.FORCE_WEBPACK_DEV_SERVER;
 const HAS_WEBPACK_DEV_SERVER_CONFIG = SENTRY_BACKEND_PORT && SENTRY_WEBPACK_PROXY_PORT;
@@ -407,7 +411,7 @@ if (!IS_PRODUCTION) {
 
 // Dev only! Hot module reloading
 if (FORCE_WEBPACK_DEV_SERVER || (HAS_WEBPACK_DEV_SERVER_CONFIG && !NO_DEV_SERVER)) {
-  const backendAddress = `http://localhost:${SENTRY_BACKEND_PORT}/`;
+  const backendAddress = `http://${SENTRY_BACKEND_HOST}:${SENTRY_BACKEND_PORT}/`;
 
   if (SHOULD_HOT_MODULE_RELOAD) {
     // Hot reload react components on save
@@ -428,6 +432,7 @@ if (FORCE_WEBPACK_DEV_SERVER || (HAS_WEBPACK_DEV_SERVER_CONFIG && !NO_DEV_SERVER
     hot: true,
     // If below is false, will reload on errors
     hotOnly: true,
+    host: SENTRY_WEBPACK_PROXY_HOST,
     port: SENTRY_WEBPACK_PROXY_PORT,
     stats: 'errors-only',
     overlay: false,