We Keep Coding

Images not showing up on server but working fine on localhost in node js

I'm working on a node js app and I have some images which I want to show on the frontend but after publishing the app on the digital-ocean server images are not showing up
Below is how the image directory structured
|__ static
|__ assets
|__ favicon
|__ images
Index.js
app.use(express.static(__dirname + '/static'));
HTML files (Using EJS)
<img src="/assets/images/banner.png">
Images are working fine on localhost but not on the server. Can't figure out the reason for this, Any leads would be great.
Update:
I checked for folder permission and it seems fine.
Found a work around but not sure about the reason for this issue, I removed the parent directory assets and moved the child directory directly under static and after this it worked perfectly fine.
Any explanation on this issue might help to understand.

Have you checked the folder permission ? That might be blocking you from publicly accessing files within the folder. You want to have 755 permission.

I had this issue, and it was because I had a nginx configuration causing issues. When I looked in the server logs, I saw the server trying to serve files located /usr/share/nginx/html/ instead of where they were actually located. After I deleted it, the issue went away.
File: static.conf
location ~* \.(?:jpg|jpeg|gif|png|ico)$ {
expires 7d;
access_log off;
add_header Cache-Control "public";
}

Deploying React js build directory in nginx using kubernetes

Deploy React js(build directory) static files in Nginx server.
Using kubernetes, i am running the nginx server to serve the React js "build" directory for static files. I could access the simple index.html in the browser. But not the index.html with react js code. The root directory has the index.html file, static directory and other files in it. Directory structure is copied to this path.
nginx.conf is like below
events {
worker_connections 1024;
}
http {
server {
listen 80;
root /usr/share/nginx/html;
#index index.html;
location / {
index index.html;
try_files $uri $uri/index.html /index.html;
}
location /static/ {
autoindex on;
root /usr/share/nginx/html/static/;
}
}
}
In the browser, index.html is not loaded, but in source (right-click in the browser > select source), the index.html code is available. formatted index.html file copied from source in the browser is at this path. I am predicting that javascript(css,js) code is not executed or having issues loading in the browser. Otherwise, there is a problem with the nginx configuration to load the javascript files.
how to properly configure nginx to deploy Reactjs build directory files?

try_files does not tell nginx to serve the static file. Reaching the closing brace in the absence of any other operation causes it to serve the static file. try_files tests for the existence of the file in the local file system and may rewrite the URL.
You have syntax errors in your file i.a white spaces.
Remember to create service for nginx - type LoadBalancer and refer to it in deployment configuration file. You have to add your server if there are several servers that match the IP address and port of the request.
Here is example how you should execute this process. Make sure you followed every step from tutorial: nginx-configuration - there is example of exercise on PHP application but there are the same steps to reproduce with ReactJS app.
Your conf file should looks like this:
events {
worker_connections 1024;
}
http {
server {
listen 80;
root /usr/share/nginx/html;
index index.html index.htm;
server_name your_server_name_or_IP
location / {
try_files $uri $uri/index.html /index.html;
}
location /static/ {
autoindex on;
root /usr/share/nginx/html/static/;
}
}
}

The below code that works for me.
server {
listen 80;
root /usr/share/nginx/html;
index index.html index.htm;
server_name xyz.application.com;
server_name localhost;
location / {
ssi on;
set $inc $request_uri;
if (!-f $request_filename) {
rewrite ^ /index.html last;
}
index index.html;
try_files $uri $uri/index.html /index.html =404;
}
Setting the rewrite redirects to index.html page. I am not sure about the impact of ssi, set $inc $request_uri in the code.

NGINX is not loading my application even i mentioned the root

here is my chat application present in C:\chat1 which contains index.html and index.js files
here is the path i am setting like this in config file of NGINX.
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root C:/chat1/;
index index.html index.htm;
}
i changed forward slashes and backword slashes and changed to other application stil it is not loading instead it is show as welcome page as below
Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required.
For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.
Thank you for using nginx.
can anyone please help me on this issue.. Thanks in advance.

You issue is that you are loading the default nginx config also. In case of multiple server blocks, the one that came first answers the request. In your case it is default nginx config block which is answer. So simple fix you can try is add default_server.
server {
listen 80 default_server;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root C:/chat1/;
index index.html index.htm;
}
If that doesn't help then you need delete the config of default server. You can see what config your nginx is actually loading by running nginx -T

Laravel 5.4 Served in subdirectory Nginx. 404 when including js files

My problem is serving CSS and JS files using Laravel 5.4 on an Nginx server (Ubuntu). I have configured the server to serve the application from a nested sub-directory (not in the root of the web server). Routing is working. See:
https://zwestwind.com/sandboxes/zypth/blog/tasks
https://zwestwind.com/sandboxes/zypth/blog/posts
and just ..blog/ as well.
The problem is that I cannot include JS files (and likely css). The JS file is in "blog/public/js/posts.js".
Attached below is my site configuration, and the code to include a JS file in a blade template. You can view the error in the console when you hit the site.
Server Configuration:
server {
return 404;
}
server {
listen 80;
listen [::]:80 ipv6only=on;
listen 443 ssl;
root /var/www/zwestwind.com/html;
index index.php index.html index.htm;
# Make site accessible from http://localhost/
#server_name example.com www.example.com;
server_name zwestwind.com www.zwestwind.com;
ssl on;
ssl_certificate /etc/nginx/ssl/pub_clf_origin.pem;
ssl_certificate_key /etc/nginx/ssl/priv_clf_origin.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
ssl_prefer_server_ciphers on;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
# Uncomment to enable naxsi on this location
# include /etc/nginx/naxsi.rules
}
# route to laravel project: $uri = /sandboxes/zypth/blog/public/index.php
location ~ ^/sandboxes/zypth/blog {
alias /var/www/zwestwind.com/html/sandboxes/zypth/blog/public;
try_files $uri $uri/ #laravel;
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
#fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME /var/www/zwestwind.com/html/sandboxes/zypth/blog/public/index.php;
}
}
location #laravel{
rewrite /sandboxes/zypth/blog/(.*)$ /sandboxes/zypth/blog/index.php?/$1 last;
}
# Only for nginx-naxsi used with nginx-naxsi-ui : process denied requests
#location /RequestDenied {
# proxy_pass http://127.0.0.1:8080;
#}
error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
# NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
# With php5-cgi alone:
fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
Blade code to include the JS file:
<script src="{{ URL::asset('posts.js', true) }}"></script>
Things that I have tried:
I have tried using 'js/posts.js' and many other variations, including hardcoded paths such as 'zwestwind.com/sandboxes/zypth/blog/public/posts.js' to no avail (with the protocol, I can only post 2 links due to reputation).
Adding a location block: location ~ .js$ {...} to add a content-header of application/x-javascript
I have configured a vhost server to serve the same application at (http)blog.zwestind.com/posts. All routing and inclusion of CSS/JS files works there, check it out. The server config for that sub domain is exactly as specified in the Laravel installation guide.
I am guessing this issue stems from a server config problem with the primary domain... ie) the location block listening for "^/sandboxes/zypth/blog" is catching the request for the JS file and modifying the URI, thus resulting in a 404. How would I fix this?
When the script works, it will say "posts.js is ready!" in the console (see the sub domain on http for an example).
Thanks.
P.S. If anyone is curious as to WHY I want to serve this app (and more) in a nested directory, it is because I want to host live demo apps using ONE SSL cert via ONE domain while also learning how to configure web servers. This server is not intended for heavy traffic.

Try including the file like this:
<script src="/js/posts.js"></script>
The "/" before the directory sends the request to the root (public folder), where the js and css directories are.
I found this better then adding new location root or aliases in the nginx config.
I do the same with images and it works fine.

Kibana stuck on loading screen [UPDATE - Nginx only serving partial JS file]

Kibana is not starting up properly. When I open up the console it appears to be a javascript resource issue. When I open the js files directly (clicking on their link in the console) it appears they are incomplete and have been abruptly been cut off. Not sure if this is a browser file limit or somehow my files have been cut off? Please see the images below to show you what Im seeing.
File as seen in chrome. This is the very bottom of the file as per how chrome loads it.
I have restarted kibana to see if that would resolve it, no luck.
I think browsers have a max line limit in js files. I am not sure why kibana hasn't minified the js files? has it started up in some dev mode?
question summary
I guess I have discovered the reason for kibana not loading is because of the js not fully loading, this would change my question to how can I get all of my javascript to load?
Update
I have located the JS files in the kibana bundles folder and found that the file is fully intact. It is indeed a browser loading complete file issue. I'm confused why suddenly those files are too long to be loaded by the browser? Was working fine a fortnight ago. Still trying to work out how I can get chrome to load the files.
As suggested by #asettouf I have removed(backed up) bundles folder in the /opt/kibana/optimize directory and started kibana up again. This did re-generate the bundles folder but the files are identical, meaning I still have the same issue. How come Kibana is not minifying the js when it bundles the files for caching?
My kibana.yml. I think it is cleaner to paste a link to it:
http://www.heypasteit.com/clip/O8HUN
went back turned on verbose logging and this is my output from deleting optimize folder and restarting. nothing stands out as an error message to me.
/var/log/kibana/kibana.log
replaced hostname with localhost for privacy and security reasons
http://www.heypasteit.com/clip/OA4OR
I think this is an error with the webpack module not compiling the JS correctly. however i dont know enough about the module to debug it.
the files in question in the optimize folder are:
commons.bundle.js which is 65723 lines
kibana.bundle.js at 108950 lines
These are far from optimized and the content inside the files are not minified.
Result of curl -v localhost:5601
http://www.heypasteit.com/clip/OEKEX
CURL REQUEST DIRECTLY TO KIBANA JS RESOURCES
I can confirm that curl -ukibanaadmin -v http://localhost/bundles/commons.bundle.js returns me the full 108950 lined JS file and curl -ukibanaadmin -v http://actual_kibana_hostname/bundles/commons.bundle.js returns the same content (number of lines) as my browser.
With that information I can make the assumption that this is not a Kibana issue at all. As mentioned by #val it is probably a setting in nginx that is preventing the entire file from being served unless accessed by localhost.
I think I can rule out Cloudflare as I still get the issue when I hit my server directly from the browser.
Thanks to everyone's suggestions and help so far. Getting closer and closer to solving my issue. I will do some more research on Nginx and its settings.
NGINX UPDATE
Nginx appears to only be loading the first 72kbs of my havascript files. Ive search all around my nginx config files and cannot see this setting anywhere. Ive added things like
location / {
...
proxy_max_temp_file_size 1m;
...
}
and
location / {
...
sendfile on;
sendfile_max_chunk 1m;
...
}
But still I'm unable to overwrite this weird setting that is only allowing first part of file being loaded.
The connection uses nginx proxy_pass to foward port 80 to kibanas port '5601'. I feel like there could be a setting that limits file transfer over proxy? just not sure where to find it.
proxypass connection looks like:
server {
listen 80;
server_name logs.mydomain.com;
auth_basic "Restricted Access";
auth_basic_user_file /etc/nginx/htpasswd.users;
location / {
proxy_pass http://localhost:5601;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
And my default nginx settings is posted here.
/etc/nginx/nginx.conf
http://www.heypasteit.com/clip/OEKIR
I have tried adding sendfile_max_chunk 512k and changed worker_processes from 4 to 2. Any other config things were already there. I was not the the one who initially set up the ELK stack.
And after the mentioned changes it looks like this:
/etc/nginx/nginx.conf
http://www.heypasteit.com/clip/OEKF0
ERROR RETURNED - DISK SPACE UPDATE
This issue has come back. When I checked the VMs health I noticed that the disk drive was full. Elasticsearch was logging a couple of GBs worth of text in to error logs each day. I still Have not fully identified why elastic search is flooding the error logs.
But I think excessive disk space usage has contributed to this error. Nginx could be detecting this and switching over to minimal safe configuration which would only allow 72kbs of data to be served per file.
When I cleared out the excessive logs i stopped getting the incomplete js error without needing to restart nginx or kibana.

Since you're accessing Kibana behind a proxy, you'd need to bypass the proxy and see if the problem persists, i.e. compare the load times of
// through proxy
curl -v kibana_host/bundles/commons.bundle.js
curl -v kibana_host/bundles/kibana.bundle.js
// bypass proxy
curl -v localhost:5601/bundles/commons.bundle.js
curl -v localhost:5601/bundles/kibana.bundle.js
If the load time is lower when you bypass the proxy then you know it's not a Kibana issue but more with the way your proxy is configured.
UPDATE
Since we've narrowed this down to a proxy issue, try to update your nginx config with this
sendfile_max_chunk 512k
worker_processes 2
UPDATE 2
Try another modification of your nginx configuration:
proxy_buffering: off;