아두이노 나노 ESP32 마이크로SD 카드의 웹 서버

이 튜토리얼에서는 MicroSD 카드에 호스팅된 Arduino Nano ESP32 웹 서버를 만드는 과정을 탐구해보겠습니다. 필요한 모든 HTML, CSS, JavaScript 및 이미지 파일이 MicroSD 카드에 저장될 것입니다.

준비물

1	×	아두이노 나노 ESP32	아마존
1	×	USB 케이블 타입-C	쿠팡 \| 아마존
1	×	마이크로 SD 카드	아마존
1	×	마이크로 SD 카드 모듈	쿠팡 \| 아마존
1	×	점퍼케이블	쿠팡 \| 아마존
1	×	브레드보드	쿠팡 \| 아마존
1	×	(옵션) MicroSD to SD 메모리 카드 어댑터	아마존
1	×	(추천) 아두이노 나노용 스크루 터미널 확장 보드	쿠팡 \| 아마존
1	×	(추천) 아두이노 나노용 브레이크아웃 확장 보드	쿠팡 \| 아마존
1	×	(추천) 아두이노 나노 ESP32용 전원 분배기	쿠팡 \| 아마존

공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.

아두이노 나노 ESP32와 웹 서버에 관하여

아두이노 나노 ESP32 및 웹 서버, 마이크로SD 카드에 관한 구체적인 자습서가 있습니다. 각 자습서에는 하드웨어 핀아웃, 작동 원리, 아두이노 나노 ESP32와의 배선 연결, 아두이노 나노 ESP32 코드 등에 대한 자세한 정보와 단계별 지침이 포함되어 있습니다. 다음 링크에서 자세한 내용을 알아보세요:

선연결

이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.

HTML 내용을 MicroSD 카드에 복사하세요.

아래와 같이 마이크로 SD 카드가 FAT32 포맷으로 포맷되어 있는지 확인해 주십시오 (Windows OS에서, 마우스 오른쪽 버튼을 클릭 → 포맷):

HTML 파일 index.html을 생성하고 다음 코드를 추가하세요:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Arduino Nano ESP32 Web Page</title> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Web Page hosted on MicroSD Card</h1> <img src="luffy.jpg" alt="A beautiful image"> <p>Sponsored by <a href="https://amazon.com/diyables">DIYables</a></p> </div> </body> </html>

CSS 파일 styles.css를 만들고 다음 코드를 추가하세요:

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: white; } h1 { font-size: 28px; } .container { max-width: 800px; margin: 20px auto; text-align: center; } img { max-width: 80%; height: auto; display: block; margin: 20px auto; }

이미지를 준비하세요. 이 튜토리얼에서는 HTML 코드에서 사용되는 luffy.jpg를 사용합니다. 이 이미지를 여기에서 다운로드할 수 있습니다:

(선택 사항) 파비콘 이미지를 준비하세요. 이 튜토리얼에서는 favicon.ico를 사용합니다.
모든 파일을 아래 이미지와 같이 MicroSD 카드의 루트 디렉토리에 넣으세요:

아두이노 나노 ESP32 html contents on microSD 카드

참고로 JavaScript, txt, csv 등의 다른 파일도 추가할 수 있습니다.

아두이노 나노 ESP32 코드 - MicroSD 카드에서 웹 서버

/* * 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다 * 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server-on-sd-card */ #include <WiFi.h> #include <ESPAsyncWebServer.h> #include <FS.h> #include <SD.h> #define PIN_SPI_CS D4 // The Arduino Nano ESP32 pin connected to the CS pin of SD card module // Replace with your network credentials const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT // Create AsyncWebServer object on port 80 AsyncWebServer server(80); void setup() { Serial.begin(9600); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP32's IP address Serial.print("ESP32 Web Server's IP address: "); Serial.println(WiFi.localIP()); // init MicroSD Card if (!SD.begin(PIN_SPI_CS)) { while (1) { Serial.println(F("SD CARD FAILED, OR NOT PRESENT!")); delay(1000); } } server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(SD, "/index.html", "text/html"); }); server.serveStatic("/", SD, "/"); server.begin(); } void loop() { // Your code here }

사용 방법

ESP32를 처음 사용하는 경우, 아두이노 나노 ESP32 - 소프트웨어 설치을 참고하세요.

Arduino Nano ESP32 보드를 PC에 마이크로 USB 케이블을 통해 연결하세요.
PC에서 Arduino IDE를 엽니다.
올바른 Arduino Nano ESP32 보드(예: Arduino Nano ESP32와 COM 포트를 선택하세요.
Arduino IDE의 왼쪽 탐색 바에 있는 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
"ESPAsyncWebServer"를 검색한 다음, lacamera가 만든 ESPAsyncWebServer를 찾습니다.
Install 버튼을 클릭하여 ESPAsyncWebServer 라이브러리를 설치하세요.

의존성을 설치하라는 요청을 받게 됩니다. Install All 버튼을 클릭하세요.

아두이노 나노 ESP32 espasyncwebserver dependencies 라이브러리

위의 코드를 복사하여 아두이노 IDE로 열기
코드 내의 와이파이 정보(SSID 및 비밀번호)를 변경하여 자신의 것으로 만들기
아두이노 IDE에서 Upload 버튼을 클릭하여 ESP32에 코드 업로드하기
시리얼 모니터 열기
시리얼 모니터에서 결과 확인하기

COM6

Send

Connecting to WiFi... Connected to WiFi Arduino Nano ESP32 Web Server's IP address: 192.168.0.3

Autoscroll Show timestamp

Clear output

9600 baud

Newline

시리얼 모니터에 접속하면, 예를 들어 192.168.0.3과 같은 IP 주소를 만나게 될 것입니다.
스마트폰이나 PC의 웹 브라우저 주소 창에 제공된 IP 주소를 입력하세요.
시리얼 모니터에 표시된 IP 주소로 '192.168.0.3'을 교체하는 것을 잊지 마세요.
IP 주소를 입력하면, 페이지가 로드되어 SD 카드에서 HTML, CSS, 이미지를 불러옵니다.

검사 시, SD 카드에 저장된 HTML, CSS, 및 이미지가 웹 브라우저에 성공적으로 로드되는 것을 확인할 수 있습니다.

HTML, CSS 코드를 마음대로 수정하고, 추가 이미지 및 자바스크립트를 포함하여 자신만의 독특한 웹 페이지를 만들어보세요.

아두이노 나노 ESP32 마이크로SD 카드의 웹 서버

준비물

아두이노 나노 ESP32와 웹 서버에 관하여

선연결

HTML 내용을 MicroSD 카드에 복사하세요.

아두이노 나노 ESP32 코드 - MicroSD 카드에서 웹 서버

사용 방법

관련 튜토리얼