Nginx+Reactでリバースプロキシした際にcssやjsファイルが404エラーで取得できない

Question

Nginxをリバースプロキシとして使用して、
複数のwebサイトをルーティングして構築しようとしています。
バックエンドサーバ(React + Apatch)にアクセスした際に、
htmlは取得できていますが、css, jsファイルなどが404エラーになってしまいます。

思いつく限り下記に記載しましたが、不足している情報があればご指摘いただければと思います。
よろしくお願いします。

マシン構成

名前	説明
VPS	リバースプロキシNginx
自宅鯖	webサーバ

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• css,jsファイルの取得時にルーティングしたアドレスを考慮してアクセスさせたいです。

発生している問題・エラーメッセージ

htmlに記載されているリンク先が以下のようにルートディレクトリを参照するようになっています。

• href="/style.css"
• src="/static/js/main.js"

そのため、リクエスト先が以下のようになってしまいます。

# 実際のリクエスト先
https://hogehoge.com/static/js/main.js

# ↓本当は以下のようになって欲しい
https://hogehoge.com/mypage1/static/js/main.js

該当のソースコード

以下、nginxの設定ファイルです。
sub_filiterを使用したパターン試してみましたが、どちらも404のままで変化がありません。

# sub_filterなし
location /mypage1/ {
  proxy_set_header Host $http_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Forwarded-Server $host;
  proxy_set_header X-Forwarded-Host $host;
  proxy_set_header X-Script-Name /mypage1/;

  proxy_pass http://<自宅鯖のIP>:<ポート番号>/;
  proxy_redirect default;
}

試したこと

自宅鯖のアドレスに直接アクセスして表示できるか確認したところ、
問題なく表示されていることは確認できました。

htmlに記載されている参照先を/xxx.jsから/mypage1/xxx.jsに変換すれば良いと思うので、
sub_filterを使用してみましたが、404エラーのまま変化がありません。

# sub_filterあり
location /mypage1/ {
  proxy_set_header Host $http_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Forwarded-Server $host;
  proxy_set_header X-Forwarded-Host $host;
  proxy_set_header X-Script-Name /mypage1/;

  proxy_pass http://<自宅鯖のIP>:<ポート番号>/;
  proxy_redirect default;

  sub_filter_once off;
  sub_filter  'https://$host/' '$scheme://$host/mypage1/';
  sub_filter  'https:\/\/$host\/' '$scheme:\/\/$host\/mypage1\/';
  sub_filter  'href="/' 'href="/mypage1/';
  sub_filter  'src="/' 'src="/mypage1/';
  sub_filter  'action="/' 'action="/mypage1/';
  sub_filter  'url("/' 'url("/mypage1/';
}

補足情報（FW/ツールのバージョンなど）

nginx version: nginx/1.18.0 (Ubuntu)