아두이노 나노 ESP32 - 마이크로SD 카드의 웹 서버 | Arduino Nano ESP32 - Web Server on SD Card

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

Arduino Nano ESP32 web server on MicroSD Card

준비물

1	×	Arduino Nano ESP32	Amazon
1	×	USB Cable Type-C	쿠팡 \| Amazon
1	×	Micro SD Card	Amazon
1	×	Micro SD Card Module	쿠팡 \| Amazon
1	×	Jumper Wires	Amazon
1	×	Breadboard	쿠팡 \| Amazon
1	×	USB 3.0 SD Card Reader	Amazon
1	×	(Recommended) Screw Terminal Expansion Board for Arduino Nano	쿠팡 \| Amazon

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

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

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

선연결

Arduino Nano ESP32 Micro SD Card Module Wiring Diagram

이 이미지는 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 카드의 루트 디렉토리에 넣으세요:

Arduino Nano ESP32 HTML contents on microSD Card

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

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

/* * 이 Arduino Nano ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 Arduino Nano 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 }