How to serve webpacked assets of Rails app in Elastic Beanstalk container?

Question

I'm using Rails5 app and deployed it to EB container successfully.

But webpacked assets -- served in public/packs directly, return 404 in production environment.

In current situation, I set RAILS_SKIP_ASSET_COMPILATION = false so I precompile assets before deploying the app everytime.

I used to use heroku as a production environment and everything went ok at that time.

here is my config/webpacker.yml :

source_path: app/frontend/javascripts
  source_entry_path: packs
  public_output_path: packs # public/packs/filename-[hash].js
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .js
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

what I tried...

I tried to change public_output_path from packs to assets. but same error persists...

Answer 1

I ran into this problem as well. I'm not sure if you're using Nginx or Passenger. But if it's Nginx you'll probably want to add a location block to /etc/nginx/conf.d/webapp_healthd.conf that looks like this:

location /packs {
  alias /var/app/current/public/packs;
  gzip_static on;
  gzip on;
  expires max;
  add_header Cache-Control public;
}

Then run sudo /etc/init.d/nginx restart .

That should be enough to get it working. But you'll want to create a .ebextensions/ file in your project with these custom settings so it doesn't get overwritten by the Elastic Beanstalk default config.

See this post by Maria Luisa Carrion D. to see how to automate the nginx config.

Answer 2

With the Amazon Linux 2 Elastic Beanstalk Platform, this is now a whole lot easier.

The default config for nginx is located here /etc/nginx/nginx.conf which you can see if you eb ssh to your server.

There is a line of code in the server {...} block which says:

# Include the Elastic Beanstalk generated locations
include conf.d/elasticbeanstalk/*.conf;

This include is there so you can easily include additional location rules for your server. All you have to do in your app is create a .platform folder in your root directory if you haven't already, and create a config file with this path: .platform/nginx/conf.d/elasticbeanstalk/10_packs_location.conf ("10_packs_location" can be any name you want).

Put in these file contents:

location /packs {
  alias /var/app/current/public/packs;
  gzip_static on;
  gzip on;
  expires max;
  add_header Cache-Control public;
}

And then upon your next deployment, you'll see your new "10_packs_location.conf" file under /etc/nginx/conf.d/elasticbeanstalk/ , which will be included by /etc/nginx/nginx.conf . With this complete, the new location rule will have applied.

See documentation here for more details: https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/platforms-linux-extend.html

Answer 3

Another solution is to have Rails itself serve the assets instead of NGINX.

in your config/environments/production.rb you probably have the following:

# Disable serving static files from the `/public` folder by default since
# Apache or NGINX already handles this.
config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?

If you set the RAILS_SERVE_STATIC_FILES = enabled in you AWS EB, Rails will serve the assets.

This is the default behaviour in Heroku: https://devcenter.heroku.com/changelog-items/617

Here is a nice post about it: https://acuments.com/rails-serve-static-files-with-nginx.html

Answer 4

The quickest way to get around all of this without messing with Elasticbeanstalk is to change your webpacker.yml file to use assets/packs instead of packs which is already being served correctly.

production:
  <<: *default

  # Production requires the packs folder to be in assets for nginx
  public_output_path: assets/packs