将角度应用程序部署到Azure Web应用程序-但显示默认的Azure页面

Question

我在Azure中创建了一个Web应用程序来托管角度应用程序。 我将运行时选择为波纹管：

但是我的本地设置详细信息：

1. 节点版本：v13.0.1
2. 角度版本：8.2.11

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

但是当我浏览URL时：https://eventzweb.azurewebsites.net/ 我在Angular应用程序中看到以下页面，但看不到我的页面。

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

感谢您对高级的帮助。

Answer 1

最简单的解决方案：

转到您的应用服务>配置

在“配置”下，选择标签->“常规设置”

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

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

现在，您的应用应该可以显示，而不是默认页面。

您的应用未运行的原因是因为它在Linux上运行，并且Linux没有IIS服务器来处理您的节点应用的路由（沿这些方向运行）。

观看此视频，这家伙值得所有功劳（如果保存了您的话，请像他的视频一样）：https://www.youtube.com/watch?v=HLhlKIIfaZs

Answer 2

好吧

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

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

Answer 3

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

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

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

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

PS2：Bravo Azure

Answer 4

我通过以下方法解决了此问题：

1. 通过选择Runtime堆栈作为ASP.NET V4.7并选择OS作为Windows来创建Web应用程序。
2. 使用Azure DevOps部署角度应用程序。

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

Answer 5

还有另一种方法可以解决此问题。 背景故事：Web App 操作系统：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

default-static-site.js：

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

顺便说一句，在上一行之前添加一个代码段：

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”。

所以，一切都完成了。