react+express+RDS webアプリケーションをEC2上でnginxのリバースプロキシを使いデプロイしたが、postでリアクションが返ってこない。
Q&A
Closed
解決したいこと
ReactのUIから以下の操作を行った場合に、レスポンスが返ってこない:
・アカウント名とパスワードをinput textに入力して送信ボタンを押したら、async fetchを使ったPOSTリクエストを行い、RDS上に同じデータがあれば、200レスポンスを返して、memberonlyのページに遷移するようにしています。
デプロイ状況
1. React（フロントエンド）
Nginxを使用してリバースプロキシ経由でデプロイ済み。
URL: http://ec2-〇〇-〇〇〇‐〇〇〇-〇〇〇.ap-northeast-1.compute.amazonaws.com
表示は正常。
2. Express（バックエンド）
Nginxを使用してリバースプロキシ経由でデプロイ済み。
APIエンドポイント: http://ec2-〇〇-〇〇〇‐〇〇〇-〇〇〇.ap-northeast-1.compute.amazonaws.com/api
上記のエンドポイントで、GETリクエストは正常に応答した。
3. RDS
MySQL [production_db]> describe authentication;
+--------------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+--------------+--------------+------+-----+---------+----------------+
| id | int | NO | PRI | NULL | auto_increment |
| account_name | varchar(255) | YES | | NULL | |
| password | varchar(255) | YES | | NULL | |
+--------------+--------------+------+-----+---------+----------------+
発生している問題・エラー
Unexpected token '<', "<!DOCTYPE "... is not valid JSON
該当するソースコード React側
try {
const res = await fetch(`http://ec2-〇〇-〇〇〇-〇〇〇-〇〇〇.ap-northeast-1.compute.amazonaws.com/api/authentication`,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ account_name, password })
});
const data = await res.json();
if (!res.ok) {
throw new Error(data.error);
}
// 認証成功時の処理
navigate('/memberonly');
} catch (error) {
setErrorMessage((error as Error).message);
return;
};
該当するソースコード Express側
app.post("/api/authentication", (req, res) => {
const account_name = req.body.account_name;
const password = req.body.password;
const query = "SELECT * FROM authentication WHERE account_name = ? AND password = ?";
db.query(query, [account_name, password], (err: any, result: any) => {
if (err) {
return res.status(500).json({ error: "Server Error"});
}
if (result.length === 0) {
return res.status(401).json({ error: "Invalid Account Name or Password"});
}
if (result.length > 1) {
return res.status(200).json({ message: "Authentication Success"});
}
});
});
EC2 セキュリティグループ
グループ名：launch-wizard1
インバウンドルール
IPv4 HTTP TCP 80 0.0.0.0/0
IPv4 SSH TCP 22 0.0.0.0/0
アウトバウンドルール
IPv4 すべてのトラフィック すべて すべて 0.0.0.0/0
グループ名：ec2-rds-5
インバウンドルール
設定なし
アウトバウンドルール
MYSQL/Aurora TCP 3306 sg-0450da3ac728a7ec6 / rds-ec2-5
0
