NginxとReactを連携させたい

Question

Nginxをプロキシサーバとして、npm startで動いているReactアプリにアクセスしたいと考えています。
Nginxに以下のような設定をしましたが、http://www.example.comのようにアクセスしても、index.htmlしか返ってこず、画面が真っ白になってしまいます。http://www.example.com:3000とポートを指定すると正しくレンダリングされたページが返ってきます。
どのような設定をすれば、80番ポートにアクセスしても正しくレンダリングされるのでしょうか。また、npm run buildはしないでnpm startで公開したいと考えています。

#sites-enabled/default
server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name www.example.com;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
                proxy_pass http://127.0.0.1:3000;
        }

        # pass PHP scripts to FastCGI server
        #
        #location ~ .php$ {
        #       include snippets/fastcgi-php.conf;
        #
        #       # With php-fpm (or other unix sockets):
        #       fastcgi_pass unix:/run/php/php7.3-fpm.sock;
        #       # With php-cgi (or other tcp sockets):
        #       fastcgi_pass 127.0.0.1:9000;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /.ht {
        #       deny all;
        #}
}

Comments

[hoshi-takanori]

npm start するとおそらく webpack-dev-server が起動するようになってると思いますが、これは開発用のサーバーなので、よほどの理由がない限り npm run build すべきだと思います。npm run build すれば静的ファイルを配置するだけなので nginx だけで済み、別途サーバーを動かす必要はありませんので。

[mask_mus]

ページ遷移後にjsを実行させる必要があったため、Linkコンポーネントを使わず、aタグを使ってページ遷移をしていました。aタグを使うと、npm run buildで公開したところ、遷移先のページが生成されず404になってしまいます。Linkタグをつかうと、ページ遷移後にjsが実行されず、リロードして初めてjsが実行される、という状況になっています。npm startで公開すれば正しく動かせるのですが、このようなケースでnpm run buildする場合、どのようにプログラムを変えていけばよいのでしょうか？

[hoshi-takanori]

a タグの飛び先でも同じ index.html を返したいなら、nginx の設定で可能なはずです。
https://hazediary.hateblo.jp/entry/2018/11/14/003055

[mask_mus]

解決することができました！本当に本当にありがとうございました！