Rails开发应用程序无法在不同平台上与nginx proxy_pass一致地提供JS服务

Question

I'll try to keep this short on how I got here, but its been about a 3 day journey.

For years put up "Demo" apps somewhere on my network for other people to look at and give me feedback. This was initially on my laptop with the development app running on some high port and my router redirecting that port to my laptop. I have put up a few apps on other platforms (MacMini, RaspberryPI, Linux) and had nginx proxy_pass port 80 to that platform. Last week I tried to streamline my process and put all the Demos on the MacMini, thats where I ran into problems with some apps not working in that jQuery was not found or loaded on some demos, usually ones that had Zurb Foundation.

I can't figure out what is to blame for the problem and I have five candidates.

• My nginx configuration
• Rails development environment
• My JS/CSS manifest files
• Foundation
• OSX spring/file_watcher problems

To document this I have one app (same code from a git pull, fair amount of JS and just a little basic Foundation) running on three platforms. The MacMini is running 10.13.4 (high sierra, but I've gone through 10.12.2 and 10.12.6 in the last few days). A MacBook Air running 10.12.6. A Rasberrian OS (Debian 9) running in VirtualBox on the MacMini. [foundation-rails (6.4.3.0), rails (5.1.6), jquery-rails (4.3.3)]

The basic nginx config is the same for all three except for the server_name and port number. I've tried various tweaks but none fixed my problem.

server {
  server_name bingo2.mydomain.us;

  location / {
    proxy_redirect     off;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://10.0.1.104:8604/;
  }
}

My JS/CSS manifest files are currently below. I've moved stuff around trying to make sure I had the correct order and options set for the vendor. For the CSS file, I took out the require foundation_and_overides entry since it's in the tree and it has no effect, think it was left over from and older version of foundation.

// This is a JS manifest file that'll be compiled into application.js, which will include all the files
// listed below.

//
//= require rails-ujs
//= require jquery
//= require foundation
//= require_tree .

$(document).foundation();

/*
 * This is a css manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 *= require_self
 *= require foundation_and_overrides
 *= require_tree .

 */

I originally had the apps running in plain development environment, but found a potential bug ( https://github.com/rails/rails/issues/26158 ) that points of an OSX file system problem. A work around to was to remove file_watcher so I created an 'demo' environment which is just a development environment with the file watcher gems and config removed.

I start the applications with rails s -p 8604 -e demo -b 0.0.0.0 -d and hit the apps with bingo{1,2}.mydomain.us.

The results are that both Mac's fail with web console errors

 [Error] Failed to load resource: The network connection was lost. (foundation_and_overrides.self-d1f959e72f9d5d6603cd707629d1e6b8df8a5731363c48252b8b10028591a11a.css, line 0)
 [Error] ReferenceError: Can't find variable: jQuery
  (anonymous function) (foundation.core.self-f3c7f9657e3fa857b22c08af6fe5c52df6f2ad4f5b85268319d47c1be483353d.js:74)
  __webpack_require__ (foundation.core.self-f3c7f9657e3fa857b22c08af6fe5c52df6f2ad4f5b85268319d47c1be483353d.js:21)
  ...

If I take nginx out of the equation and hit the local ports directly (10.0.1.104:8604), all platforms work. (but have your ever asked anyone little to no technical experience to look at something on a web site using a port #!, it confuses them, let alone they wanting to put www in the url)

Certainly OSX seems to be the main problem, but only with proxy_pass.

Anyone have any ideas or see something missing in my setup? I guess I could just set up staging environments and deploy the apps, but a simple git push and pull seems so much easier for what I wanted to do.

Most similar questions about nginx not serving JS remain unanswered or a simple mistake being corrected.

Answer 1

After a couple days with no response, I dug a little more and found something that works.

Zurb Foundation has always presented problems. I gave up on turbo links long ago. It just does not play well with it, but getting rid of everything in the manifest files except what was required, I got down to one javascript error saying it could not find foundations stuff. After looking at $(document).ready versus $(window).load , I then changed the javascript manifest to:

//= require rails-ujs
//= require jquery
//= require foundation
//= require_tree .

$(window).load(function() {
    //Fires when the page is loaded completely
    $(document).foundation();
});

I guess everything was not loaded when the foundation call was made. `$(document).ready just was not doing the trick.

This still does not answer why it works on linux and not MacOSX.

EDIT

Except that caused an error using chrome!

net::ERR_CONTENT_LENGTH_MISMATCH

I added proxy_buffering off; to the nginx location.