ESP32 - 마이크로SD 카드의 웹 서버 | ESP32 - Web Server on SD Card

이 튜토리얼에서는 ESP32 웹 서버를 MicroSD 카드에 호스팅하는 방법을 알아보겠습니다. HTML, CSS, JavaScript, 이미지 파일들이 MicroSD 카드에 저장될 것입니다.

ESP32 web server on MicroSD Card

준비물

1×ESP-WROOM-32 Dev Module 쿠팡 | 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 ESP32 쿠팡 | Amazon
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.

ESP32 및 웹 서버에 관하여

ESP32와 웹 서버, MicroSD 카드(핀 배치, 작동 방식 및 프로그래밍 포함)에 익숙하지 않다면, 다음 튜토리얼을 통해 배울 수 있습니다:

선연결

ESP32 Micro SD Card Module Wiring Diagram

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

ESP32 및 다른 구성 요소에 전원을 공급하는 방법에 대해 잘 알지 못하는 경우, 다음 튜토리얼에서 안내를 찾을 수 있습니다: ESP32 전원 공급 방법.

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

아래와 같이 귀하의 Micro SD 카드가 FAT32 형식으로 포맷되었는지 확인해 주십시오 (Windows OS에서, 마우스 오른쪽 버튼 → 포맷):

Micro SD Card format FAT32

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>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>

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를 사용합니다. 이 이미지는 여기에서 다운로드할 수 있습니다:

luffy
  • (선택 사항) 파비콘 이미지 준비하기. 이 튜토리얼에서는 이 favicon.ico를 사용합니다.
  • 아래 이미지처럼 모든 파일을 MicroSD 카드의 루트 디렉토리에 넣으세요:
ESP32 HTML contents on microSD Card

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

ESP32 코드 - MicroSD 카드에서 웹 서버

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-web-server-on-sd-card */ #include <WiFi.h> #include <ESPAsyncWebServer.h> #include <FS.h> #include <SD.h> #define PIN_SPI_CS 5 // The ESP32 pin GPIO5 // 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를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정하는 방법을 참조하세요.

  • ESP32 보드를 마이크로 USB 케이블을 사용하여 PC에 연결하세요.
  • PC에서 Arduino IDE를 엽니다.
  • 올바른 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택하세요.
  • Arduino IDE의 왼쪽 탐색 바에서 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
  • “ESPAsyncWebServer”을 검색한 다음, lacamera가 만든 ESPAsyncWebServer를 찾으세요.
  • ESPAsyncWebServer 라이브러리를 설치하려면 Install 버튼을 클릭하세요.
ESP32 ESPAsyncWebServer library

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

ESP32 ESPAsyncWebServer dependencies library
  • 위의 코드를 복사하고 아두이노 IDE로 열기
  • 코드 내의 와이파이 정보(SSID와 비밀번호)를 본인 것으로 변경하기
  • 아두이노 IDE에서 Upload 버튼을 클릭해 ESP32에 코드 업로드하기
  • 시리얼 모니터 열기
  • 시리얼 모니터에서 결과 확인하기
COM6
Send
Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address: 192.168.0.3
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • 시리얼 모니터에서 IP 주소를 볼 수 있습니다. 예를 들어: 192.168.0.3
  • 스마트폰 또는 PC의 웹 브라우저 주소 창에 IP 주소를 입력하세요.
  • 시리얼 모니터에서 얻은 IP 주소로 192.168.0.3을 변경해야 한다는 점을 기억하세요.
  • SD 카드에서 HTML, CSS, 이미지를 로드하는 페이지를 볼 수 있습니다.
ESP32 Web page on SD Card
  • 보시다시피, SD 카드에 저장된 HTML, CSS, 이미지가 웹 브라우저에 의해 로드되었습니다.

이제 HTML, CSS 코드를 수정하고, 이미지를 더 추가하고, 자바스크립트를 사용하여 자신만의 웹 페이지를 만들 수 있습니다.

※ OUR MESSAGES

  • Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!