azure - 在 Microsoft Azure 应用服务上部署 Next.js 应用

Question

我正在尝试在 Azure 应用服务上部署一个非常简单的 Next.js 应用。运行“npm run build”后，我使用 azure Visual Studio Code 扩展来完成部署。

该过程成功，如果我通过 FTP 连接到我的应用程序服务，我可以看到 wwwroot 目录中的文件。

但是如果我尝试浏览该应用程序，我会收到“应用程序错误”如果您是应用程序管理员，则可以访问诊断资源。”

访问诊断，这是我看到的消息:

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 > <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b464a4842454c44054a4f4642456b1a051b051b" rel="noreferrer noopener nofollow">[email protected]</a> 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

消息很清楚，但我不确定我做错了什么。这是我第一次尝试在 Azure 上部署基于 Node.js 的应用程序。任何帮助将不胜感激!

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

Answer 1

我遇到了同样的错误，并找到了解决方案作为此问题的答案:unable to deploy next js to azure

Azure 的next start 命令似乎存在问题，需要使用 server.js。那么我做了什么让它运行:

• 根据以下文档创建 server.js 文件:https://nextjs.org/docs/advanced-features/custom-server并更新 server.js 文件，以便它使用环境变量中的端口:

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);
  });
});

• 更新 package.json 脚本:

"dev": "node server.js",
"build": "next build",
"start": "node server.js"

• 添加 web.config 文件(如 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>