4

I'm trying to deploy a really simple Next.js app on Azure app service. After running 'npm run build' I use azure Visual Studio Code extensions to finalise the deployment.

The process is successful, and if I connect to my app service via FTP I can see the files in the wwwroot directory.

But if I try to browse the app I get 'Application Error If you are the application administrator, you can access the diagnostic resources.'

Accessing the diagnostic this is the message I see:

48:17.620204936Z Generating app startup command
2019-03-24T08:48:17.635158983Z Found scripts.start in /home/site/wwwroot/package.json
2019-03-24T08:48:17.649648532Z Running npm --prefix=/home/site/wwwroot start
2019-03-24T08:48:18.702111743Z 
2019-03-24T08:48:18.702164243Z > macingo.admin@1.0.0 start /home/site/wwwroot
2019-03-24T08:48:18.702170943Z > next start
2019-03-24T08:48:18.702174443Z 
2019-03-24T08:48:18.791276730Z /home/site/wwwroot/node_modules/.bin/next: line 1: ../next/dist/bin/next: not found

The message is clear but I m not sure what I m doing wrong. This is the first time I m trying to deploy a node.js based application on Azure. Any help would be really appreciated!

/home/site/wwwroot/node_modules/next/dist/bin/next

antobonfiglio
  • 41
  • 2
  • 5

2 Answers2

2

I faced the same error and found the solution as an answer in this question: unable to deploy next js to azure

It seems Azure has problems with the next start command and needs a server.js instead. So what I did to get it running:

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

const port = process.env.PORT || 3000;

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;

    if (pathname === "/a") {
      app.render(req, res, "/a", query);
    } else if (pathname === "/b") {
      app.render(req, res, "/b", query);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log("> Ready on http://localhost:", port);
  });
});
  • update the package.json scripts:
"dev": "node server.js",
"build": "next build",
"start": "node server.js"
  • add a web.config file (as described in the post:
<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:
     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled
      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <!--<iisnode watchedFiles="web.config;*.js"/>-->
  </system.webServer>
</configuration> 
Matti Nannt
  • 266
  • 2
  • 6
2

I tried change the npm start command on package.json and this worked for me.

"dev": "next dev",
"build": "next build",
"start": "/home/site/wwwroot/node_modules/next/dist/bin/next",
"startLocal" : "next start",
"lint": "next lint"