Adapting the forwarding to Flask application with routes and static files with the Apache 2

There is a Flask Application running on the http://servername.com:5000/. It encapsulates some Bootstrap and static files provided in gis_webapp/static/... which works the way it should.

This is the tree of the project:

gis_webapp
├── __init__.py
├── routes.py
├── gunicorn_gis_webapp_conf.py
├── static
│   ├── bootstrap-4.6.0-dist
│   │   ├── css
│   │   └── js
│   ├── css
│   │   └── style.css
│   └── img
│       ├── favicon.png
│       └── glogo.gif
└── templates
    ├── about.html
    ├── base.html
    ├── contact.html
    ├── errors
    │   └── 404.html
    ├── index.html
    └── result.html

As soon as I apply the forwarding through the Apache2 with the mod_auth_gssapi that runs on the same server via http://servername.com/ (http://servername.com:80/) using the http://servername.com/gis/ that has to inherit the whole content of the http://servername.com:5000/, the following things stop to work:

Communication between routes

When I click on the contact link in the navigation bar it brings me to http://servername.com/contact/ (which does not exist) instead of http://servername.com/gis/contact
The content from the /static folder
Bootstrap from the gis_webapp/static/bootstrap-4.6.0-dist folder

What am I doing wrong?

The content of the .conf file is the following:

<VirtualHost *:80>
    <Location /gis/>
        ProxyPass "http://localhost:5000/"
        ProxyPassReverse "http://localhost:5000/"
    </Location>
</VirtualHost>

I have found some suggestion in these threads and tried to apply the suggestions:

Link to Flask static files with url_for

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-4.6.0-dist/css/bootstrap.min.css') }}">

Using root_path argument in Flask

gis_webapp = Flask(__name__, root_path=os.getcwd())

Link stylesheet from a parent folder

<link rel="icon" type="image/png" href="../static/img/favicon.png">

Flask: files in static folder can not be reached (404)

gis_webapp = Flask(__name__,
             static_url_path='',
             static_folder='static',
             template_folder='templates')

Unfortunately they don't solve my issue.

I also tried to modify the paths in my routes.py file.

# main page
@gis_webapp.route("/", methods=["GET"])
@gis_webapp.route("/index", methods=["GET"])
def index():
    return render_template("index.html", title="GIS")

was rewritten as:

# main page
@gis_webapp.route("/gis/", methods=["GET"])
@gis_webapp.route("/gis/index", methods=["GET"])
def index():
    return render_template("index.html", title="GIS")

I also found this thread Serving static files through apache that suggest to apply the ALIAS, however it is not a solution for me, because later Apache2 and Flask Application gonna be on different servers. However, there is an opinion: that the statics need to be distributed by the Apache, even if you then spread it across different servers, then it is better to mount the statics to where the Apache is.

Till now I could partially solve the 2. and 3. issues with adjustments done in 'base.html', so this reference:

<link rel="icon" type="image/png" href="/static/img/favicon.png">

was changed to:

<link rel="icon" type="image/png" href="/gis/static/img/favicon.png">

So, afterwards I could see the content of the /static folder on the http://servername.com/gis/ page but it disappears when I open it though http://servername.com:5000/ ... do not understand why. Any ideas?

Solution

Solution was to deploy the SCRIPT_NAME variable and Gunicorn as suggested in this article:

SCRIPT_NAME="/gis" gunicorn --bind=0.0.0.0:5000 gis_webapp:gis_webapp

After that I was able to access the application via http://servername.com/gis/

However the initial URL http://servername.com:5000/ was yielding the Internal Server Error. To overcome it, simply use the http://servername.com:5000/gis/.