lundi 18 septembre 2017

Ember not retrieving image assets from Rails backend with paperclip and Docker

This is only a problem in production.

I have two Docker hosts, one running an nginx container (serving an Ember app), the other a running a postgres container and a rails-api container. I want to move the the latter-2 containers onto the first Docker host so they can all be hosted on one and I can delete the second Docker host. The Rails-api uses paperclip to upload photos.

In the Ember app production build I point to the rails backend by adding ENV.host = 'dockerhost2.com:3000/' to config/environment.js and host: ENV.host in adapters/application.js.

If I keep everything as it is (with 2 docker hosts) everything weirdly works fine -- that is, images are delivered and displayed on the front end. But if I move all containers to one docker host, the images themselves cannot be retrieved and return a 404.

The image URLs are always 'public/system/000/path/to/Image.jpg'. When I keep things separate (on 2 docker hosts) going to 'http://ift.tt/2yacomG' works perfectly though I don't understand why, as the rails app is serving on port 3000 and on a different host. But when I combine all containers onto 1 docker host the same image URLs return 404 and only works when I go to 'dockerhost1.com:3000/public/system/000/path/to/Image.jpg'. This is perplexing.

Locally everything works beautifully when I put all containers onto 1 docker machine and build the Ember app to point to docker.machine.ip:3000. Going to 'http://ift.tt/2xbBmTa' does indeed find the image though, admittedly, I don't understand why.

My Ember docker-compose.yml

version: '2'
services:
  server:
    image: nginx
    volumes: 
      - ./dist:/usr/share/nginx/html
      - ./nginx-site.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "80:80"

My rails docker-compose.yml

version: '2'
volumes:
  sarahdeyong-postgres:
  images:

services:
  rails: &defaults
    build: .
    image: romanhood/sarahdeyong-api:0.0.1
    volumes:
      - .:/myapp
      - images:/myapp/public/system/
    depends_on:
      - postgres
    entrypoint: ["bundle", "exec", "rails"]

  server:
    <<: *defaults
    tty: true
    stdin_open: true
    command: server -p 3000 -b '0.0.0.0'
    ports:
      - "3000:3000"

  postgres:
    image: postgres
    volumes:
      - sarahdeyong-postgres:/var/lib/postgresql/data
    ports:
      - "5432:5432"

and nginx-site.conf:

# pushState friendly!
# The setup:
#   * website name is `_`
#   * javascript app is located at `/app`

charset utf-8;

tcp_nopush on;
tcp_nodelay off;
client_header_timeout 10s;
client_body_timeout 10s;
client_max_body_size 128k;
reset_timedout_connection on;

gzip on;
gzip_types
    text/css
    text/javascript
    text/xml
    text/plain
    application/javascript
    application/x-javascript
    application/json
    application/xml
    application/rss+xml
    application/atom+xml
    font/truetype
    font/opentype
    image/svg+xml;

server {
  listen 80;
  server_name sarahdeyong;
  root /usr/share/nginx/html;


  # To make sure any assets can get through :)
  location / {
    try_files $uri @rewrites;
  }

  # If no asset matches, send it to your javascript app. Hopefully it's a route in the app!
  location @rewrites {
    rewrite ^(.+)$ /index.html last;
  }
}

How can I get my images to retrieve and display properly in my Ember app?




Aucun commentaire:

Enregistrer un commentaire