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

Question

我在 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. FTP 使用 FileZilla 和 Web 应用部署中心的 ftp 详细信息。

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

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

感谢您的帮助。

Answer 1

嗯，

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

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

中的 angular 所需的重写规则配置

Answer 2

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

通过选择运行时堆栈作为 ASP.NET V4.7 并选择 OS 作为 Windows 创建 Web 应用程序。
使用 Azure DevOps 部署 angular 应用程序。

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

Answer 3

还有另一种方法可以解决这个问题。背景故事：网络应用程序 OS：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

默认静态-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'。

所以，一切都完成了。

Answer 4

最简单的解决方案：

转到您的应用服务 > 配置

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

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

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

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

您的应用不是运行的原因是它在 Linux 上是运行，并且 Linux 没有 IIS 服务器来处理您节点的路由应用程序（它遵循这些原则）。

观看此视频，此人应得所有荣誉（如果这救了你，请点赞他的视频）：https://www.youtube.com/watch?v=HLhlKIIfaZs

Answer 5

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

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

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

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

PS2：好极了蔚蓝

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

Deployed angular app to Azure web app - But showing the default Azure page

azure

azure-devops

angular

azure-webapps