Nginxでドメインを設定してReact × ExpressのWebサービスに飛ばしたい

Question

【開発環境】

• ローカル開発環境(Centos7)
• バックエンド(Express)
• フロント(React)

現在上記の内容でWebサイトの開発を行っています。
バックエンド http://localhost:5000
フロント http://localhost:3000
を同時に立ち上げて、フロントからバックエンドのAPIを取得しています。

WebサーバーにNginxを使用し、特定のドメイン(hosts登録)してそのドメインでアクセスしたときに http://localhost:3000に飛ばしたいと考えています。

Nginx側で下記の用に設定を行っても上手くいかず、また参考になるサイトもあまりなく原因もわかりません。

[/etc/nginx/conf.d/coodig_http.conf]
upstream coodig.com {
    server 192.168.33.11:3000;
}

server {
        charset utf-8;
        listen 80;
        server_name coodig.com;
        root /home/vagrant/public_html/react-test/client/public/;
        proxy_redirect                          off;
        proxy_set_header Host                   $host;
        proxy_set_header X-Real-IP              $remote_addr;
        proxy_set_header X-Forwarded-Host       $host;
        proxy_set_header X-Forwarded-Server     $host;
        proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;
        add_header "Access-Control-Allow-Credentials" "true";
        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
        add_header "X-Frame-Options" "SAMEORIGIN";
        location / {
                proxy_pass http://coodig.com;
        }

ちなみにNginx側でhttp://localhost:5000に飛ばすことはできました。
こちらの内容が分かる人はぜひ教えていただきたいです。
よろしくお願いいたします。

【追記】

Comments

[maai]

> ちなみにNginx側でhttp://localhost:5000に飛ばすことはできました。

貼り付けられたコードの192.168.33.11:3000 の 3000 を 5000 に変えたら動くということでしょうか

[usawb]

そうです！
5000に変えると、Express側の方には指定したドメインでアクセスできるようになりますが、
React側の3000にはアクセスできない状況です、、、。

[maai]

アクセスできないとの事なので502 bad gatewayと考えていましたが、nginxの画面ですか？

[usawb]

上記の画像のように、ステータスコードが200でアクセスは成功しているのですが、画面に「Invalid Host header」と表示されてWebサイトが表示されていない状況です。
どこかでアクセスの制限がかかっているのでしょうか( T o T )

Answer 1

root /home/vagrant/public_html/react-test/client/public/;

この行を消すとどうなりますか…？（rootとproxy_passを同時に指定するとどうなるのか自分はよく知らないです）

Comments

[usawb]

```
upstream coodig.com {
server 192.168.33.11:3000;
}

server {
charset utf-8;
listen 80;
server_name coodig.com;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header "Access-Control-Allow-Credentials" "true";
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
add_header "X-Frame-Options" "SAMEORIGIN";

location / {
proxy_pass http://coodig.com/;
}
}
```

上記の内容で実行しましたが、無理でした、、、。

[maai]

https://www.weblog-beta.com/posts/setup-react-js/ のdisable check は試しましたか？
( nginxなしでサーバを起動してみて、http://example.com:3000 で同様の問題が発生する場合 )

Reactなので、静的ファイルにビルド出来る場合は、ビルドした方が良さそうです…

[usawb]

かしこまりました。
一度その方法でやってみて、それでも無理なようでしたら再度改めて質問を立てたいと思います。
親身になって答えていただきありがとうございました！