search

open-eats / OpenEats

:pizza: Self Hosted Recipe Management App :hamburger:
https://open-eats.github.io/
MIT License
670 stars 102 forks source link

Pictures appear nowhere (news or recipes) #35

Closed pandahomes closed 6 years ago

pandahomes commented 6 years ago

I recently installed openeats on my debian server. Firstly, thanks for your work, it's brilliant and it's functionalities are well above the competition i found.

My problem is related to showing images anywhere in the app. The upload works with no errors shown or significant logs in any of the containers. When i check in django admin, the image is linked to the recipe. However when i open the news feed or recipe, the picture does not load (still no errors of logs to be seen) Any ideas for the origin of the problem? The repository is in my www/Openeats directory, could i have a rights problem?

RyanNoelk commented 6 years ago

This sounds like an routing issue (on the internal OpenEats nginx server or your own nginx/apache server). Couple questions for you:

  1. Did you change the OpenEats nginx docker server in any way?
  2. Are you able to view the images by going directly to them via the admin panel?
  3. Can you provide a sample of the image URLs (feel free to leave out the hostname and just give the path after that)
pandahomes commented 6 years ago

Thanks for the quick response. The answer to your questions :

  1. yes, the outer port is 3663. I have an apache server that listens on 443 and redirects internally to 3663 (same server for all my other services)
  2. yes
  3. ./site-media/upload/recipe_photos/17-07-20_22-58-14_X4wfR5A.jpg

FYI : i have tested jpg, png. I even recovered the default picture on git (e.g. the pizza) to recreate an image the same size for testing purposes, ...

RyanNoelk commented 6 years ago

Can you open up ur console/dev tools in ur browser of chose and let me know what URL the UI is trying to ask for?

If you are able to view the image from the admin panel then it should be working from the UI. The Internal OpenEats nginx server is handling all the routing (see here for an example). Meaning the UI and admin panel should be trying to access the same image.

pandahomes commented 6 years ago

<div class="panel-heading hero-image" style="background-image: url("[MY_URL]/site-media/upload/recipe_photos/17-07-20_22-58-14_X4wfR5A.jpg");">

I've just seen the problem in the console, the site is in https and trying to recover an non-secure http url for the image.

In my env_prod.list I have the following :

RyanNoelk commented 6 years ago

See: https://github.com/open-eats/OpenEats/blob/master/docs/Setting_up_env_file.md#http_x_forwarded_proto -> HTTP_X_FORWARDED_PROTO=True

Do you have that in your env file?

pandahomes commented 6 years ago

it is already at true. API_URL=0.0.0.0:8080 API_PORT=8080 DJANGO_SECRET_KEY=xxxxx DJANGO_SETTINGS_MODULE=base.settings DJANGO_DEBUG=False ALLOWED_HOST=url with no http HTTP_X_FORWARDED_PROTO=True NODE_ENV=production NODE_URL=localhost:8080 NODE_PORT=8080 NODE_API_URL=https://[MY_URL] NODE_LOCALE=en

RyanNoelk commented 6 years ago

hmm... Now it's getting strange. The HTTP_X_FORWARDED_PROTO var should be telling Django to return https URLs even when the request is http.

I'll have to do some digging to see what the issue is. I have this issue awhile ago and the HTTP_X_FORWARDED_PROTO fixed it for me.

pandahomes commented 6 years ago

ok. thanks a lot for your help. In the mean time, I'll just allow http. Tested and the pictures load correctly now :)

RyanNoelk commented 6 years ago

I also just ran a test on my instance. I turned off the HTTP_X_FORWARDED_PROTO and the server returned the images over http.

¯_(ツ)_/¯

RyanNoelk commented 6 years ago

I think you might need to pass some additional headers in your Apache config.

For nginx, you can see this example. For Apache maybe something like this:

<VirtualHost *:443>
    RewriteEngine On
    RequestHeader set X-Forwarded-Proto "https" 
    RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
    …
</VirtualHost>

I'm not very good with Apache some I was just googling around to get there. See this for reference.

pandahomes commented 6 years ago

This provided a partial fix to my problem, thanks. The cached images still pass over http though (thumbnails of recipes) but I have an all together new problem with the cached images as even without https, the links genereated for the thumbnails do not exist.

Web page : [root_url]/browse Recipe thumbnail image path : [root_url]/site-media/CACHE/images/upload/recipe_photos/rougail_tomate_combava_m_png/d8c36881e477e9078970ab5a5b000d8f.jpg Result : nginw internal server error

RyanNoelk commented 6 years ago

Hmm, the mysteries continue :P. A few more questions for you:

  1. If I understand correctly, you are able to view the images original images over http and https? But thumbnail images never show up, regardless of the additional headers you set?
  2. What are the size of the images you are trying to upload?

Just for some insight. The thumbnail images are generated in python to be 300x400px. They should be shared in a volume with both the python container and the nginx container. You can get into the running nginx container and see what images you have by doing the following:

To get inside the container:

docker exec -it openeats_nginx_1 sh

Once inside the container:

cd /var/www/html/openeats-static/site-media/CACHE/images/upload/recipe_photos/
pandahomes commented 6 years ago

after accessing the folder, I noticed the recent photos I uploaded were not present. after a few tests, I found the pictures have to be jpeg for the thumbnail to be generated. Thanks for the help, I'm up and running now :)

RyanNoelk commented 6 years ago

I fixed the issues with PNG images not generated thumbnails. See https://github.com/open-eats/openeats-api/pull/13. You should be able to try it out in ~30mins.

If I could ask you a favor. Would you mind posting an example of the Apache config you used to get the images to be served over https? I wanted to update the installation steps to include adding the headers required for nginx and Apache.

pandahomes commented 6 years ago

Thanks for the fix, I'll test it when I get a chance. As for the apache, I have two config files for my subdomain "test" : test.conf and test-le-ssl.conf. I use a redirect rule on port 80 to forward to 443. The file contents are : test.conf : `<VirtualHost *:80> ServerAdmin admin@myserver.com ServerName test.myserver.com ServerAlias www.test.myserver.com

ProxyPreserveHost On
ProxyPass / http://LOCAL_IP:PORT ProxyPassReverse / http://LOCAL_IP/PORT

TransferLog /var/log/apache2/test_access.log ErrorLog /var/log/apache2/test_error.log

Timeout 5400 ProxyTimeout 5400

<Proxy *> Order deny,allow Allow from all <'/'Proxy>

RewriteEngine on RequestHeader set X-Forwarded-Proto "https" RewriteCond %{SERVER_NAME} =test.myserver.com [OR] RewriteCond %{SERVER_NAME} =www.test.myserver.com RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent] <'/'VirtualHost> `

test-le-ssl.conf : `<VirtualHost *:443> ServerAdmin admin@myserver.com ServerName test.myserver.com ServerAlias www.test.myserver.com

ProxyPreserveHost On
ProxyPass / http://LOCAL_IP:PORT ProxyPassReverse / http://LOCAL_IP/PORT

TransferLog /var/log/apache2/test_ssl_access.log ErrorLog /var/log/apache2/test_ssl_error.log

Timeout 5400 ProxyTimeout 5400

<Proxy *> Order deny,allow Allow from all <'/'Proxy>

SSLEngine On SSLCertificateFile /etc/apache2/ssl/apache.crt SSLCertificateKeyFile /etc/apache2/ssl/apache.key <'/'VirtualHost>`