Gatsby build on Nginx not loading js on build

January 29, 2019 1.1k views
Nginx Ubuntu 18.04

Hello,
I have a static site made with Gatsby and WP for the backend. I have the same git deployed on Netlify and it works great. When it comes to deploy it on any Ubuntu like server i have always the same problem.
Here is what I have done:

I have the same problem on all environments. What am I missing?

Thanks a lot,
F.

2 Answers

Hey F.

It looks like your images and JS are not loaded because of relative URL issues:

  1. The nginx document root is /var/www - _so when someone loads http://46.101.101.149 nginx looks for files in /var/www
  2. Your site is two directories down, at: /var/www/filipporivolta.it-gatsby/public/ so you correctly had to add /filipporivolta.it-gatsby/public/ to the external URL to get to your Gatsby public root.
  3. However, Gatsby doesn't know about those two subdirectories, and renders out links to JS and Images like this: <script src="/1-b0f05c4bb642dc46906c.js" async=""> ^ That URL is referencing a nonexistent JS file at http://46.101.101.149/1-b0f05c4bb642dc46906c.js AKA /var/www/1-b0f05c4bb642dc46906c.js

To Fix: Move your nginx document root from /var/www/ to /var/www/filipporivolta.it-gatsby/public/ by updating your nginx config and reloading nginx. Instructions here: https://www.digitalocean.com/community/tutorials/how-to-move-an-nginx-web-root-to-a-new-location-on-ubuntu-16-04#step-2-%E2%80%94-updating-the-configuration-files

by Melissa Anderson
On Ubuntu, by default, the Nginx web server stores its documents in /var/www/html, which is typically located on the root filesystem with rest of the operating system. Sometimes, though, it’s helpful to move the document root to another location, such as a separate mounted...

Thanks for your answer! Looking forward to try this!

Have another answer? Share your knowledge.