在Azure Linux App Service中托管angular应用程序 [英] Hosting angular application in azure linux app service

问题描述

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

I am using angular framework to build front-end applications. Is there any way, how can I deploy applications to Azure Linux Application Service?

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

I have created Web App with NodeJS stack and assign it to Linux App Service. I have built my angular app with command ng build --prod and deployed it to this web app. When I open web browser with url: https://<web-app-name.azurewebsites.net/ what can I see is default html page, not my index.html.

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

I was thinking about using static web site on Azure Storage, but what I have found out, I can have only one static web site per one Azure Storage, but let's say I have 10 static web sites. So I do not need to create 10 Azure Storage Account.

推荐答案

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

The reason why you're still seeing the default page is that the server doesn't know to look at index.html which is the entry point for the Angular app. You need to create an index.js file in your Angular app and then include it in the assets section of your angular.json.

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

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

Here is an example index.js file, it also includes redirecting from the non-www domain to the www domain:

// 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 App Service中托管angular应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！