我正在使用angular框架构建前端应用程序。有没有办法,如何将应用程序部署到Azure Linux应用程序服务?
我已经创建了带有NodeJS堆栈的Web App,并将其分配给Linux App Service。我已经使用命令ng build --prod
构建了我的angular应用程序,并将其部署到此web应用程序。当我用url:https://<web-app-name.azurewebsites.net/
打开网页浏览器时,我能看到的是默认的html页面,而不是我的index.html
。
我正在考虑在Azure Storage上使用静态网站,但我发现,每个Azure Storage只能有一个静态网站,但假设我有10个静态网站。因此,我不需要创建10个Azure存储帐户。
发布于 2019-12-29 02:36:13
您仍然看到默认页面的原因是服务器不知道要查看index.html,这是Angular应用程序的入口点。您需要在您的Angular应用程序中创建一个index.js文件,然后将其包含在angular.json的assets部分中。
"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);
发布于 2019-06-11 09:51:15
关于您的第一个问题,请看这篇文章,它解释了如何使用node.js应用程序管理URL重写。link
请接受此答案,并为任何其他问题创建另一个帖子。
https://stackoverflow.com/questions/56532386
复制相似问题