在 azure linux 应用服务中托管 Angular 应用程序 [英] Hosting angular application in azure linux app service

问题描述

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

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.

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.

解决方案

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"
            ],

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