Reverse proxy for a subdirectory in nginx

I want to set up a Reverse proxy on my VPS for my Heroku app (http://lovemaple.heroku.com) So if I visit mysite.com/blog I can get the content in http://lovemaple.heroku.com

I followed the instructions on the Apache wiki.

    location /couchdb {
        rewrite /couchdb/(.*) /$1 break;
        proxy_pass http://localhost:5984;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

I changed it to fit my situation:

    location /blog {
        rewrite /blog/(.*) /$1 break;
        proxy_pass http://lovemaple.heroku.com;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

When I visit mysite.com/blog, the page show up, but js/css file cannot be gotten (404).
Their link becomes mysite.com/style.css but not mysite.com/blog/style.css.

What's wrong and how can I fix it?

Solution 1:

You need to fix the references in your HTML, nginx isn't responsible for doing it for you. You can set them to be agnostic to what directory they reside in:

<link rel="stylesheet" type="text/css" href="style.css">

(instead of "/style.css")

Solution 2:

Go to your wordpress's database, and update siteurl in wp_options to http://lovemaple.heroku.com is OK.