Beefy Boxes and Bandwidth Generously Provided by pair Networks
Problems? Is your data what you think it is?
 
PerlMonks  

Mojolicious-Hypnotoad-Nginx - rendering images

by pdkakoba (Novice)
on Apr 15, 2021 at 13:24 UTC ( #11131330=perlquestion: print w/replies, xml ) Need Help??

pdkakoba has asked for the wisdom of the Perl Monks concerning the following question:

Kindly seeking assistance in rendering images (any static file from /public) in a default Mojolicious-Hypnotoad-Nginx setup. Following the standard guides, this setup successfully renders the default welcome page. However adding one exception: a .png image to this page, it is not rendered, even the favicon.ico doesn't appear.

There is mention of "hooks" needed to correct for the workings of a Reverse Proxy, but after a long search one doesn't find a clear full example -- particularly for Nginx.

The welcome.html.ep has this simple addition: <img src="/tree.png" alt="tree">. It appears alone as an image when one enters this url: http://example.com/tree.png

  • Comment on Mojolicious-Hypnotoad-Nginx - rendering images

Replies are listed 'Best First'.
Re: Mojolicious-Hypnotoad-Nginx - rendering images
by haukex (Bishop) on Apr 15, 2021 at 13:54 UTC
    There is mention of "hooks" needed to correct for the workings of a Reverse Proxy, but after a long search one doesn't find a clear full example -- particularly for Nginx.

    I operate Hypnotoad behind nginx, see Nginx in Mojolicious::Guides::Cookbook (in addition I do proxy_set_header X-Real-IP $remote_addr;, but that's optional). Plus, I had to set the proxy => 1 option in the Mojo::Server::Hypnotoad config, and set the MOJO_REVERSE_PROXY environment variable. (The latter may no longer be necessary, I'm not sure because I worked out this config a while ago and Mojolicious evolves quickly, but it also can't hurt to turn it on. Update: I checked and AFAICT, in Hypnotoad, proxy=>1 sets Mojo::Server's reverse_proxy, but for other servers like morbo, it's the MOJO_REVERSE_PROXY environment variable. That's why I set both.)

    Note that for requests that shouldn't be buffered/proxied, like EventSource streams, you additionally need to set the X-Accel-Buffering header: $c->res->headers->add('X-Accel-Buffering','no'); (docs).

    However, the issue you describe may have nothing to do with the setup - the first step when things don't load is to look at the browser's development tools and the sever logs, or even a Wireshark trace.

Re: Mojolicious-Hypnotoad-Nginx - rendering images
by alexander_lunev (Pilgrim) on Apr 15, 2021 at 17:42 UTC

    I will not lecture you about 'asking questions: the right way', but if you really want an answer - send more information, please. Now to the business. One of my systems have exactly such setup - hypnotoad serving application on localhost:3000, nginx doing reverse proxy. I don't see where is you're problem could be, I will post my configs so you can find the answer yourself just by comparison of yours and mine configs.

    Application is located in /usr/local/x/ports/portmgr, so there is /usr/local/x/ports/portmgr/public dir for static files. There is also /usr/local/www/mgmt dir for other static files.

    Nginx:

    server { listen 80; server_name mgmt.site.local; location / { try_files $uri @proxy; root /usr/local/www/mgmt; add_header 'Access-Control-Allow-Origin' 'http://some.site.local'; } location @proxy { auth_basic "RTK MGMT Site"; auth_basic_user_file /usr/local/x/snmp/passwd; proxy_pass http://localhost:3000; proxy_set_header Host $host; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }

    With such config when someone request http://mgmt.site.local/image.png, 1) nginx search /usr/local/www/mgmt for image.png, if not found, 2) request goes to http://localhost:3000, 3) hypnotoad look in /usr/local/x/ports/portmgr/public (and other static paths, which you can add in script) for static file image.png, if it's not found, 4) hypnotoad search routes for /image.png, if no route found, then 404 error displayed.

    I would also suggest you to point your nginx root to your application public dir, so static files could be served by nginx, not Mojolicious, thus they will be served much faster.

    UPDATE: sorry, i've checked (and corrected post) - hypnotoad first look for static file, then look in routes.

      > I will not lecture you about 'asking questions: the right way'

      Say what you mean.

        I'm talking about the infamous document born of bygone era of Usenet (but I got to know it from the FIDOnet, already translated to my native language).

        TA-DA! - How To Ask Questions The Smart Way

Re: Mojolicious-Hypnotoad-Nginx - rendering images
by talexb (Canon) on Apr 15, 2021 at 13:35 UTC
      The welcome.html.ep has this simple addition: <img src="/tree.png" alt="tree">.

    Hmm .. have you tried removing the leading slash? Failing that, see what the web logs say.

    Alex / talexb / Toronto

    Thanks PJ. We owe you so much. Groklaw -- RIP -- 2003 to 2013.

      When diagnosing any situation like this, start with the browser's debugging features. Use the "Network" panel to see what is actually requested and what the reply code is. Look in the console logs. If necessary, use a network analyzer like "tcpdump" or better-yet "wireshark" to trace what is actually going on until you find the root cause of the problem. Do the server logs show that the request actually arrived? And, so on.
Re: Mojolicious-Hypnotoad-Nginx - rendering images
by perlfan (Vicar) on Apr 15, 2021 at 17:09 UTC
    Sounds like the browser is taking your /tree.png, and is sending something to the server that makes the handler unable to determine that you, in fact, want a static resource.
      Sounds like the browser is taking your /tree.png, and is sending something to the server that makes the handler unable to determine that you, in fact, want a static resource.

      OP mentions favicon.ico not working, which Mojolicious has built-in, so even if ngnix is routing requests for static files to Mojo, at least that should work. (Unless there's something else OP isn't telling us.)

      Yes, indeed, a 'static' file handler is needed but failing to implement one.

      The setup briefly is as follows: Debian10 on a Linode, running Perl 5.28 and Mojolicious 9.17

      The simple_app was setup automatically with 'mojo' and in the simple_image.yml, one directive was added:
      hypnotoad: proxy: - 1

      The tree.png appears in the Welcome page (with the favicon.ico), when runs directly under 'daemon' server. The hypnotoad server was set-up as a systemd service with the most recent Nginx configuration as:

      upstream backendurl { server 127.0.0.1:8080 fail_timeout=0; } server { listen 80; listen [::]:80; server_name example.com www.example.com; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log info; root /var/www/simple_image/public; location / { try_files $uri @proxy; access_log off; expires max; add_header 'Access-Control-Allow-Origin' 'http://example.com'; } location @proxy { proxy_set_header Host $http_host; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://backendurl; } }
      The default simple_image app runs properly but without rendering the tree.png image nor the favicon. When this url is enter: http://example.com/tree.png - the image alone appears together with the favicon.

        Success was found with an Apache2 setup with mod_proxy, mod_proxy_http, mod_headers and inspired from these two presentations: https://github.com/mojolicious/mojo/wiki/Apache-deployment
        https://stackoverflow.com/questions/23571608/configure-urls-with-prefix-in-mojolicious-behind-reverse-proxy-proxypass

        1) The image reference remained as:  <img src="/tree.png" alt="tree">
        2) using this configuration in Apache2 (version:2.4.38):

        ServerName example.com <Proxy *> Require all granted </Proxy> ProxyPass /static ! ProxyPass /favicon.ico ! ProxyRequests Off ProxyPreserveHost On ProxyPass /echo ws://localhost:8080/echo ProxyPass / http://localhost:8080/ keepalive=On ProxyPassReverse / http://localhost:8080/ RequestHeader unset X-Forwarded-Host RequestHeader set X-Forwarded-Proto "http"

        Result renders both the tree image and the custom favicon on both pages.
        Does that above give insight into seeking a Nginx solution?

        The above Apache2 solution gave hint to a successful Nginx solution as follows:
        upstream backendurl { server 127.0.0.1:8080 fail_timeout=0; } server { listen 443 ssl; listen [::]:443 ssl; server_name myexample.com www.myexample.com; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log info; root /home/sammy/simple_image/public; location / { try_files $uri @proxy; access_log off; expires max; add_header 'Access-Control-Allow-Origin' 'https://myexample.com'; } location /static { try_files $uri @proxy; access_log off; expires max; add_header 'Access-Control-Allow-Origin' 'https://myexample.com'; } location @proxy { proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://backendurl; } ssl_prefer_server_ciphers on; #add all the necessary ssl files, (eg .crt and key files) and li +nks here }
        Postscript 22-May-2021: The problem appeared to be with the install of iRedmail (a popular mailserver setup) on the same server. Recently the application was revised to 1.4.0 version. After rebuilding the server with the updated iRedmail app, the published Mojolicious deployment code worked successfully.

Log In?
Username:
Password:

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: perlquestion [id://11131330]
Front-paged by Corion
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others chanting in the Monastery: (7)
As of 2021-09-16 15:00 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found

    Notices?