Ensure middleware is output in standalone mode (#32967)

Author: ijjk

packages/next/build/index.ts

@@ -1400,6 +1400,13 @@ export default async function build(
       'utf8'
     )
 
+    const middlewareManifest: MiddlewareManifest = JSON.parse(
+      await promises.readFile(
+        path.join(distDir, SERVER_DIRECTORY, MIDDLEWARE_MANIFEST),
+        'utf8'
+      )
+    )
+
     const outputFileTracingRoot =
       config.experimental.outputFileTracingRoot || dir
 
@@ -1412,7 +1419,8 @@ export default async function build(
             distDir,
             pageKeys,
             outputFileTracingRoot,
-            requiredServerFiles.config
+            requiredServerFiles.config,
+            middlewareManifest
           )
         })
     }
@@ -1961,13 +1969,6 @@ export default async function build(
       )
     }
 
-    const middlewareManifest: MiddlewareManifest = JSON.parse(
-      await promises.readFile(
-        path.join(distDir, SERVER_DIRECTORY, MIDDLEWARE_MANIFEST),
-        'utf8'
-      )
-    )
-
     await promises.writeFile(
       path.join(
         distDir,
@@ -2032,7 +2033,8 @@ export default async function build(
           path.relative(outputFileTracingRoot, distDir),
           SERVER_DIRECTORY,
           'pages'
-        )
+        ),
+        { overwrite: true }
       )
     }
 

packages/next/build/utils.ts

@@ -16,6 +16,7 @@ import {
   SSG_GET_INITIAL_PROPS_CONFLICT,
   SERVER_PROPS_GET_INIT_PROPS_CONFLICT,
   SERVER_PROPS_SSG_CONFLICT,
+  MIDDLEWARE_ROUTE,
 } from '../lib/constants'
 import prettyBytes from '../lib/pretty-bytes'
 import { recursiveReadDir } from '../lib/recursive-readdir'
@@ -40,6 +41,7 @@ import { NextConfigComplete } from '../server/config-shared'
 import isError from '../lib/is-error'
 import { recursiveDelete } from '../lib/recursive-delete'
 import { Sema } from 'next/dist/compiled/async-sema'
+import { MiddlewareManifest } from './webpack/plugins/middleware-plugin'
 
 const { builtinModules } = require('module')
 const RESERVED_PAGE = /^\/(_app|_error|_document|api(\/|$))/
@@ -1156,7 +1158,8 @@ export async function copyTracedFiles(
   distDir: string,
   pageKeys: string[],
   tracingRoot: string,
-  serverConfig: { [key: string]: any }
+  serverConfig: { [key: string]: any },
+  middlewareManifest: MiddlewareManifest
 ) {
   const outputPath = path.join(distDir, 'standalone')
   const copiedFiles = new Set()
@@ -1202,6 +1205,23 @@ export async function copyTracedFiles(
   }
 
   for (const page of pageKeys) {
+    if (MIDDLEWARE_ROUTE.test(page)) {
+      const { files } =
+        middlewareManifest.middleware[page.replace(/\/_middleware$/, '')]
+
+      for (const file of files) {
+        const originalPath = path.join(distDir, file)
+        const fileOutputPath = path.join(
+          outputPath,
+          path.relative(tracingRoot, distDir),
+          file
+        )
+        await fs.mkdir(path.dirname(fileOutputPath), { recursive: true })
+        await fs.copyFile(originalPath, fileOutputPath)
+      }
+      continue
+    }
+
     const pageFile = path.join(
       distDir,
       'server',
@@ -1226,16 +1246,7 @@ const NextServer = require('next/dist/server/next-server').default
 const http = require('http')
 const path = require('path')
 
-const nextServer = new NextServer({
-  dir: path.join(__dirname),
-  dev: false,
-  conf: ${JSON.stringify({
-    ...serverConfig,
-    distDir: `./${path.relative(dir, distDir)}`,
-  })},
-})
-
-const handler = nextServer.getRequestHandler()
+let handler
 
 const server = http.createServer(async (req, res) => {
   try {
@@ -1246,12 +1257,26 @@ const server = http.createServer(async (req, res) => {
     res.end('internal server error')
   }
 })
-const currentPort = process.env.PORT || 3000
+const currentPort = parseInt(process.env.PORT, 10) || 3000
+
 server.listen(currentPort, (err) => {
   if (err) {
     console.error("Failed to start server", err)
     process.exit(1)
   }
+  const addr = server.address()
+  const nextServer = new NextServer({
+    hostname: 'localhost',
+    port: currentPort,
+    dir: path.join(__dirname),
+    dev: false,
+    conf: ${JSON.stringify({
+      ...serverConfig,
+      distDir: `./${path.relative(dir, distDir)}`,
+    })},
+  })
+  handler = nextServer.getRequestHandler()
+
   console.log("Listening on port", currentPort)
 })
     `

test/production/required-server-files.test.ts

@@ -107,6 +107,22 @@ describe('should set-up next', () => {
     if (server) await killApp(server)
   })
 
+  it('should output middleware correctly', async () => {
+    // the middleware-runtime is located in .next/static/chunks so ensure
+    // the folder is present
+    expect(
+      await fs.pathExists(join(next.testDir, 'standalone/.next/static/chunks'))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(
+        join(
+          next.testDir,
+          'standalone/.next/server/pages/middleware/_middleware.js'
+        )
+      )
+    ).toBe(true)
+  })
+
   it('should output required-server-files manifest correctly', async () => {
     expect(requiredFilesManifest.version).toBe(1)
     expect(Array.isArray(requiredFilesManifest.files)).toBe(true)

test/production/required-server-files/pages/middleware/_middleware.js

@@ -0,0 +1,3 @@
+export async function middleware(req) {
+  return new Response('hello from middleware')
+}