首页 > 解决方案 > 成功部署仍然会导致默认页面

问题描述

我按照三个不同教程的内容将一个稍作修改的样板 React 应用程序部署到 Azure 应用程序服务。我遇到的主要问题是,虽然所有部署管道和发布都在 Azure DevOps 上成功,但导航到该页面会导致未部署应用服务的默认登录页面;

嘿,Node 开发人员!您的应用服务已启动并正在运行。是时候采取下一步行动并部署您的代码了。

我将简要描述我为达到这一点所采取的步骤:

  1. 我曾经create-react-app生成一个基本模板,运行所有必备命令,摆弄app.js文件及其 CSS 伴侣,并保持index.*不变。
  2. 我用一个未改动的gitignore将所有内容推送到 Github 存储库。
  3. 我在免费计划中创建了一个运行 Linux 和 Node 12 LTS 的应用服务。
  4. 我创建了一个 DevOps 项目,并在其中创建了一个 Pipeline 和一个 Release Pipeline。
  5. 在管道中:我在获取源步骤中通过链接帐户检索了我的存储库源。在代理作业 1 中,我添加了一个npm install元素、一个npm run build元素和一个 Publish Artifact 元素。我将路径设置为build,并将工件名称设置为artifact,发布到 Azure Pipelines。
  6. 在 Release Pipeline 中:我添加了一个工件,该工件从先前的管道中获取其源,并提供了一个源别名_artifact. CD 触发器已启用。我添加了一个具有 Deploy Azure App Service 元素的阶段,$(System.DefaultWorkingDirectory)/_artifact/artifact用作包/文件夹。

当我推送提交或手动触发第一个管道时,一切都会成功,没有明显的错误。发布管道被触发,并且也没有错误地完成。检查日志,artifact准确存储和访问。我可以看到正在访问的正确构建文件。

在 Azure 门户中,我可以看到部署已成功,并具有正确的时间戳、提交名称和管道。但是,当我访问实际站点时,会显示通用页面。

我是否错过了某个关键步骤?我尝试导航到 /index.html、/src/index.html 和一堆其他已知文件的组合,但无济于事;Cannot GET /index.html.

任何见解将不胜感激。

作为参考,我使用了这三个演练:

标签: reactjsazureazure-devopscontinuous-integrationazure-web-app-service

解决方案


这个问题很简单,可以参考下面的帖子。

1. 使用 azure 管道部署 create-react-app

2. 无法在 Azure App 服务上部署 React JS 应用程序

3. React App 部署到 Azure Web 的流程?

建议:

  1. 建议在创建 webapp 时选择 linux。

  2. Configuration->StartupCommand: pm2 serve /home/site/wwwroot --no-daemon --spa


推荐阅读