linux - 如何在 Azure Linux Web 应用程序上托管 Angular

Question

我有一个 Angular 应用程序，我正在尝试使用 Azure 上的 Linux Web 应用程序托管它。 部署后，我无法加载网站，所以经过一些研究，我发现我需要添加一个index.js文件( Cannot GET index.html Azure Linux Web App )

这解决了我无法加载网站的问题。但它并没有解决 Angular 路由问题。如果我导航到 Angular 路线并点击刷新，页面不会重定向到index.html，并且我会收到 404 响应。 (参见http://ecominas-website-qas.azurewebsites.net)

这是我的index.js

var express = require('express');
var server = express();
var options = {
    index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);

我还尝试按照此处所述添加 web.config Hosting angular application in azure linux app service ，但这不会加载 index.html 页面，并且会显示默认的“一切正常，但未找到应用程序”页面。

如何使 Angular 路线正常工作？

谢谢

Answer 1

所以，我终于让它工作了。经过几天的研究和尝试/错误，这是可供将来引用的index.js

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

var server = express();
var options = {
    index: 'index.html',
    redirect: true,
};
server.use(express.static('/home/site/wwwroot', options));
const allowedExt = [
    '.js',
    '.ico',
    '.css',
    '.png',
    '.jpg',
    '.woff2',
    '.woff',
    '.ttf',
    '.svg',
  ];

server.get('*', (req, res) => {
    if (allowedExt.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
        res.sendFile(path.resolve(req.url));
    } else {
        res.sendFile(path.resolve('index.html'));
    }
});
server.listen(process.env.PORT);