Question

我正在使用角度框架来构建前端应用程序。有什么方法可以将应用程序部署到Azure Linux应用程序服务？

我已经用NodeJS堆栈创建了Web App，并将其分配给Linux App Service。我已经使用命令ng build --prod构建了我的角度应用程序，并将其部署到了该Web应用程序。当我使用网址https://<web-app-name.azurewebsites.net/打开Web浏览器时，我看到的是默认的html页面，而不是我的index.html。

我当时正在考虑在Azure存储上使用静态网站，但是发现，每个Azure存储只能有一个静态网站，但是假设我有10个静态网站。因此，我不需要创建10个Azure存储帐户。

Answer 1

关于第一个问题，请看一下这篇文章，该文章说明了如何使用node.js应用程序管理URL重写。 link

请接受此答案，并为其他任何问题创建另一个帖子。

Answer 2

您仍然看到默认页面的原因是服务器不知道查看Angular应用程序的入口点index.html。您需要在Angular应用中创建一个index.js文件，然后将其包含在angular.json的资产部分中。

"assets": [
              "src/favicon.ico",
              "src/assets",
              "src/index.js"
            ],

这是一个示例index.js文件，它还包括从非www域重定向到www域：

// Imports
var express = require('express');
var path = require('path');

// Node server
var server = express();

// When you create a Node.js app, by default, it's going to use hostingstart.html as the 
// default document unless you configure it to look for a different file
// https://blogs.msdn.microsoft.com/waws/2017/09/08/things-you-should-know-web-apps-and-linux/#NodeHome
var options = {
    index: 'index.html'
};

// Middleware to redirect to www
server.all("*", (request, response, next) => {
    let host = request.headers.host;

    if (host.match(/^www\..*/i)) {
        next();
    } else {
        response.redirect(301, "https://www." + host + request.url);
    }
});

// This needs to be after middleware configured for middleware to be applied
server.use('/', express.static('/home/site/wwwroot', options));

// Angular routing does not work in Azure by default
// https://stackoverflow.com/questions/57257403/how-to-host-an-angular-on-azure-linux-web-app
const passthroughExtensions = [
    '.js',
    '.ico',
    '.css',
    '.png',
    '.jpg',
    '.jpeg',
    '.woff2',
    '.woff',
    '.ttf',
    '.svg',
    '.eot'
];

// Route to index unless in passthrough list
server.get('*', (request, response) => {
    if (passthroughExtensions.filter(extension => request.url.indexOf(extension) > 0).length > 0) {
        response.sendFile(path.resolve(request.url));
    } else {
        response.sendFile(path.resolve('index.html'));
    }
});

server.listen(process.env.PORT);

在Azure Linux应用程序服务中托管angular应用程序

2 个答案: