Docker+Nginxでリバースプロキシをやりたい

Question

###前提・実現したいこと
Dockerで立てたNginxで、nginx-proxyを使わずURLのパスによってDockerで立てた複数のWebサービスにアクセスできるようにしたいと思っています。

OSはMacOS Sierra、Dockerは1.12.3です。

###発生している問題・エラーメッセージ
JSやCSSファイルのリクエストURLがhttp://IPアドレス/red/ファイルのパスやhttp://IPアドレス/blue/ファイルのパスではなくhttp://IPアドレス/ファイルのパスとなっています。一応、rewriteでリダイレクトさせましたが、複数のWebサービスを動かすと一方がJSやCSSファイルを読み込んでくれません。
rewriteの正規表現だけで無理やり解決することも可能でしょうが、Webサービスを増やす可能性もあるので違う方法で解決したいです。
どうしたら複数のWebサービスを正常に動かすことができますか？
解決策をご教示ください。

###該当のソースコード

# docker-compose.yml
nginx:
  image: "nginx"
  ports:
    - "80:80"
  links:
    - "redmine:redmine"
    - "rhodecode:rhodecode"
  volumes:
    - "$PWD/conf.d:/etc/nginx/conf.d"
rhodecode:
  image: "codingtony/rhodecode"
  ports:
    - "5000:5000"
db:
  image: postgres:9.5
  environment:
    - POSTGRES_PASSWORD=secret
    - POSTGRES_USER=redmine
redmine:
  image: redmine:2.6.8
  links:
    - db
  ports:
    - "3000:3000"
  volumes:
    - /srv/docker/redmine/redmine:/home/redmine/data

# default.conf  nginx.confは未編集です。
server {
    listen       80;
    server_name  localhost;
    
    location / {
        rewrite ^/(.+)$ /red$uri redirect;
        rewrite ^/(.+)$ /blue$uri redirect;
    
        root /etc/nginx/conf.d;
        index index.html;
    }

    location /red/ {
        proxy_pass http://192.168.99.100:3000/;
    }
    
    location /blue/ {
        proxy_pass http://192.168.99.100:5000/;
    }


    error_page  404              /404.html;
    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Answer 1

JSやCSSファイルのリクエストURLがhttp://IPアドレス/red/ファイルのパスやhttp://IPアドレス/blue/ファイルのパスではなくhttp://IPアドレス/ファイルのパスとなっています。

となってる場合はどっちのサーバに行かせるべきかわからないので無理ですよ。

通常は、css/jsもred/blueの下にします。

blue.css
red.css
になってるとしたら、ファイ名で切り替えることになります。

Answer 2

default.conf内、proxy_passの最後の「/」を削除すれば、意図された挙動になると思いますがいかがでしょうか？

#default.conf
server {
    listen       80;
    server_name  localhost;

    location / {
        root /etc/nginx/conf.d;
        index index.html;
    }

    location /red/ {
        proxy_pass http://192.168.99.100:3000;
    }

    location /blue/ {
        proxy_pass http://192.168.99.100:5000;
    }


    error_page  404              /404.html;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

以下公式です。
「URIで指定されていれば」というのが、「/」がついた状態のことですね。
http://mogile.web.fc2.com/nginx/http/ngx_http_proxy_module.html#proxy_pass

・proxy_passディレクティブがURIで指定されていれば、リクエストがサーバに渡された時に locationに一致したnormalizedリクエストがディレクティブで指定されたURIと置き換えられます:

・proxy_passがURIで指定されていなければ、元のリクエストが処理される時にリクエストURIはクライアントから送信された同じ形式でサーバに渡されます。