Static assets don't show up for flask on elast

Question

How do you get aws elastic beanstalk to recognize your static assets in your flask app? I did the standard /.ebextensions/python.config couple of YAML lines a la:

option_settings:
  "aws:elasticbeanstalk:container:python:staticfiles":
    "/static/": "static/"

All of my calls to assets in templates are wrapped in "{{url_for('static', filename='img/office.jpg')}}" type things.

But no images, styles or javascript shows up on page load. Here is an example log file 404. IP - - [25/Feb/2013:21:48:13 +0000] "GET /static/css/bootstrap.css HTTP/1.1" 404 328 "http://xyz.elasticbeanstalk.com/"

Am I missing something obvious? Everything runs great on my local, just static assets dont load once i git aws.push

Answer 1

As of this writing, after spending many hours fighting with AWS EB's config, I gave up trying to make the static files work the way we all expect and updated my Flask app creation to:

app = Flask(__name__, static_url_path='/s')

This renders urls like /s/scripts/my-script.js and since I always use url_for('static', ...) in my code and templates, everything continued to work outside of AWS as well.

Update on 9/30/2013: I can pretty much guarantee that the staticFiles settings are completely ignored in AWS EB's Python container.

The change I suggested above has the undesirable downside of routing all static file requests through Flask (maybe, more accurately, WSGI.) That's not very hard to fix, though.

Create an Apache conig file at your project root, named app-httpd.conf:

Alias /s /opt/python/current/app/static
<Directory /opt/python/current/app/static>
Order allow,deny
Allow from all
</Directory>

This config tells Apache to take over any requests for URLs starting with /s, same prefix we chose for our static files, and serve files from our app's static folder.

Create this file at .ebextensions/custom-apache.config:

container_commands:
  add_apache_conf:
    command: "cp app-httpd.conf /etc/httpd/conf.d"

This file will be used during the app deployment and will copy the new .config file to a directory from which Apache is configure to load all .config files it sees.

Answer 2

It can be done also through Elastic Beanstalk Panel:

Configuration -> Software Configuration - > Static Files

and then

just as an alternative option

Answer 3

I had a similar problem where, strangely enough, all files from static/img/ were being served, but anything in static/css/ or static/js/ were simply not being served.

To fix this I opened .elasticbeanstalk/optionsettings.app-env from the root directory of the Flask source and edited this block of code to be

[aws:elasticbeanstalk:container:python]
NumProcesses=1
NumThreads=15
StaticFiles=/static/.*=
WSGIPath=application.py

[aws:elasticbeanstalk:container:python:staticfiles]

Note that StaticFiles actually takes a regular expression, so in /static/.* the .* allows for any path after /static/

Answer 4

4+ years later, I'm able to get static files working using:

(file: .ebextensions/WHATEVER_NAME.config)

option_settings:
  - namespace: aws:elasticbeanstalk:container:python
    option_name: StaticFiles
    value: /static/=PATH/FROM/MY/APP/BASE/DIR/TO/STATIC/DIR/

...in my case, this was

    value: /static/=distrib/static/

I found that changing my

app = Flask(__name__)

to

app = Flask(__name__, static_url_path='/static')

was neither necessary nor sufficient. When I only set static_url_path but not StaticFiles, it didn't work; when I set StaticFiles but not static_url_path, it worked fine.

<sarcasm>Elastic Beanstalk is super straightforward and well documented!</sarcasm>

Answer 5

I'm not sure where you put your static files, but since mine are typically in app/static, I have:

[aws:elasticbeanstalk:container:python:staticfiles]
/static/=app/static/
/favicon.ico=app/static/favicon.ico

[aws:elasticbeanstalk:container:python]
StaticFiles=/static/=app/static/,/favicon.ico=app/static/favicon.ico

Both sections seem to be important. (The latter section has other stuff in it too but I've left that out.) I actually have two resource paths here, both the /static/ directory and the top-level /favicon.ico file that dumb old browsers always ask for.

Answer 6

A strange thing that I found to solve this issue was editing my .gitignore file. It had included removing the /dist folders, and that included the dist folders that my CSS was generated into. So the css files were actually missing when I deployed.

Hope this may help anyone who might be in the same boat.