Hello Stackoverflow community,
I have encountered a strange behaviour when I deploy my website to azure app services. When running the website locally using uvicorn everything is fine. The issue is that the website none of the CSS classes are applied and the website looks like a plain HTML website. All downloads and other links are working as intended. The CSS ist just not being applied.
I have used tailwindcss and html to build the front end. No JS involved. For the backend I used fastapi.
Here is the startup command i configured on the web service:
gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app
I am using the free tier (F1) of the web service and I push the code onto the web service from a local git repository.
In the html files a jinja2 variable is used to link the HTML files to the app.css file.
It is located within the static/css/ directory.
<link rel="stylesheet" href="{{url_for('static', path='/css/app.css')}}" />
Is there any special build or runtime behaviour on azure that I am not aware of? Am I missing something?
All dependencies are installed on the web service I checked using pip list in the terminal of the respective web service. The web service is not throwing any errors. I suspect that the link to the css file can not be established but I cant wrap my head around as to why.
Maybe someone else on here had the same problem before.
EDIT:
Based on the comments to this question I figured somethings out. The CSS file was beeing blocked by the browser because of a mixed content error. To get around this some recommended to use --proxy-headers with unicorn. However, I use gunicorn with uvicorn workers and could not figure out how to configure it correctly.
The "solution" to my problem was this Html tag and code:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">.
I dont know if it "correctly" or safely solves the problem but it works and loads the CSS file.