节点应用程序 zip 文件上传不包括 .next(生产)dir 上传到 Azure WebApp 时

Question

我在使用 zip 部署方法将 Node.js Web 应用程序部署到 Azure Web 应用程序时遇到问题，这是我的组织策略允许的唯一部署选项。

情况是这样的：

我无法使用 Azure VScode 扩展部署应用程序。 我的应用程序需要运行 npm run build 来生成生产版本，这会创建一个 .next 目录。 尽管如此，每次我通过 zip 部署部署构建时，.next 目录都不会包含在 Web 应用程序的文件系统中。 这个缺失的 .next 目录至关重要，因为它包含我的应用程序的默认文档。您能否协助解决为什么未部署此目录，并建议我如何确保包含该目录或如何解决此问题。 TIA

在运行“npm build run”后，我尝试压缩和上传项目，但是 .next 目录没有进入 azure

Answer 1

我使用以下命令创建了简单的 nextjs 应用程序：

npx create-next-app@latest <AppName>

使用

npm run dev

和

npm run build

运行并构建应用程序。

本地输出:

• 当我压缩 Nextjs 应用程序时，我什至没有在文件夹中找到

  .next

  文件，因此我选择了要从主项目文件夹中压缩的文件，如下所示。

现在我可以在 Zip 文件夹中看到

.next

文件，如下所示。

要将 nextjs 应用程序部署到 Azure Web App Windows，您需要 web.config 和 server.js。

感谢@Parveen，清晰的解释。

下面是 web.config 和 server.js 文件。

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>

服务器.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}`);
  });
});

通过使用以下命令，我将 Zip 文件夹部署到 Azure Web 应用程序。

az webapp deploy --resource-group <rg-name> --name <app-name> --src-path <zip-package-path>

我成功部署了 nextjs 应用程序。

Azure Web 应用程序输出：