在 Varnish 代理后面的 Angular 5.6.0 中设置文档根目录

Question

我的 Angular 5 应用程序将运行在 varnish 代理后面。假设我们的公司网站运行s 在 test.corporate.com 上，而我的本地计算机是 dev5.local，那么 varnish 现在暂时由系统管理配置为指向 https://test.corporate.com/albert to http://dev5.local:4200/（但是他们可以将其指向我们喜欢的任何东西）。这是代理，而不是重定向。在我的 angular index.html 运行 ng-serve 中，我配置了 documentroot:

<base href="/albert/">

当我在浏览器中进入 https://test.corporate.com/albert/, the html of my index.html loads, but all other files (css, javascript) fail to load. The same happens when I go to http://dev5.local:4200/ 时，但由于 documentroot，后者不起作用是有道理的。

我们已经尝试了上述 varnish 配置和 documentroot 的变体，但似乎没有任何效果。使用上面的配置，这是对我来说最有意义的变体，它尝试并未能加载 https://test.corporate.com/albert/inline.bundle.js . I also seem to be unable to manually edit the url and see if I can load that js file in my browser, e.g. https://test.corporate.com/albert/albert/inline.bundle.js 还给出了带有重定向的 "not found"。

由于 html 会加载，因此它应该与 http 和 https 无关。

Answer 1

您有两个选择，要么遍历所有静态文件并将它们的相对路径添加到 index.html。

或

您可以使用类似 Grunt with packages like grunt-injector 的任务运行程序，您可以使用它检查项目文件夹中要使用的所有静态文件，它会自动在 index.html 文件。

Answer 2

您可以这样做（取决于路由器配置）：

<!--angular routing-->
<script type="text/javascript">
   document.write('<base href="' + document.location.href.split('#')[0] + '" />');
</script>

Answer 3

我不确定 Varnish Proxy，但是，我在 apache-tomcat 服务器中部署我的代码时遇到了同样的问题，并且不是从“/”而是从“/anotherPath/”为站点提供服务在 angular 4.

我在构建应用程序时所做的是在构建命令中添加了以下 2 个属性

ng build --prod --base-href "/" --deployUrl="/anotherPath/"

Post这个版本，我在新创建的dist文件夹中的index.html文件中将<base href="/">更新为<base href="/anotherPath/">，然后将其部署到服务器。

这是解决我的问题的解决方法。

修复此问题后，您可能还会遇到另一个问题，即重新加载将不起作用，因为您将从“/anotherPath/”而不是“/”提供服务。例如，重新加载 https://test.corporate.com/albert/user/login 你会得到一个错误。

为此，我们在 apache-tomcat 中配置了重写规则。如果您需要更多信息，请告诉我。

在 Varnish 代理后面的 Angular 5.6.0 中设置文档根目录

setting document root in Angular 5.6.0 behind Varnish proxy

varnish

document-root

angular