esp8266기반 arduino의 웹 서버 - 프록시 서버 - react 프론트엔드(https) 간의 문제

Question

목적 :arduino에서 esp8266을 기반으로 하는 웹서버를 개설 후 테스트 용 변수 val 전달프록시 서버 server.js에서 아두이노의 웹서버와 통신(만일 프록시 서버를 쓰지 않고 바로 프론트앤드에 전달 시 react는 http를 https로 강제 리다이렉트 시켜버림)react (https)는 프록시 서버와 통신하여 val을 받아옴문제 :프론트앤드 : Failed to load resource: the server responded with a status of 504 (Gateway Timeout)프록시 서버 : [HPM] Error occurred while proxying request localhost:3001/arduino-data to http://아두이노IP/arduino-data [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)코드:Arduino#include #include const char* ssid = ""; // 사용 중인 와이파이 이름 const char* password = ""; // 와이파이 패스워드 ESP8266WebServer server(443); int val = 0; void setup() { Serial.begin(115200); // 무선 네트워크 연결 WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); server.on("/arduino-data", HTTP_OPTIONS, handleOptions); // CORS 옵션 요청 처리 server.on("/arduino-data", HTTP_GET, handleEndpoint); // 엔드포인트 설정 server.enableCORS(true); // 서버 시작 server.begin(); Serial.println("HTTP server started"); Serial.print("Local IP address: "); Serial.println(WiFi.localIP()); } void loop() { server.handleClient(); val = analogRead(A0)/4; //Serial.println(val); delay(100); //server.on("/arduino-data", HTTP_GET, handleEndpoint); } void handleOptions() { // CORS 설정 server.sendHeader("Access-Control-Allow-Origin", "*"); server.sendHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); server.sendHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); server.send(200); } void handleEndpoint() { server.send(200, "text/plain", String(val)); }server.js (프록시 서버)const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); const targetUrl = 'http://xxx.xxx.x.xx/arduino-data'; // ESP8266 IP 주소와 포트 const apiProxy = createProxyMiddleware('/arduino-data', { target: targetUrl, changeOrigin: true, }); app.use((req, res, next) => { // CORS 설정 res.header('Access-Control-Allow-Origin', 'https://localhost:3000'); // React 애플리케이션의 주소 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); app.use(apiProxy); const port = 3001; // 프록시 서버 포트 app.listen(port, () => { console.log(`Proxy server listening on port ${port}`); }); ArduinoCommunication.js (프론트앤드 App.js 안 컴포넌트)import React, { useState, useEffect } from 'react'; import axios from 'axios'; const App = () => { const [val, setVal] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await axios.get('http://localhost:3001/arduino-data'); setVal(response.data); } catch (error) { console.error('Error fetching data:', error); } }; fetchData(); }, []); return (

Value from ESP8266:

{val !== null ? `Value: ${val}` : 'Loading value...'}

); }; export default App; package.json{ "name": "arduino_control", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.5.0", "http-proxy-middleware": "^2.0.6", "https": "^1.0.0", "react": "^18.2.0", "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4", "websocket": "^1.0.34" }, "scripts": { "start": "set HTTPS=true&&set SSL_CRT_FILE=localhost+4.pem&&set SSL_KEY_FILE=localhost+4-key.pem&&react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "proxy": "http://localhost:3000" } 프록시 서버는 완전 처음 해서 chatgpt에게 물어보면서 했는데 음...믿을게 안됩니다ㅠㅠ

RTUnu12 · Answer

일부 해결 완료, 아두이노에서 포트를 80으로 하면 되긴하는데 react에서 초기값만 받고 갱신이 안됨

RTUnu12 · Answer

해결 완료useEffect(() => { const fetchData = async () => { try { const response = await axios.get('http://localhost:3001/arduino-data'); setVal(response.data); } catch (error) { console.error('Error fetching data:', error); } }; fetchData(); // 초기 호출 const interval = setInterval(() => { fetchData(); // 일정 간격으로 데이터 업데이트 }, 100); // 5초마다 업데이트 (변경 가능) // 컴포넌트 언마운트 시 clearInterval 호출하여 메모리 누수 방지 return () => clearInterval(interval); }, []); // 빈 배열로 설정하여 컴포넌트가 마운트될 때 한 번만 실행재 갱신하는 코드가 없었네요

esp8266기반 arduino의 웹 서버 - 프록시 서버 - react 프론트엔드(https) 간의 문제

2개의 답변

#esp8266 목록