Search code examples
apachedockerjoomla

Dockerized joomla site with Apache2 as proxy, problems loading .js files

I'm moving a joomla web site initially installed under one server (say SERVER_1) as a web application under Apache 2 to another server (SERVER_2).

In this second server, the joomla site is installed as a docker container (actually two docker containers, the second one running a mysql instance). The joomla contiainer exposes port 8081, and if I access via browser http://<SERVER_2_IP>:8081/ the site works perfectly.

Now I try to change the DNS setting on my provider for a name www.example.com from the old to the new server's IP. Moreover, on SERVER_2 I have an apache2 which I use to act as a proxy, forwarding requests to www.example.com to the correct port 8081. The following is the virtual host definition file for apache2 (I am not an expert of apache2 configuration, just copied this from configuration mapping to other containerized applications, non joomla ones, which work fine).

<VirtualHost *:80>

        ServerName www.example.com

        <LocationMatch "^/">
                AllowOverride None
                Require all granted
        </LocationMatch>

        ErrorLog /path/to/folder/under/home/example.error.log
        LogLevel trace1
        CustomLog /path/to/folder/under/home/example.access.log combined

        ProxyPass / http://localhost:8081/
        ProxyPassReverse / http://localhost:8081/

</VirtualHost>

The problem is that when accessing the site from the browser at http://www.example.com though the site is found it seems that styles are broken. If I check the browser console I see a list of errors like the following (note: I translated thte message from the Italian, so the actual error message might be different). 

Loading failed for the <script> with source “http://localhost:8081/media/jui/js/jquery.min.js”.
Loading failed for the <script> with source “http://localhost:8081/media/jui/js/jquery-noconflict.js”.
Loading failed for the <script> with source “http://localhost:8081/media/jui/js/jquery-migrate.min.js”.
Loading failed for the <script> with source “http://localhost:8081/media/system/js/caption.js”.
Loading failed for the <script> with source “http://localhost:8081/media/system/js/mootools-core.js”.
Loading failed for the <script> with source “http://localhost:8081/media/system/js/core.js”.
Loading failed for the <script> with source “http://localhost:8081/media/system/js/mootools-more.js”.
Loading failed for the <script> with source “http://localhost:8081/media/jui/js/bootstrap.min.js”.
Loading failed for the <script> with source “http://localhost:8081/templates/whalesafe/javascript/md_stylechanger.js”.
Loading failed for the <script> with source “http://localhost:8081/templates/whalesafe/javascript/hide.js”.
Loading failed for the <script> with source “http://localhost:8081/templates/whalesafe/javascript/respond.src.js”.
Loading failed for the <script> with source “http://localhost:8081/media/sourcecoast/js/jq-bootstrap-1.8.3.js”.

The problem seems to be related to the joomla code trying to access javascript files from localhost instead of www.example.com but I have no further idea about how to address this.

As I wrote, if I acess the browser using the IP/PORT (my local machine is under the same network as the server, so I can access the port 8081 directly from here) everything is ok, as was ok when accessing the site on the old server.

edit: just to add a further detail, not only styles are broken when I load the home page, but also menu links now point to http://localhost:8081/index.php/en/...page url...

Solution

  • Try changing the bottom of your configuration file:

        ProxyPass / http://localhost:8081/
    ProxyPassReverse / http://localhost:8081/

    to 

        ProxyPreserveHost On
    ProxyPass / http://www.example.com:8080/
    ProxyPassReverse / http://www.example.com:8080/

    also make sure you are requesting all your resources through http and not https, as you need a separate port for the two protocols.

    This should fix it right away; but please consider setting up your containers to forward https traffic as well, and move your sites to https.

    Also, these directives should be handled by mod_proxy and maybe your proxy isn't really working like you expect it to (it's doing a redirect instead of proxying), so the users see the 8081 port, which I think may be undesirable, so make sure this doesn't happen.