无法将下一个 js 部署到 azure

Question

我正在尝试将我的 NEXTJS 应用程序部署到 azure。我创建了一个包含安装了 Node 的 linux 操作系统的 web 应用程序。我的package.json看起来像这样。

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "This package contains all necessary depenencies for frontned",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p $PORT",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "masnad",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next": "^8.0.3",
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  }
}

我首先创建了一个空的 web 应用程序，然后使用了部署服务 kudu，我将我的代码从本地推送到了 azure。

推送到 azure 时的 git 日志如下所示

remote: ..............................................................
remote: npm WARN rollback Rolling back fsevents@1.2.7 failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/home/site/wwwroot/node_modules/fsevents/node_modules/abbrev'
remote: npm WARN rollback Rolling back rc@1.2.8 failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/home/site/wwwroot/node_modules/fsevents/node_modules/rc/node_modules/minimist'
remote:
remote: > ax-frontend@1.0.0 postinstall /home/site/wwwroot
remote: > next build
remote:
remote: ...............
remote: Creating an optimized production build ...
remote:
remote: ...
remote: Compiled successfully.
remote:
remote:  ? /
remote:  ? /_app
remote:  ? /_document
remote:  ? /_error
remote:
remote: npm WARN unistore@3.2.1 requires a peer of preact@* but none is installed. You must install peer dependencies yourself.
remote: audited 6645 packages in 139.904s
remote: found 0 vulnerabilities
remote: npm WARN ax-frontend@1.0.0 No repository field.
remote:
remote: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
remote: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
remote:
remote:
remote: > ax-frontend@1.0.0 build /home/site/wwwroot
remote: > next build
remote:
remote: .........
remote: Creating an optimized production build ...
remote:
remote: ...
remote: Compiled successfully.
remote:
remote:  ? /
remote:  ? /_app
remote:  ? /_document
remote:  ? /_error
remote:
remote:
remote: Done.
remote: Running post deployment command(s)...
remote: Deployment successful.
remote: App container will begin restart within 10 seconds.
To https://node-ax-dev.scm.azurewebsites.net:443/node-ax-dev.git
   ec4d5ad..dcadc02  development -> master

所以我猜它部署得很好。我去了，https://node-ax-dev-1212.azurewebsites.net但什么也没发生。

因此，我在实例中通过 SSH 连接，然后运行npm run dev，它立即向我显示了在 localhost:3000 上运行的项目。

所以我写了https://node-ax-dev-1212.azurewebsites.net:3000但它没有工作，因为它在终端中告诉端口已经在使用中并关闭。

我不确定出了什么问题，但感觉我正确地完成了大部分程序。

我没有添加任何特定的环境变量，所以一切都是全新的。我的目录看起来像这样。

PS 我还尝试在应用程序设置中添加runtime启动文件命令，npm run dev但我认为它不起作用。

Answer 1

截至今天（2021 年 10 月 30 日），您不需要web.configAzure Linux web 应用程序中的文件，该文件不在 IIS 上运行。您所需要的只是一个命令，可以在具有 Node JS 环境的 Linux Web 应用程序上从代码启动 Web 应用程序。

对于您的应用程序，我建议除非需要，否则不要使用自定义端口。在使用命令package.json删除端口规范时next start，应该使用以下建议的方法解决问题。

{
  "name": "frontend",
  ...
  "scripts": {
    ...
    "start": "next start",
    ...
  },
  ...
}

Azure Linux Web 应用服务（容器）默认使用端口 8080 并将其映射到外部 http/https (80/443) 端口。

根据在 Azure Linux Web 应用程序上部署 Node JS / Next JS 应用程序的Microsoft 文档，建议的方法是使用PM2而不是使用npm start(或) node server.js。

PM2它比编写自己的更容易使用server.js，因为PM2默认情况下，Azure Web 应用程序中的 NodeJS 运行时已经可用。PM2还提供全方位服务的应用程序管理平台。

要使用它，只需ecosystem.config.js使用以下代码将文件添加到您的 Next JS 应用程序即可。

module.exports = {
  apps: [
    {
      name: "my-nextJs-site",
      script: "./node_modules/next/dist/bin/next",
      args: "start -p " + (process.env.PORT || 3000),
      watch: false,
      autorestart: true,
    },
  ],
};

根据上面提到的微软文档，部署后的代码PM2一旦找到ecosystem.config.js文件就会自动启动。

当您的项目中找到常见 Node.js 文件之一时，容器会自动使用 PM2 启动您的应用程序：（
bin/www
server.js
app.js
index.js
hostingstart.js
或）以下 PM2 文件之一：process.json或ecosystem.config.js

注意：如果应用程序在此之后仍未自动启动，您可以PM2在 azure webapp 设置中使用以下命令作为启动命令来手动启动它。

pm2 --no-daemon start /home/site/wwwroot/ecosystem.config.js

Answer 2

Azure 需要一个 web.config 文件和一个 server.js/index.js 作为起点，否则它将无法启动。

我建议更改您的文件夹结构。请参阅下面的示例 https://github.com/zeit/next.js/tree/master/examples/custom-server

创建 server.js 文件并从上述 github repo 中复制信息。在 package.json 文件中替换dev build and start为

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

现在您可以只使用node server.js来运行您的代码。

在将其上传到 azure 时，在您的根目录中创建一个文件调用web.config并添加以下代码。

<?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> 

在根据需要通过调整 server.js 文件添加和更改路由之后。

将其推送到 azure，您的应用程序将开始运行，因为 azure 现在将运行 node server.js 并知道在哪里可以找到它。而且该web.config文件将重写 URL，因此您不必添加yoururl.azure.net:3000您只需输入 URL 即可。