Getting correct path to static files to serve them through nginx

Question

I am having trouble figuring out how to serve static files for my Flask web app through Nginx and Gunicorn. All documentation I have seen online points to adding some path to static folder alias when a client makes a request for static files. However, I am not sure what the full path should be since the app is hosted on Heroku. All requests to static files are returning 404 errors. I also noticed that the XHR request to a JSON file stored in the directory path /static/json/<file>.json is not returning a JSON object on success.

Project Hierarchy:

project/
|_ config/
   |_ gunicorn.conf.py
   |_ nginx.conf.erb
|_ flask_app/
   |_ __init__.py
   |_ static/
      |_ css/
      |_ js/
      |_ images/
      |_ json/
|_ Procfile
|_ run.py

project/config/gunicorn.conf.py:

def when_ready(server):
    open('/tmp/app-initialized', 'w').close()

bind = 'unix:///tmp/nginx.socket'

project/config/nginx.conf.erb:

daemon off;
#Heroku dynos have at least 4 cores.
worker_processes <%= ENV['NGINX_WORKERS'] || 4 %>;

events {
    use epoll;
    accept_mutex on;
    worker_connections <%= ENV['NGINX_WORKER_CONNECTIONS'] || 1024 %>;
}

http {
    server_tokens off;

    log_format l2met 'measure#nginx.service=$request_time request_id=$http_x_request_id';
    access_log <%= ENV['NGINX_ACCESS_LOG_PATH'] || 'logs/nginx/access.log' %> l2met;
    error_log <%= ENV['NGINX_ERROR_LOG_PATH'] || 'logs/nginx/error.log' %>;

    include mime.types;
    default_type application/octet-stream;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;

    #Must read the body in 5 seconds.
    client_body_timeout 5;

    upstream app_server {
        server unix:/tmp/nginx.socket fail_timeout=0;
    }

    server {
        listen <%= ENV["PORT"] %>;
        server_name _;
        keepalive_timeout 5;

        # Configure NGINX to deliver static content from the specified folder
      location /static {
        alias /static;
      }

        location / {
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
            proxy_pass http://app_server;
        }
    }
}

project/Procfile

web: bin/start-nginx gunicorn -c config/gunicorn.conf.py 'run:create_app()'
worker: python worker.py
clock: python clock.py

example.js

export function getData() {
  $.ajax({
    type: 'GET',
    url: '/static/json/data.json',
    async: false,
    success : function(data) {
      currentPageIndex = 0;
      numberOfPages = data.length; // Getting undefined error here on "data"
    }
  });
}

Answer 1

In your given configuration, there are (at least) two ways of hosting static content. It is not clear to me for which of the two alternatives below you decided - I have the impression you want to have somehow both?

1. I am sure you read https://flask.palletsprojects.com/en/1.1.x/tutorial/static/ which says

   Flask automatically adds a static view that takes a path relative to the flaskr/static directory and serves it.

   The URL would be the same as for your flask SPA with an additional static behind, see e.g. Link to Flask static files with url_for or https://flask.palletsprojects.com/en/1.1.x/quickstart/#url-building

   The file location for the static content would be /static within your flask-app-directory.

2. Please also note How to serve static files in Flask which says

   The preferred method is to use nginx or another web server to serve static files; they'll be able to do it more efficiently than Flask.

   In this case, the Nginx docu on Serving Static Content is your friend:

   The URL will be simply www.example.com/whateverHerokuPutsHere/static.

   The file location can be anything you specify inside your nginx.conf, usually one would put absolute paths there.

   Disclaimer: I never worked with heroku, so I am not sure whether there will be actually a whateverHerokuPutsHere. It could well be that it is simply example.com as you configure somewhere on Heroku's UI. For the file-location I found a blog Nginx as a static site server on Heroku.

Answer 2

I found out that the issue was related to having an incorrect alias path. It was difficult to determine at first since Heroku has its root directory set up differently than I do on my local machine. The root directory for the Heroku application is /app so I changed the alias to this, based on my project hierarchy. This should work for anyone else facing similar issues.

location /static {
   alias /app/flask_app/static;
}

Answer 3

use python code to render files

@app.route("/")
def main():
    return render_template('main.html')

examples/flask/stat/templates/main.html

if you use static images use relative path

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
     content="width=device-width, initial-scale=1, user-scalable=yes">

  <link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
<h1>Hello World</h1>

<img src="static/img/code_maven_128.png" />

</body>
</html>

The CSS itself is also very simple, its content is not relevant for our purposes.

examples/flask/stat/static/css/style.css

h1 { color: blue; } How to run this There are two simple ways to run this in developlent. For both you need to open your terminal (cmd window if you are on Windows), change to the directory where the application file (web.py in our case) can be found.

python web.py A better way, that provides more control over how to run this is to use:

https://code-maven.com/flask-serve-static-files

enter code here