angularvarnishdocument-root

setting document root in Angular 5.6.0 behind Varnish proxy


My Angular 5 application will run behind a varnish proxy. Say our corporate website runs on test.corporate.com and my local computer is dev5.local, then varnish is now, for the time being, configured by system management to point https://test.corporate.com/albert to http://dev5.local:4200/ (but they can point it to anything we like). This is a proxy, not a redirect. In my angular index.html running with ng-serve, I have configured the documentroot:

<base href="/albert/">

When I go in my browser to 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/, but that the latter doesn't work makes sense because of the documentroot.

We've tried variations of the above varnish config and documentroot, but nothing seems to work. With the config above, which is the variant that makes the most sense to me, it tries and fails to load 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 also gives a "not found" with a redirect.

As the html does load, it should not be related to http vs https.


Solution

  • I am not sure about Varnish Proxy but, I have faced this same issue while deploying my code in apache-tomcat server, and serving the site not from '/' but from '/anotherPath/' in angular 4.

    What I did was while building app I have added below 2 attributes in build command

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

    Post this build, I have updated <base href="/"> to <base href="/anotherPath/"> in index.html file inside newly created dist folder, and then deployed it to the server.

    This was a workaround which resolved my issue.

    Once you fix this you might also face another issue i.e. reload will not work, since you will be serving from '/anotherPath/' and not '/'. For eg on reload of https://test.corporate.com/albert/user/login you will get an error.

    For that in apache-tomcat we had rewrite rules configured. Please let me know if you need more information.