wrangler 0.0.0-e22f9d7 → 0.0.0-e2b7352

package/src/proxy.ts

@@ -1,17 +1,27 @@
+import { createServer as createHttpServer } from "node:http";
 import { connect } from "node:http2";
-import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
-import { createServer } from "node:http";
+import { createServer as createHttpsServer } from "node:https";
+import WebSocket from "faye-websocket";
+import { useEffect, useRef, useState } from "react";
+import serveStatic from "serve-static";
+import { getHttpsOptions } from "./https-options";
+import { reportError } from "./reporting";
+import type { CfPreviewToken } from "./create-worker-preview";
 import type {
   IncomingHttpHeaders,
   RequestListener,
   IncomingMessage,
   ServerResponse,
-  Server,
+  Server as HttpServer,
 } from "node:http";
-import WebSocket from "faye-websocket";
-import serveStatic from "serve-static";
-import type { CfPreviewToken } from "./api/preview";
-import { useEffect, useRef } from "react";
+import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
+import type { Server as HttpsServer } from "node:https";
+import type ws from "ws";
+
+interface IWebsocket extends ws {
+  // Pipe implements .on("message", ...)
+  pipe<T>(fn: T): IWebsocket;
+}
 
 /**
  * `usePreviewServer` is a React hook that creates a local development
@@ -41,13 +51,17 @@ function addCfPreviewTokenHeader(
 function rewriteRemoteHostToLocalHostInHeaders(
   headers: IncomingHttpHeaders,
   remoteHost: string,
-  localPort: number
+  localPort: number,
+  localProtocol: "https" | "http"
 ) {
   for (const [name, value] of Object.entries(headers)) {
     // Rewrite the remote host to the local host.
     if (typeof value === "string" && value.includes(remoteHost)) {
       headers[name] = value
-        .replaceAll(`https://${remoteHost}`, `http://localhost:${localPort}`)
+        .replaceAll(
+          `https://${remoteHost}`,
+          `${localProtocol}://localhost:${localPort}`
+        )
         .replaceAll(remoteHost, `localhost:${localPort}`);
     }
   }
@@ -56,15 +70,33 @@ function rewriteRemoteHostToLocalHostInHeaders(
 export function usePreviewServer({
   previewToken,
   publicRoot,
-  port,
+  localProtocol,
+  localPort: port,
+  ip,
 }: {
   previewToken: CfPreviewToken | undefined;
   publicRoot: undefined | string;
-  port: number;
+  localProtocol: "https" | "http";
+  localPort: number;
+  ip: string;
 }) {
   /** Creates an HTTP/1 proxy that sends requests over HTTP/2. */
-  const proxyServer = useRef<Server>();
-  const proxy = (proxyServer.current ??= createProxyServer());
+  const [proxyServer, setProxyServer] = useState<HttpServer | HttpsServer>();
+
+  /**
+   * Create the instance of the local proxy server that will pass on
+   * requests to the preview worker.
+   */
+  useEffect(() => {
+    if (proxyServer === undefined) {
+      createProxyServer(localProtocol)
+        .then((proxy) => setProxyServer(proxy))
+        .catch(async (err) => {
+          console.error("Failed to create proxy server.", err);
+          await reportError(err);
+        });
+    }
+  }, [proxyServer, localProtocol]);
 
   /**
    * When we're not connected / getting a fresh token on changes,
@@ -80,7 +112,22 @@ export function usePreviewServer({
     { request: IncomingMessage; response: ServerResponse }[]
   >([]);
 
+  /**
+   * The session doesn't last forever, and will eventually drop
+   * (usually within 5-15 minutes). When that happens, we simply
+   * restart the effect, effectively restarting the server. We use
+   * a state sigil as an effect dependency to do so.
+   */
+  const [retryServerSetupSigil, setRetryServerSetupSigil] = useState<number>(0);
+  function retryServerSetup() {
+    setRetryServerSetupSigil((x) => x + 1);
+  }
+
   useEffect(() => {
+    if (proxyServer === undefined) {
+      return;
+    }
+
     // If we don't have a token, that means either we're just starting up,
     // or we're refreshing the token.
     if (!previewToken) {
@@ -92,8 +139,8 @@ export function usePreviewServer({
         // store the stream in a buffer so we can replay it later
         streamBufferRef.current.push({ stream, headers });
       };
-      proxy.on("stream", bufferStream);
-      cleanupListeners.push(() => proxy.off("stream", bufferStream));
+      proxyServer.on("stream", bufferStream);
+      cleanupListeners.push(() => proxyServer.off("stream", bufferStream));
 
       const bufferRequestResponse = (
         request: IncomingMessage,
@@ -103,8 +150,10 @@ export function usePreviewServer({
         requestResponseBufferRef.current.push({ request, response });
       };
 
-      proxy.on("request", bufferRequestResponse);
-      cleanupListeners.push(() => proxy.off("request", bufferRequestResponse));
+      proxyServer.on("request", bufferRequestResponse);
+      cleanupListeners.push(() =>
+        proxyServer.off("request", bufferRequestResponse)
+      );
       return () => {
         cleanupListeners.forEach((cleanup) => cleanup());
       };
@@ -119,10 +168,20 @@ export function usePreviewServer({
     const remote = connect(`https://${previewToken.host}`);
     cleanupListeners.push(() => remote.destroy());
 
+    // As mentioned above, the session may die at any point,
+    // so we need to restart the effect.
+    remote.on("close", retryServerSetup);
+    cleanupListeners.push(() => remote.off("close", retryServerSetup));
+
     /** HTTP/2 -> HTTP/2  */
-    const handleStream = createStreamHandler(previewToken, remote, port);
-    proxy.on("stream", handleStream);
-    cleanupListeners.push(() => proxy.off("stream", handleStream));
+    const handleStream = createStreamHandler(
+      previewToken,
+      remote,
+      port,
+      localProtocol
+    );
+    proxyServer.on("stream", handleStream);
+    cleanupListeners.push(() => proxyServer.off("stream", handleStream));
 
     // flush and replay buffered streams
     streamBufferRef.current.forEach((buffer) =>
@@ -155,7 +214,8 @@ export function usePreviewServer({
         rewriteRemoteHostToLocalHostInHeaders(
           responseHeaders,
           previewToken.host,
-          port
+          port,
+          localProtocol
         );
         for (const name of Object.keys(responseHeaders)) {
           if (name.startsWith(":")) {
@@ -173,8 +233,10 @@ export function usePreviewServer({
       ? createHandleAssetsRequest(assetPath, handleRequest)
       : handleRequest;
 
-    proxy.on("request", actualHandleRequest);
-    cleanupListeners.push(() => proxy.off("request", actualHandleRequest));
+    proxyServer.on("request", actualHandleRequest);
+    cleanupListeners.push(() =>
+      proxyServer.off("request", actualHandleRequest)
+    );
 
     // flush and replay buffered requests
     requestResponseBufferRef.current.forEach(({ request, response }) =>
@@ -191,38 +253,59 @@ export function usePreviewServer({
       const { headers, url } = message;
       addCfPreviewTokenHeader(headers, previewToken.value);
       headers["host"] = previewToken.host;
-      const localWebsocket = new WebSocket(message, socket, body);
+      const localWebsocket = new WebSocket(message, socket, body) as IWebsocket;
       // TODO(soon): Custom WebSocket protocol is not working?
       const remoteWebsocketClient = new WebSocket.Client(
         `wss://${previewToken.host}${url}`,
         [],
         { headers }
-      );
+      ) as IWebsocket;
       localWebsocket.pipe(remoteWebsocketClient).pipe(localWebsocket);
       // We close down websockets whenever we refresh the token.
       cleanupListeners.push(() => {
-        localWebsocket.destroy();
-        remoteWebsocketClient.destroy();
+        localWebsocket.close();
+        remoteWebsocketClient.close();
       });
     };
-    proxy.on("upgrade", handleUpgrade);
-    cleanupListeners.push(() => proxy.off("upgrade", handleUpgrade));
+    proxyServer.on("upgrade", handleUpgrade);
+    cleanupListeners.push(() => proxyServer.off("upgrade", handleUpgrade));
 
     return () => {
-      cleanupListeners.forEach((d) => d());
+      cleanupListeners.forEach((cleanup) => cleanup());
     };
-  }, [previewToken, publicRoot, port, proxy]);
+  }, [
+    previewToken,
+    publicRoot,
+    port,
+    localProtocol,
+    proxyServer,
+    // We use a state value as a sigil to trigger reconnecting the server.
+    // It's not used inside the effect, so react-hooks/exhaustive-deps
+    // doesn't complain if it's not included in the dependency array.
+    // But its presence is critical, so Do NOT remove it from the dependency list.
+    retryServerSetupSigil,
+  ]);
 
   // Start/stop the server whenever the
   // containing component is mounted/unmounted.
   useEffect(() => {
-    proxy.listen(port);
-    console.log(`⬣ Listening at http://localhost:${port}`);
+    if (proxyServer === undefined) {
+      return;
+    }
+
+    waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 })
+      .then(() => {
+        proxyServer.listen(port, ip);
+        console.log(`⬣ Listening at ${localProtocol}://${ip}:${port}`);
+      })
+      .catch((err) => {
+        console.error(`⬣ Failed to start server: ${err}`);
+      });
 
     return () => {
-      proxy.close();
+      proxyServer.close();
     };
-  }, [port, proxy]);
+  }, [port, ip, proxyServer, localProtocol]);
 }
 
 function createHandleAssetsRequest(
@@ -250,8 +333,15 @@ const HTTP1_HEADERS = new Set([
   "http2-settings",
 ]);
 
-function createProxyServer() {
-  return createServer()
+async function createProxyServer(
+  localProtocol: "https" | "http"
+): Promise<HttpServer | HttpsServer> {
+  const server: HttpServer | HttpsServer =
+    localProtocol === "https"
+      ? createHttpsServer(await getHttpsOptions())
+      : createHttpServer();
+
+  return server
     .on("request", function (req, res) {
       // log all requests
       console.log(
@@ -280,7 +370,8 @@ function createProxyServer() {
 function createStreamHandler(
   previewToken: CfPreviewToken,
   remote: ClientHttp2Session,
-  port: number
+  localPort: number,
+  localProtocol: "https" | "http"
 ) {
   return function handleStream(
     stream: ServerHttp2Stream,
@@ -293,10 +384,57 @@ function createStreamHandler(
       rewriteRemoteHostToLocalHostInHeaders(
         responseHeaders,
         previewToken.host,
-        port
+        localPort,
+        localProtocol
       );
       stream.respond(responseHeaders);
       request.pipe(stream, { end: true });
     });
   };
 }
+
+/**
+ * A helper function that waits for a port to be available.
+ */
+export async function waitForPortToBeAvailable(
+  port: number,
+  options: { retryPeriod: number; timeout: number }
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      doReject(new Error(`Timed out waiting for port ${port}`));
+    }, options.timeout);
+
+    const interval = setInterval(checkPort, options.retryPeriod);
+    checkPort();
+
+    function doResolve() {
+      clearTimeout(timeout);
+      clearInterval(interval);
+      resolve();
+    }
+
+    function doReject(err: unknown) {
+      clearInterval(interval);
+      clearTimeout(timeout);
+      reject(err);
+    }
+
+    function checkPort() {
+      // Testing whether a port is 'available' involves simply
+      // trying to make a server listen on that port, and retrying
+      // until it succeeds.
+      const server = createHttpServer();
+      server.on("error", (err) => {
+        // @ts-expect-error non standard property on Error
+        if (err.code !== "EADDRINUSE") {
+          doReject(err);
+        }
+      });
+      server.listen(port, () => {
+        server.close();
+        doResolve();
+      });
+    }
+  });
+}