AWS EC2にReact+Node.jsアプリをデプロイしたいが、APIを叩くことができない。

Question

目的

AWS EC2 にReact、Expressで作ったアプリをデプロイしたい。

現状

• nginxにビルドフォルダを配置することで、Reactはデプロイすることができた。(パブリックIPにアクセスすると見ることができる)
• しかし、クライアントサーバー間でデータのやり取りができず、エラーが起こる。

エラー

• コンソールを見ると、下記のエラーが発生している。

xhr.js:210 POST http://localhost:4000/post net::ERR_CONNECTION_REFUSED

ソースコード

クライアントサーバーのプログラムはとても簡単なものです。

// React
// ------------------------------------

function App() {
  useEffect(() => {
    const testPost = async () => {
      await Axios.post("http://localhost:4000/post").then((response) => {
        console.log(response.data.msg);
      });
    };
    testPost();
  }, []);
  return (
    <div className="App">
      <>aaa</>
    </div>
  );
}

// Express
// ------------------------------------

const express = require("express");
const cors = require("cors");

require("dotenv").config();

const app = express();

const PORT = process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(
  cors({
    origin: ["http://localhost:3000"],
    methods: ["GET", "POST", "PUT", "DELETE"],
    credentials: true,
  })
);

app.get("/", (req, res) => {
  res.send("server up");
});

app.post("/post", (req, res) => {
  res.json({ msg: "成功" });
});

// PORTは4000です。
app.listen(PORT);

設定類

• インスタンスのOSはLinux無料枠です。
• EC2のセキュリティグループには、「SSH」「HTTP」「HTTPS」「カスタムTCP(3000)」「カスタムTCP(4000)」を設定している。
• インスタンス上で「Node.js」「nginx」のみをインストールしている。

以下nginx.confの設定

http {
  ...
    server {
        listen       80;
        listen       [::]:80;
        server_name  _; 
        root         /usr/share/nginx/deploy_test/client/build;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

試したこと

nginx.confで location / {...} の記述を調べながらしたのですが、404が帰ってくるので断念しました。
postリクエストをgetリクエストに変えてみたりもしました。
あとは色々試しすぎて何を試したのか忘れてしまいました。

質問

• 現状の認識として、nginxにビルドフォルダを配置して、サーバーのファイルで「node index.js」でサーバーを起動したら正常に動くと思っていたのですが、どうやら違ったようです。どのようにすれば正常にクライアントサーバーでデータのやり取りができますか？

現在デプロイを試みているのは急遽作ったデプロイのテストアプリです。
これをやる前に、React+Express+MySQLのアプリのデプロイを試みましたが、上記と同じエラーが起きたので単純化してデプロイをしてみようと思い、今に至ります。
間違った認識があれば教えてくださると幸いです。よろしくお願いします。

Comments

[退会済みユーザー]

目的が抽象的だったので改めて、具体的に述べると、
ReactとExpressをAWS EC2にデプロイし、データのやり取りをしたいです。
この際、ReactはS3、ExpressをEC2でもいいと思っているのですが、どの方法が一般的なのでしょうか？

[hoshi-takanori]

クライアントから localhost にアクセスしたら、それはブラウザを動かしてる PC 自体ってことになりますが…。

[退会済みユーザー]

ありがとうございます。
localhostの認識が違っていました。
あなたのおかげで無事解決するに至りました。

[解決]
クライアント側でhttp://localhost:4000/postをhttp://xxx.xxx.xxx:4000/postに変更
サーバー側のCORSも同様にパブリックIPにすることで解決しました。

[退会済みユーザー]

ベストアンサーにしたいのですが、修正欄にコメントされてるため、ベストアンサーにできません。
hoshi-takanoriさんにお任せしますが、もしよろしければ適当な回答を投稿してくださればそれをベストアンサーにします。よろしくお願いします。

Answer 1

nginxに入ってきたリクエストをexpressに渡す必要がありますね。
「nginx express リバースプロキシ」で検索してみてください。

Comments

[退会済みユーザー]

ありがとうございます。
元の記述から以下の文を追加・修正してみました。
この状態でパブリックIPにアクセスするとサーバー側のページが表示されました。
```
server {
listen 80 default;

location / {
proxy_pass http;//localhost:4000;
}
}
```

しかし、express.staticでサーバー側にクライアントのビルドしたフォルダを置くと、クライアント側のページが表示されますがやはり
```
POST http://localhost:4000/post net::ERR_CONNECTION_REFUSED
```
が表示されます。
どのような原因が考えられますでしょうか？

[退会済みユーザー]

listenの部分を
listen パブリックIP:80
に変えたらどうでしょうか。