Static assets don't show up for flask on elastic beanstalk

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

It can be done also through Elastic Beanstalk Panel:

Configuration -> Software Configuration - > Static Files

and then

just as an alternative option

Answer 2

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 3

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 4

I spent a goodly amount of time trying to figure this out and sort through these suggestions. I've made comments on the answers that were still relevant in 2020. Here's the TL;DR of the solution I encountered:

• The static files section in the Modify Software screen under the Configuration left navigation pane on the Elastic Beanstalk UI sets the property aws:elasticbeanstalk:container:python:staticfiles. This configuration does not map to the static_url_path which Flask needs to find the static assets.
• The correct property to set is StaticFiles, which can be set by adding a .config file to the .ebextensions directory.

Read more here.

Answer 5

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.

Answer 6

This problem baffled me for a bit because it worked locally. No need to change config. I change line 1 to line 2 in my html file and it worked. Keep static folder in root directory and also keep config at /static/:/static/.

 1 <link rel="stylesheet" href={{url_for('static',filename='style.css')}}/>

2 <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">

may be the quotes around the href.

Answer 7

I tried Myles Baker's solution, but did not work as upon deployment I received the error -

ERROR   Invalid option specification (Namespace: 'aws:elasticbeanstalk:container:python', OptionName: 'StaticFiles')

I ended up using the following code in my .ebextensions/WHATEVER_NAME.config -

option_settings:
  aws:elasticbeanstalk:environment:proxy:staticfiles:
    /html: statichtml
    /images: staticimages

Which is a straight copy/paste from here - https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/environment-cfg-staticfiles.html

Answer 8

This worked for me:

option_settings:
  aws:elasticbeanstalk:application:environment:
    PYTHONPATH: "/var/app/current:$PYTHONPATH"
  aws:elasticbeanstalk:environment:proxy:staticfiles:
    /static: static

Answer 9

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/