node.jsnext.jsazure-web-app-service

Azure App Service Windows: Error UNKNOWN starting Next.JS Standalone


I would be glad for any tips on how to debug this?

enter image description here


Solution

  • I created Sample Nextjs Standalone app and deployed to Azure web app service windows.

    In next.config file I have set the output to standalone.

    next.config.mjs:

    const nextConfig = {
      output: 'standalone',
    }
    export default nextConfig;
    

    For deploying nextjs app to Azure Web App Windows I added web.config and server.js files to root directory of the project.

    To avoid the error use below server.js file.

    server.js:

    const { createServer } = require("http");
    const next = require("next");
    const port = process.env.PORT || 3000;
    const dev = process.env.NODE_ENV !== "production";
    const app = next({ dev });
    const handle = app.getRequestHandler();
    app.prepare().then(() => {
      createServer((req, res) => {
        handle(req, res);
      }).listen(port, (err) => {
        if (err) throw err;
        console.log(`> Ready on http://localhost:${port}`);
      });
    });
    

    web.config:

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <system.webServer>
    WebSocket support -->
        <webSocket enabled="false" />
        <handlers>
          <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
          <rules>
            <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
              <match url="^server.js\/debug[\/]?" />
            </rule>
            <rule name="StaticContent">
              <action type="Rewrite" url="public{REQUEST_URI}"/>
            </rule>
            <rule name="DynamicContent">
              <conditions>
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
              </conditions>
              <action type="Rewrite" url="server.js"/>
            </rule>
          </rules>
        </rewrite>
        <security>
          <requestFiltering>
            <hiddenSegments>
              <remove segment="bin"/>
            </hiddenSegments>
          </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough" />
           <iisnode watchedFiles="web.config;*.js"/>
      </system.webServer>
    </configuration>
    

    I deployed nextjs app to Azure App service through VS code.

    Azure Web App Output:

    enter image description here