如何将我的 Nextjs Web 项目从 VS Code 发布到 Azure Web 门户？

Question

Next.js 应用程序部署到 Azure Web 应用程序成功，但更改未反映在实时站点上

我正在开发 Next.js 项目，并使用 Visual Studio Code 将其部署到 Azure Web 应用程序。这是我遵循的过程：

构建项目：我在项目根目录中运行以下命令来创建 .next 文件夹：

npm 运行构建

这成功地在我的项目中生成了 .next 文件夹。

部署到 Web 应用程序：

在 Visual Studio Code 中，我右键单击 .next 文件夹并选择“部署到 Web 应用程序”。 选择目标 Web 应用程序后，我在 Visual Studio Code 的 Azure 部分看到一条状态消息：“部署到应用程序‘xyz-web-name’成功”。

问题：当我在浏览器中导航到我的网站 (https://xyz-web-name.azurewebsites.net) 时，我看不到在最新部署中所做的更改。该网站仍然显示以前的版本。

其他详细信息： Azure 中的 Web 应用程序名称是 xyz-web-name。 如 VS Code 中的状态消息所示，部署似乎已成功完成。 运行 npm run build 后会创建 .next 文件夹，没有任何错误。 我不确定部署后是否遗漏了某个步骤，或者是否存在缓存问题。

我的问题：

部署 .next 文件夹后是否需要执行额外步骤以确保最新更改在实时站点上可见？

这可能是 Azure 上的缓存问题，还是部署后我需要重新启动 Web 应用程序？

将 Next.js 应用程序从 Visual Studio Code 部署到 Azure 以确保正确反映更改的理想流程是什么？

对此的任何帮助或指导将不胜感激！

Answer 1

重新启动站点以使应用服务中的更改生效。

验证更改是否已正确部署到 Azure 应用服务。 导航到 Kudu（也是高级版）并检查已部署应用程序的内容并检查更改是否得到反映。

1. 删除本地的

   .next

   文件夹。
2. 再次运行

   npm run dev

   以重新生成构建。

3. 使用 Visual Studio Code 重新部署到 Azure 应用服务。
4. 清除浏览器缓存并重新加载页面。

我创建了一个 NextJs 项目并部署到 Azure 应用服务（节点 20LTS）

Package.json：

  "name": "sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }

将修改/更新的项目部署到 Azure。

最初，将应用程序部署到 Azure 后单击

Browse Site

时看不到反映的更改。

• 刷新网站后可以看到网站中反映的更改：