Awx: Web UI not working when running AWX behind reverse proxy on a subdomain

Created on 13 May 2019 · 11Comments · Source: ansible/awx

ISSUE TYPE

Bug Report

SUMMARY

When running AWX behind a reverse proxy on a subdomain, the UI is broken due to wrong URL in links to static assets. The API is working okay.
see #631 but that not resolved me issue.

ENVIRONMENT

AWX version: 4.0.0.0
AWX install method: docker on linux
Ansible version: 2.7.9
Operating System: Ubuntu 18.04.2 LTS
Web Browser:

STEPS TO REPRODUCE

configure nginx with :

# locations.conf
...
location /awx/ {
        proxy_pass http://awx_web_ip:80/;
        proxy_http_version 1.1;
        proxy_set_header   Host               $host;
        proxy_set_header   X-Real-IP          $remote_addr;
        proxy_set_header   X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto  $scheme;
        proxy_set_header   Upgrade            $http_upgrade;
        proxy_set_header   Connection         "upgrade";
      }

EXPECTED RESULTS

ACTUAL RESULTS

all assets are not loaded, references to static is write in
header to '/static/'

see index:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="/static/assets/favicon.ico?v=4.0.0.0" />
    <script>
        var $basePath = '/static/';
        window.liveUpdates = "True" === "False" ? false : true;
    </script>

        <link href="/static/css/vendor.8778ab7be905d20927b3.css" rel="stylesheet" />

        <link href="/static/css/app.bd927cc14dd2d4bf0c9a.css" rel="stylesheet" />


        <script src="/static/js/vendor.8778ab7be905d20927b3.js"></script>

        <script src="/static/js/app.bd927cc14dd2d4bf0c9a.js"></script>

</head>

ADDITIONAL INFORMATION

all works well if I put location / but I have many other website behind nginx.

api low needs_devel enhancement

Source

Climberdav

👍6 👀1

Most helpful comment

would be great if it worked without the subdomain.

keith6014 on 6 May 2020

👍2

All 11 comments

Same issue here.

Docker images built from 4.0.0
Ansible 2.7.10
CentOS 7.6
Browser: Firefox

I am using Apache as reverse proxy, and awx is configured to be served from /awx

marcoskv on 14 May 2019

Same issue here too, if I use root path (/) it is working properly, but with subpath config (/awx/) it isn't loading static assets.

Docker-Compose 4.0.0
Ansible 2.8
Ubuntu 18.04.2
Browser: Opera, Chrome

Seljuke on 21 May 2019

👍1

Same
Docker-Compose 4.0.0
Ansible 2.8
Ubuntu CentOS 7
Browser: Firefox, Chrome

flonowa on 24 May 2019

Same using Apache2

Docker version 18.09.6
docker-compose version 1.24.0
ansible 2.8.1
Debian 9.9
Browser : Chrome

dellarte on 12 Jun 2019

Changing the URI path for AWX is not something we currently support. Filing as possible future enhancement.

ghjm on 12 Jul 2019

Same here using apache2.

ansible 2.8
RHEL 7.7 (BTW, official support was useless on this topic)
Browser: Firefox,Chrome

It is hard to imagine an effort this day in age hard coding all the paths in the js and other elements, but here it is. The low priority isn't encouraging.

justchris1 on 9 Aug 2019

would a simple rewrite rule in nginx fix this?
i'm not fluent enough in nginx myself to do this, but it could be a workaround?

metasikander on 29 Nov 2019

would a simple rewrite rule in nginx fix this?
i'm not fluent enough in nginx myself to do this, but it could be a workaround?

the issue is that static assets and most links are hard coded to the root and don't accept the new base-url. You can do a url rewrite in nginx or haproxy but the HTML page you are served references /static/ and not the sub-folder you have referenced. On the bright side, the API should work fine, just don't follow any links the API gives you since those will also be at the root.

BDworak on 2 Jan 2020

I don't think this should be considered low priority, I frequently go through this same problem every time we look at a new web application. Whenever you proxy a web app behind anything other than the root (location /), the application must be aware of the root path.

If the application doesn't support this (and AWX doesn't) I've generally had success with adding Nginx sub_filter statements to hack a working solution together. Unfortunately, it has been particularly difficult with this app because the fetched javascript pages end up making several AJAX calls, and there are a few requests that end up not rewriting properly. For example, here are my current sub_filter rules that almost work:

location /awx/ {
    ...
        sub_filter 'api/' 'awx/api/';
        sub_filter "basePath = '/static/'" "basePath = '/awx/static/'";
        sub_filter '/static/images/' '/awx/static/images/';
        sub_filter '/static/fonts/' '/awx/static/fonts/';
        sub_filter '/static/assets/' '/awx/static/assets/';
        sub_filter '/static/css/' '/awx/static/css/';
        sub_filter '/static/js/' '/awx/static/js/';
        sub_filter '/static/languages/' '/awx/static/languages/';
        sub_filter 'static/lib/' 'awx/static/lib/';
        sub_filter 'static/partials/' 'awx/static/partials/';
        sub_filter_once off;
        sub_filter_types *;
}

No matter how many variations on the sub_filter rules I do, I can't ever seem to get the 'partial' files to download:

AWX reverse proxy AJAX problem

lukepafford on 26 Mar 2020

As soon as I posted my comment I finally had a 💡 moment that allows a clean work around for ANY application that faces this similar problem of mounting on a location block that isn't /. The solution?: Ignore it completely

Instead, create a new virtual host which is supported by both Nginx, and Apache.
Instead of trying to mount the application at mydomain.com/awx, mount it at awx.mydomain.com.

This required the following steps:

Create an A record in your DNS to map awx.mydomain.com to your public IP
Create a new server block which you can basically copy/paste your existing one, but change the server_name directive from mydomian.com; to awx.mydomain.com;
I use certbot to manage my certs, so I had to generate new certs for the new domain
Create a location block mounted at / and cry tears of joy:

location  / {
  proxy_pass http://192.168.1.10:80/;
  proxy_http_version 1.1;
  proxy_set_header   Host               $host;
  proxy_set_header   X-Real-IP          $remote_addr;
  proxy_set_header   X-Forwarded-For    $proxy_add_x_forwarded_for;
  proxy_set_header   X-Forwarded-Proto  $scheme;
  proxy_set_header   Upgrade            $http_upgrade;
  proxy_set_header   Connection         "upgrade";
  proxy_cache_bypass $http_upgrade;
  proxy_set_header Accept-Encoding "";
  proxy_redirect off;
}

lukepafford on 26 Mar 2020

would be great if it worked without the subdomain.

keith6014 on 6 May 2020

👍2

Was this page helpful?

0 / 5 - 0 ratings