chore(app-pages-router): Put proxy in front of the server functions (opennextjs#968)

* chore(app-pages-router): Put proxy in front of the server functions

* add port constant

* mv const

* env var for port

Author: sommeeeer

examples/app-pages-router/open-next.config.local.ts

@@ -0,0 +1,34 @@
+import type {
+  OpenNextConfig,
+  OverrideOptions,
+} from "@opennextjs/aws/types/open-next.js";
+
+const devOverride = {
+  wrapper: "express-dev",
+  converter: "node",
+  incrementalCache: "fs-dev",
+  queue: "direct",
+  tagCache: "fs-dev-nextMode",
+} satisfies OverrideOptions;
+
+export default {
+  default: {
+    override: devOverride,
+  },
+  functions: {
+    api: {
+      override: devOverride,
+      routes: ["app/api/client/route", "app/api/host/route", "pages/api/hello"],
+      patterns: ["/api/*"],
+    },
+  },
+  imageOptimization: {
+    override: {
+      wrapper: "dummy",
+      converter: "dummy",
+    },
+    loader: "fs-dev",
+  },
+  // You can override the build command here so that you don't have to rebuild next every time you make a change
+  //buildCommand: "echo 'No build command'",
+} satisfies OpenNextConfig;

examples/app-pages-router/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "scripts": {
     "openbuild": "node ../../packages/open-next/dist/index.js build --build-command \"npx turbo build\"",
+    "openbuild:local": "node ../../packages/open-next/dist/index.js build --config-path open-next.config.local.ts",
+    "openbuild:local:start": "tsx proxy.ts",
     "dev": "next dev --turbopack --port 3003",
     "build": "next build",
     "start": "next start --port 3003",
@@ -12,18 +14,21 @@
   },
   "dependencies": {
     "@example/shared": "workspace:*",
-    "next": "catalog:",
     "@opennextjs/aws": "workspace:*",
+    "express-http-proxy": "2.1.1",
+    "next": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:"
   },
   "devDependencies": {
+    "@types/express-http-proxy": "1.6.7",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "catalog:",
     "postcss": "catalog:",
     "tailwindcss": "catalog:",
+    "tsx": "4.20.5",
     "typescript": "catalog:"
   }
 }

examples/app-pages-router/proxy.ts

@@ -0,0 +1,50 @@
+import { spawn } from "node:child_process";
+
+import express from "express";
+import proxy from "express-http-proxy";
+
+const PORT = process.env.PORT ?? 3000;
+
+// Start servers
+spawn("node", [".open-next/server-functions/default/index.mjs"], {
+  env: { ...process.env, PORT: "3010" },
+  stdio: "inherit",
+});
+
+spawn("node", [".open-next/server-functions/api/index.mjs"], {
+  env: { ...process.env, PORT: "3011" },
+  stdio: "inherit",
+});
+
+const app = express();
+
+app.use(
+  "/api/*",
+  proxy("http://localhost:3011", {
+    proxyReqPathResolver: (req) => req.originalUrl,
+    proxyReqOptDecorator: (proxyReqOpts) => {
+      proxyReqOpts.headers.host = `localhost:${PORT}`;
+      return proxyReqOpts;
+    },
+  }),
+);
+
+// Catch-all for everything else
+app.use(
+  "*",
+  proxy("http://localhost:3010", {
+    proxyReqPathResolver: (req) => req.originalUrl,
+    proxyReqOptDecorator: (proxyReqOpts) => {
+      // We need to ensure the host header is set correctly else you will run into this error in `/server-actions`
+      // Error: Invalid Server Actions request:
+      // `x-forwarded-host` header with value `localhost:3010` does not match `origin` header with value `localhost:3000` from a forwarded Server Actions request. Aborting the action.
+      proxyReqOpts.headers.host = `localhost:${PORT}`;
+      delete proxyReqOpts.headers["x-forwarded-host"];
+      return proxyReqOpts;
+    },
+  }),
+);
+
+app.listen(PORT, () => {
+  console.log(`Proxy running at http://localhost:${PORT}`);
+});

examples/app-pages-router/tsconfig.json

@@ -24,5 +24,10 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules",
+    "open-next.config.ts",
+    "open-next.config.local.ts",
+    "proxy.ts"
+  ]
 }