ドメインルートでWordpressを公開しているサーバーのサブディレクトリでReact（react-router有り）のSPAを公開したい

Question

Webサーバーの運用に詳しくないながらも、いろいろトライしてみましたが、どうにもよい方法が見つからなかったので、お助けください<(_ _)>

やりたいこと

Wordpressを運用しているサーバーで、SPAを公開したいです。
SPAはcreate-react-appで作成し、yarn buildで生成した静的html群（buildディレクトリの中身）です。

ドメインルートでWordpressを公開しているので、サブディレクトリで、SPAを公開したいです。

https://www.hogehoge.jp/ [Wordpressのホームページ]
https://www.hogehoge.jp/app [SPAの公開]

というイメージです。

状況

SPAに関するファイルは、/home/hoge/www/buildに保存されており、npmパッケージのserveを利用して、0.0.0.0:5000(デフォルト設定)で配信しています。

$ serve -s /home/hoge/www/build

React-routerで画面初期値の切り分けを行っており

http://localhost:5000/12345678

のような感じでSPAを呼び出すことになります。
serveを利用しているのは、サブURI（12345678の部分）をハンドリングしてくれるからです。

グローバルIPでSPAが動作することは確認しています。

http://123.123.123.123:5000/123456

実施したこと

Wordpressようserver設定の中に、下記のようにproxy_passを設定しました。
(proxy_set_header部分は、ググったものをそのまま使っており、理解できていません・・・)

    location /app/ {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass  http://localhost:5000;
    }

表示まではされますが、URIがhttp://localhost/app/12345678で呼び出され、初期値の切り分け情報がappとなり、正しく動作しません。

どのように設定すれば、https://www.hogehoge.jp/app/12345678をhttp://localhost:5000/12345678に受け渡すことができるでしょうか？

よろしくお願いします。

####追記
serveでの公開をやめ、nginxにSPA用のサーバーディレクティブ（localhost:4000）を追加し、ログを取ってみたところ、nginxでのリバースプロキシでは、Requestが/12345678に変わっていることが確認できましたが、別の部分で、reactで受けているlocationが/app/12345678になっているようです。

Answer 1

CHERRYさん、いろいろアドバイスありがとうございました。

結論から申しますと、そもそも、やりたいことが矛盾しておりました。

Reactで作成したSPAのrouteURIと、公開する際のURIはフォーマットを合わせないとダメですね。
リバースプロキシを通す際のアドレス変換が、SPAのroutingにも適用されると、思い込んでしまっていました。

完全に勘違いです・・・（；＿；）

ブラウザで動いているSPAで扱うURIは、変換しようがありませんよね・・・当然です。

SPA側のrouteを

    <Route path={"/app/:id"} component={Page}/>

として、公開URIに合うようにしました。

おさわがせしました。

Answer 2

nginx のドキュメント ngx_http_proxy_module.html#proxy_pass に

If the proxy_pass directive is specified with a URI, then when a request is passed to the server, the part of a normalized request URI matching the location is replaced by a URI specified in the directive:

とあるので、proxy_pass の最後に / をつけるとどうなるでしょうか？

    location /app/ {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass  http://localhost:5000/;
    }

---

(2018.10.22 12:15追記)

ふと思いついたので...

力技ですが、rewrite でむりやり URL を書き換えるとどうなるでしょう？

    location /app/ {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        rewrite ^/app/(.+) $1 break;
        proxy_pass  http://localhost:5000/$1;
        proxy_redirect default;
    }

Comments

[Meganezaru]

ご回答ありがとうございます！
最後に/をつけてみましたが、残念ながら結果は変わりませんでした・・・

ドキュメントを読む限りは期待できる設定ですよね。
もう少し調べてみようと思います！

[CHERRY]

そういえば、質問の設定では、proxy_redirect を off にしていたので、そのまま使いましたけど、これを ` proxy_redirect default; ` に変えたら何か変わりますか？ ( 直接は関係なさそうだけどなぁ...)

[Meganezaru]

ありがとうございます！
proxy_redirect default; に変えてみたら、proxy_passの後に書け！と怒られたのでwその通りにしてみましたが、残念ながら変わらずです（；＿；）

SPAをnginxから直接呼び出せるよう、serverディレクティブを追加して、そちらをproxy_passに指定してみましたが、変化がありません・・・ただ、フォワード後のログが取れるようになるので、いろいろ試してみています。

[CHERRY]

昼ごはんを食べていたら、ふと思いついたので...　追記してみました。　
本番運用は？かなぁと思いますが...

[Meganezaru]

ありがとうございます！
お風呂とかでも、おりてくるやつですね笑
試してみます！

[Meganezaru]

フォワード後のログを確認してみたのですが・・・どうやら、リクエストは、はじめに回答していただいた内容で正しく/12345678に書き換わってるようです。

どうも、React側の問題のようです。
リクエスト部分ではなく、フォワード前のURLがフォワードした後にも受け渡されていて、そのURLで切り分けの情報が抽出されるような雰囲気です。

フォワード前のURLを受け渡さないようにすれば、解決できる気がしています。