Mojolicious-Hypnotoad-Nginx Rendering Images #1766

pdkakoba · 2021-04-15T13:40:58Z

pdkakoba
Apr 15, 2021

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: . It appears alone when one enters this url: http://example.com/tree.png

Grinnz · 2021-04-15T14:41:20Z

Grinnz
Apr 15, 2021
Collaborator

<img src="<%= url_for '/tree.png' %>">

2 replies

pdkakoba Apr 15, 2021
Author

Great thanks for the prompt reply. Still the exact same results: no image rendered in the welcome page but it is rendered alone by this url: http://example.com/tree.png

s1037989 Apr 15, 2021

Can you post the generated HTML source code?

pdkakoba · 2021-04-16T05:27:12Z

pdkakoba
Apr 16, 2021
Author

Here is the generated code:

<!DOCTYPE html>
<html>
  <head><title>Welcome</title><script type="text/javascript" src="http://ff.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=rvQtdSMWq7jN30Uf7XtIb4B1lZxnXmNQJw-_VQM2pORRcx9ixcJBH-9F92TM6P_n" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="http://ff.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cDovL2pvaG5hbmdsaW4uY29tLw"/></head>
  <body><h2>Welcome to the Mojolicious real-time web framework!</h2>
<p>
  This page was generated from the template "templates/example/welcome.html.ep" <br>
  and the layout "templates/layouts/default.html.ep", <br>
  <img src="/tree.png" alt="tree"> <br>
  <a href="/">click here</a> to reload the page or<br>
  <a href="/index.html">here</a> to move forward to a static page.
</p>
</body>
</html>

0 replies

s1037989 · 2021-04-16T20:19:23Z

s1037989
Apr 16, 2021

So http://example.com/tree.png renders the image, but an img element with src /tree.png does not? What do logs report? nginx logs ({error,access}.log) and Mojolicious logs?

What's with the javascript in the simple sample page? Is it possible something inside of the javascript is messing something up?

Have you watched the transactions with your browser's developer tools?

Some resources:
https://mojolicious.io/blog/2019/03/18/reverse-proxy-with-path/
https://docs.mojolicious.org/Mojolicious/Guides/Cookbook#Nginx

3 replies

pdkakoba Apr 19, 2021
Author

Success was found with an Apache2 setup [mod_proxy, mod_proxy_http, mod_headers] and was inspired by 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

The image reference remained as: <img src="/tree.png" alt="tree"> - There is no need of adding a subdirectory /static to /public as implied below.
using this configuration in Apache2:
``
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 page. Does that above give insight into seeking a Nginx solution?

pdkakoba Apr 29, 2021
Author

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 links here
}

pdkakoba May 22, 2021
Author

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mojolicious-Hypnotoad-Nginx Rendering Images #1766

{{title}}

Replies: 3 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Mojolicious-Hypnotoad-Nginx Rendering Images #1766

pdkakoba Apr 15, 2021

Replies: 3 comments · 5 replies

Grinnz Apr 15, 2021 Collaborator

pdkakoba Apr 15, 2021 Author

s1037989 Apr 15, 2021

pdkakoba Apr 16, 2021 Author

s1037989 Apr 16, 2021

pdkakoba Apr 19, 2021 Author

pdkakoba Apr 29, 2021 Author

pdkakoba May 22, 2021 Author

pdkakoba
Apr 15, 2021

Replies: 3 comments 5 replies

Grinnz
Apr 15, 2021
Collaborator

pdkakoba Apr 15, 2021
Author

pdkakoba
Apr 16, 2021
Author

s1037989
Apr 16, 2021

pdkakoba Apr 19, 2021
Author

pdkakoba Apr 29, 2021
Author

pdkakoba May 22, 2021
Author