ESP32 웹 업데이터: 브라우저를 통해 코드 업데이트(OTA)

ESP32 웹 업데이터: 브라우저를 통해 코드 업데이트(OTA)

 

USB 케이블 없이 ESP32 에 새 펌웨어를 업로드하는 방법을 찾고 계신가요 ? 그렇다면 이 가이드가 바로 당신에게 필요한 정보입니다!

 

이 가이드에서는 웹 브라우저를 통해 편리한 웹 인터페이스로 ESP32 에 바이너리 파일을 업로드할 수 있는 ESP32 웹 업데이터를 구현하는 방법을 보여드리겠습니다 !

 

 

ESP32 웹 업데이터란 무엇인가요?

 

ESP32 웹 업데이터를 사용하면 USB 케이블 없이도 ESP32 에 새 코드를 업로드할 수 있습니다 . ESP32 는 웹 서버를 호스팅하며, 브라우저를 통해 접속하여 새 펌웨어를 간편하게 업로드할 수 있습니다. 이 모든 작업은 OTA(Over The Air) 방식 으로 이루어집니다 .

 

OTA 업데이트를 사용하는 이유는 무엇일까요? 

OTA 업데이트가 유용한 이유는 여러 가지가 있습니다. 그중 몇 가지를 소개합니다.

 

• 빠르고 편리한 펌웨어 배포
• 원격 장치 또는 접근하기 어려운 장치에 이상적입니다.
• 대규모 IoT 시스템의 자동 업데이트
• USB 케이블을 연결할 필요가 없습니다.

 

요구 사항

 

시작하기 전에 Arduino IDE가 설치되어 있고 ESP32용으로 구성되어 있는지, 작동하는 Wi-Fi 네트워크가 있는지, 그리고 USB 케이블을 통해 ESP32 에 스케치를 업로드하는 방법에 대한 기본적인 이해가 있는지 확인하십시오 .

 

1단계: 필수 라이브러리 설치

 

다행히 아두 이노 ESP32 코어에는 필요한 모든 기능이 이미 포함되어 있으므로 추가 라이브러리를 설치할 필요가 없습니다.

 

다음에서는 내장된 ESPmDNS 및 HTTPUpdateServer 라이브러리를 사용하여 사용자 지정 호스트 이름으로 업데이트 서버를 제공하는 방법을 설명합니다.

 

2단계: ESP32 웹 업데이터 스케치를 업로드합니다.

 

다음 스케치는 새 펌웨어를 업로드할 수 있는 인터페이스와 파일 시스템을 갖춘 웹 서버를 호스팅합니다. mDNS를 사용하면 사용자 지정 호스트 이름(이 예에서는 http://esp32.local/update ) 으로 브라우저에서 업데이트 페이지에 액세스할 수 있습니다 .

 

이론적으로는 새 스케치를 업로드할 때 USB 케이블을 사용해야 하는 마지막 순간이 될 것입니다.

 

스케치를 업로드하기 전에 올바른 Wi-Fi 자격 증명을 설정했는지 확인하세요!

 

#include <ESPmDNS.h>
#include <HTTPUpdateServer.h>

// Wi-Fi setup
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";
const char *hostname = "esp32";

// upload user setup
const char* username = "admin";
const char* user_password = "123456";

WebServer httpServer(80);
HTTPUpdateServer httpUpdater;

void setup(void) {

  Serial.begin(115200);
  Serial.println();
  Serial.println("Booting Sketch...");
  WiFi.mode(WIFI_AP_STA);
  WiFi.begin(ssid, password);

  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    WiFi.begin(ssid, password);
    Serial.println("WiFi failed, retrying.");
  }

  if (MDNS.begin(hostname)) {
    Serial.println("mDNS responder started");
  }

  httpUpdater.setup(&httpServer, username, user_password);
  httpServer.begin();

  MDNS.addService("http", "tcp", 80);
  Serial.printf("HTTPUpdateServer ready! Open http://%s.local/update in your browser\n", hostname);
}

void loop(void) {
  httpServer.handleClient();
}

 

이미 눈치채셨겠지만, HTTPUpdateServer 라이브러리를 사용하면 새 펌웨어를 업로드하는 데 사용할 로그인 자격 증명을 설정할 수 있습니다 . 로그인 절차가 필요하지 않은 경우 다음 줄을 바꾸십시오.

 

httpUpdater.setup(&httpServer, username, user_password);

 

httpUpdater.setup(&httpServer);

 

스케치를 보드에 업로드한 후, http://esp32.local/update ( 또는 호스트 이름을 실제 호스트 이름으로 변경) 주소 로 업데이트 페이지에 접속하세요. 그러면 위 스케치에 명시된 사용자 이름 과 비밀번호를 입력하라는 메시지가 나타납니다 .

 

 

로그인 자격 증명을 설정하세요

 

자격 증명이 올바르면 이제 바이너리 파일을 선택하고 보드에 업로드할 수 있습니다.

 

 

 

3단계: .bin 파일 생성

 

이제 업데이트된 펌웨어를 컴파일하고 업로드할 수 있는 바이너리 파일을 생성할 차례입니다.

 

단, 웹 업데이트 부분은 반드시 포함시켜야 합니다!

 

테스트를 위해 다음 스케치를 복사하여 사용하세요. 이 스케치는 GPIO 2에 연결된 내장 LED를 깜빡이게 합니다.

 

#include <ESPmDNS.h>
#include <HTTPUpdateServer.h>

// Wi-Fi setup
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";
const char *hostname = "esp32";

// upload user setup
const char* username = "admin";
const char* user_password = "123456";

WebServer httpServer(80);
HTTPUpdateServer httpUpdater;

unsigned long prevMillis = 0;  // a helper variable for the timing
const long interval = 500;  // interval at which to blink the led in milliseconds
int ledState = LOW;  // state of the LED
const int ledPin = 2;

void setup(void) {
  pinMode(ledPin, OUTPUT);

  Serial.begin(115200);
  Serial.println();
  Serial.println("Booting Sketch...");
  WiFi.mode(WIFI_AP_STA);
  WiFi.begin(ssid, password);

  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    WiFi.begin(ssid, password);
    Serial.println("WiFi failed, retrying.");
  }

  if (MDNS.begin(hostname)) {
    Serial.println("mDNS responder started");
  }

  httpUpdater.setup(&httpServer, username, user_password);
  httpServer.begin();

  MDNS.addService("http", "tcp", 80);
  Serial.printf("HTTPUpdateServer ready! Open http://%s.local/update in your browser\n", hostname);
}

void loop(void) {
  httpServer.handleClient();
  
  unsigned long currentMillis = millis();
  if (currentMillis - prevMillis >= interval) {
    // save the last time the LED was blinked
    prevMillis = currentMillis;
    // if the LED is off turn it on and vice-versa
    ledState = !ledState;
    // update LED state
    digitalWrite(ledPin,  ledState);
  }
}

 

새 스케치를 컴파일하고 .bin 파일을 생성하려면 Arduino IDE에서 스케치 > 컴파일된 바이너리 내보내기를 클릭합니다 . 그런 다음 스케치 > 스케치 폴더 표시를 클릭하여 출력 파일 위치로 이동합니다.

 

 

스케치 폴더 표시

 

빌드 폴더(및 하위 폴더) 안에서 " YOUR_PROJECT.ino.bin " 과 같은 이름의 파일을 찾으세요. 바로 그 파일을 웹 인터페이스를 통해 업로드해야 합니다.

 

4단계: 새 펌웨어 업로드

 

마지막으로, .bin 파일을 ESP32 에 업로드해야 합니다 .

 

업로드 URL( http://esp32.local/upload ) 로 이동 하여 로그인 자격 증명을 입력하고 3단계에서 생성한 .bin 파일을 선택한 다음 업로드를 클릭하세요 !

 

몇 초간의 로딩 시간 후 ESP가 다시 시작되고 브라우저에 다음 메시지가 표시됩니다.

 

 

새 펌웨어 업로드

 

보안 고려 사항

 

프로젝트를 낯선 사람들이 접근할 수 있는 공공 환경에서 사용할 계획이라면, 누구도 ESP32 에 악성 펌웨어를 업로드할 수 없도록 적절하게 보안을 강화해야 합니다 .

 

무단 접근을 방지하기 위해 항상 안전한 자격 증명으로 로그인하십시오. 또한 HTTPS를 사용하거나 내부 네트워크만 사용하는 것을 고려하십시오.

 

마무리

 

ESP32 웹 업데이터 는 빠르고 사용자 친화적인 방식으로 무선 펌웨어를 업데이트할 수 있는 기능을 제공합니다. 특히 기기에 쉽게 접근할 수 없는 IoT 및 임베디드 애플리케이션에 유용합니다. 이 설정을 통해 ESP32 기기 전체의 업데이트를 편리하게 관리할 수 있습니다.

 

이 튜토리얼의 참고 문서는 다음 링크를 따라가세요. 즐거운 개발 생활 되시기를 바랍니다.