将 Angular 应用程序部署到 Azure Web 应用程序 - 但显示默认 Azure 页面答案

【问题标题】：Deployed angular app to Azure web app - But showing the default Azure page将 Angular 应用程序部署到 Azure Web 应用程序 - 但显示默认 Azure 页面
【发布时间】：2021-03-25 18:03:47
【问题描述】：

我在 Azure 中创建了一个 Web 应用程序来托管一个 Angular 应用程序。我选择了运行时如下：

但我的本地设置详情：

节点版本：v13.0.1
Angular 版本：8.2.11

我使用 Anguler cli 创建应用程序，然后运行 ng build --prod 创建 dist。然后我尝试了以下方法将 Angular 应用程序部署到 Web 应用程序： 1. 在 VS Code 中使用 Azure App Service 扩展 2. 使用 FileZilla 的 FTP 以及来自 Web 应用程序部署中心的 ftp 详细信息。

但是当我浏览网址时：https://eventzweb.azurewebsites.net/ 我从 Angular 应用程序中看到以下页面，但没有看到我的页面。

知道为什么会这样吗？为什么我没有看到我的页面？

感谢您在高级方面的帮助。

【问题讨论】：

您是否通过以下答案解决了问题？如果他们为您工作，您可以Accept it as an Answer，这可能对阅读此主题的其他社区成员有所帮助。

标签： angular azure azure-devops azure-webapps

【解决方案1】：

最简单的解决方案：

转到您的应用服务 > 配置

在配置下，选择选项卡 -> 常规设置

在启动命令字段中，输入以下命令：

pm2 serve /home/site/wwwroot --no-daemon --spa

现在您的应用应该能够显示而不是默认页面了。

您的应用未运行的原因是因为它在 Linux 上运行，而 Linux 没有 IIS 服务器来处理您的节点应用的路由（它遵循这些路线）。

观看这个视频，这个人值得所有的功劳（如果这救了你，就喜欢他的视频）：https://www.youtube.com/watch?v=HLhlKIIfaZs

【讨论】：

这拯救了我的一天。非常感谢@LuisDev99
我正在尝试“ng serve”，但很困惑为什么即使软件包在站点/wwwroot 中可用，应用程序也没有发布。非常感谢
应用程序在启动时因 pm2: not found 而崩溃
没有办法为这个答案付费。谢谢路易斯，你让我很开心。我快疯了，我知道有没有 config.web 与我的 linux 操作系统无关

【解决方案2】：

对我有用的是让 Node 12 运行时 + 在 @LouisDev22 给出的常规设置中设置启动脚本（非常感谢）：

pm2 serve /home/site/wwwroot --no-daemon --spa

然后在应用程序设置中将SCM_TARGET_PATH 变量设置为/home/site/wwwroot，仅当您第一次使用另一个运行时运行应用服务时才需要此变量。

PS1：您可以在应用服务配置菜单中找到常规和应用程序设置。

PS2：Bravo Azure

【讨论】：

【解决方案3】：

嗯，

您需要一个网络服务器来运行您的 Angular 网站。默认情况下，Node Runtime 堆栈没有运行 Web 服务器，因此无法显示任何内容。

您可以使用一些 node.js 网络服务器 (express.js) 来托管您的网站，但这需要额外的 npm 包和配置。更好的选择是将操作系统切换到 Windows。然后 IIS 将用于托管您部署到应用服务的网站。查看https://angular.io/guide/deployment#server-configuration 以了解 IIS 中托管的 Angular 所需的重写规则配置

【讨论】：

【解决方案4】：

还有另一种方法可以解决此问题。背景故事：网络应用操作系统：Linux，运行时堆栈：Node.js

您可以从此处登录容器。 ssl login entry

运行pm2 list 已经有一个名为“default-static-stie”的静态站点。它位于“/opt/startup”中。然后运行pm2 show default-static-stie，然后您可以浏览相关文件夹以获取更多详细信息。

正如控制台中的消息所建议的那样，“'/home' 之外的任何数据都不会被持久化。”

因此，您只需将现有项目复制到“/home”文件夹即可。对“startup.sh”和“default-static-site.js”进行一些修改。

startup.sh：

#!/bin/sh

#turn off the default static site
pm2 stop default-static-site

# Enter the source directory to make sure the script runs where the user 
 expects
cd "/home/site/wwwroot"

export NODE_PATH=$(npm root --quiet -g):$NODE_PATH
if [ -z "$PORT" ]; then
            export PORT=8080
fi

pm2 start -n my-static-site  --no-daemon /home/my-static-site/default-static-site.js

默认静态站点.js：

server.use('/', express.static('/home/site/wwwroot', options));

顺便在上面那行前加一个代码sn-p：

server.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: '/home/site/wwwroot' });

});

最后： put a start up command

在此处输入启动命令，以引用“/home/my-static-site/startup.sh”。

所以，一切都完成了。

【讨论】：

【解决方案5】：

我通过以下方式解决了这个问题：

通过将运行时堆栈选择为 ASP.NET V4.7 并将操作系统选择为 Windows 来创建 Web 应用程序。
使用 Azure DevOps 部署 Angular 应用程序。

步骤在这篇博文中：http://dot-net-box.blogspot.com/2020/01/deploy-angular-8-app-to-azure-with.html

【讨论】：