I want the proxy to be able to return everything needed to correctly return what is needed to view http://joelmccune.com
through an NGINX proxy location, http://nginx/joel
. What I have so far works fine for the root of the site, but when the root attempts to load resources such as css files, from subdirectories, the client cannot resolve them.
For instance, in the root of the site, the index.html file contains a line to load an external css file.
<link rel="stylesheet" type="text/css" href="/assets/css/screen.css?v=4a6391e0a5" />
This file is located at...
http://joelmccune.com/assets/css/screen.css?v=4a6391e0a5
...and I want the proxy to recognize the pattern. To return the resource through the URL...
http://nginx/joel/assets/css/screen.css?v=4a6391e0a5
Right now it fails, a 404 error, since it is trying to load from...
http://nginx/assets/css/screen.css?v=4a6391e0a5
Obviously, there are multiple subdirectories, and I want to be able to add more proxy locations as well, so I am trying to figure out how to create a universal pattern to accomplish this.
Here is the config file I am using...
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
# if the request is a referall from //nginx/joel
if ($http_referrer ~* nginx/joel) {
# rewrite the request to be prefixed with //nginx/joel
rewrite ^/?(.*)$ http://nginx/joel/$2 last;
}
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
# proxy any requests to /joel to http://joelmccune.com
location /joel {
proxy_pass http://joelmccune.com/;
}
#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;
}
}
Here are the response headers from the initial request to the root.
HTTP/1.1 200 OK
Server: nginx/1.12.0
Date: Tue, 23 May 2017 20:56:49 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Set-Cookie: __cfduid=db5b717394ddd2681553aed3a5a6d354b1495573008; expires=Wed, 23-May-18 20:56:48 GMT; path=/; domain=.joelmccune.com; HttpOnly
Status: 200 OK
x-powered-by: Express
cache-control: public, max-age=0
vary: Accept-Encoding
X-Ghost-Cache-Status: From Cache
CF-RAY: 363aec8a00b479ff-SEA
Content-Encoding: gzip
Here are the request headers to retrieve the example css resource. Looking at the referer is where I got the idea to try and isolate subsequent resource requests with rewrite...an idea currently not working.
GET /assets/css/screen.css?v=4a6391e0a5 HTTP/1.1
Host: nginx
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Accept: text/css,*/*;q=0.1
DNT: 1
Referer: http://nginx/joel/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
And here are the response headers from my example resource, the css file...obviously not providing much insight except to confirm it is not loading.
HTTP/1.1 404 Not Found
Server: nginx/1.12.0
Date: Tue, 23 May 2017 20:56:49 GMT
Content-Type: text/html
Content-Length: 571
Connection: keep-alive
Thank you in advance for any insight you can offer. This has been vexing me for the better part of a couple days now.
Note: To test, and learn how this all works, I am using Vagrant + VirtualBox + Ubuntu + NGINX with my local hosts file modified to point all requests to http://nginx
to the virtual machine IP address. This should explain the URL structures detailed above.