ESP32 IDF 웹 서버(Web Server)

안녕하세요, '소프트웨어 공장'의 여러분! 지난 시간에는 ESP32로 Wi-Fi AP, STA 설정하는 방법에 대해 알아보았습니다. 오늘은 ESP32로 간단한 웹 서버를 구축하는 방법에 대해 설명드리려고 합니다. ESP32는 Wi-Fi와 Bluetooth 기능을 내장하고 있어 웹 서버와 같은 네트워크 기능을 구현하기에 아주 적합합니다.

이번 포스팅에서는 ESP32를 사용하여 HTTP 웹 서버를 만드는 전체 소스를 함께 구현해 보겠습니다. 여러분은 이미 ESP32 IDF와 VS Code 개발 환경을 설정하셨으리라 믿고, 바로 본론으로 들어가겠습니다.

1. 웹 서버 개요

ESP32로 웹 서버를 구축하는 것은 매우 유용합니다. 여러 센서 데이터를 실시간으로 확인하거나, 원격으로 제어하고자 할 때 웹 인터페이스는 직관적이고 사용하기 편리합니다. ESP32를 통해 간단한 웹 서버를 만들고, 이를 이용하여 LED를 제어하는 예제를 진행해 보겠습니다.

2. 프로젝트 설정

먼저, 프로젝트 구조를 설정하고 필요한 헤더 파일과 라이브러리를 포함해야 합니다. ESP-IDF를 사용하여 C 언어로 작성하겠습니다.

프로젝트 디렉토리 구조

simple_web_server/
  |-- main/
       |-- main.c
  |-- CMakeLists.txt
  |-- sdkconfig

프로젝트 디렉토리를 위와 같이 구성하고, main.c 파일에 소스를 작성하겠습니다.

3. 필요한 라이브러리 포함

웹 서버를 구현하기 위해 필요한 헤더 파일을 포함합니다.

#include <stdio.h>
#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_log.h"
#include "nvs_flash.h"
#include "esp_wifi.h"
#include "esp_event.h"
#include "esp_http_server.h"

이러한 라이브러리들은 ESP32의 Wi-Fi 기능과 HTTP 서버 기능을 지원하는 라이브러리들입니다.

4. Wi-Fi 초기화

먼저, 웹 서버를 운영하기 위해서는 ESP32를 Wi-Fi 네트워크에 연결해야 합니다. 이를 위해 Wi-Fi를 초기화하고 설정하는 코드를 작성하겠습니다.

#define WIFI_SSID      "your_wifi_ssid"
#define WIFI_PASS      "your_wifi_password"

static void wifi_init(void) {
    esp_err_t ret = nvs_flash_init();
    if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {
        ESP_ERROR_CHECK(nvs_flash_erase());
        ret = nvs_flash_init();
    }
    ESP_ERROR_CHECK(ret);

    ESP_ERROR_CHECK(esp_netif_init());
    ESP_ERROR_CHECK(esp_event_loop_create_default());
    esp_netif_create_default_wifi_sta();

    wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
    ESP_ERROR_CHECK(esp_wifi_init(&cfg));

    wifi_config_t wifi_config = {
        .sta = {
            .ssid = WIFI_SSID,
            .password = WIFI_PASS,
        },
    };
    ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_STA));
    ESP_ERROR_CHECK(esp_wifi_set_config(ESP_IF_WIFI_STA, &wifi_config));
    ESP_ERROR_CHECK(esp_wifi_start());
}

위 코드는 Wi-Fi를 초기화하고 설정하는 코드입니다. WIFI_SSID와 WIFI_PASS를 자신의 네트워크에 맞게 수정해 주세요.

5. HTTP 서버 설정

다음으로는 웹 서버를 설정합니다. 웹 서버는 클라이언트가 요청을 보내면 그에 대한 응답을 반환합니다.

static esp_err_t hello_get_handler(httpd_req_t *req) {
    const char* response = "<h1>ESP32 Web Server</h1><p>Hello, World!</p>";
    httpd_resp_send(req, response, HTTPD_RESP_USE_STRLEN);
    return ESP_OK;
}

static httpd_uri_t hello = {
    .uri       = "/",
    .method    = HTTP_GET,
    .handler   = hello_get_handler,
    .user_ctx  = NULL
};

static httpd_handle_t start_webserver(void) {
    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
    httpd_handle_t server = NULL;
    if (httpd_start(&server, &config) == ESP_OK) {
        httpd_register_uri_handler(server, &hello);
    }
    return server;
}

위의 코드는 간단한 GET 요청을 처리하는 HTTP 서버를 설정합니다. 클라이언트가 웹 페이지를 요청할 때, "Hello, World!"라는 메시지를 포함한 HTML 페이지를 반환합니다.

6. 메인 함수 구현

모든 설정을 마쳤다면, 메인 함수에서 Wi-Fi와 웹 서버를 초기화하여 실행합니다.

void app_main(void) {
    // Wi-Fi 초기화
    wifi_init();

    // 웹 서버 시작
    start_webserver();
}

메인 함수에서는 wifi_init()을 호출하여 Wi-Fi를 연결하고, 이후 start_webserver()를 호출하여 웹 서버를 시작합니다.

7. 전체 소스 코드

위에서 설명한 모든 부분을 포함한 전체 소스 코드는 다음과 같습니다.

#include <stdio.h>
#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_log.h"
#include "nvs_flash.h"
#include "esp_wifi.h"
#include "esp_event.h"
#include "esp_http_server.h"

#define WIFI_SSID      "your_wifi_ssid"
#define WIFI_PASS      "your_wifi_password"

static void wifi_init(void) {
    esp_err_t ret = nvs_flash_init();
    if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {
        ESP_ERROR_CHECK(nvs_flash_erase());
        ret = nvs_flash_init();
    }
    ESP_ERROR_CHECK(ret);

    ESP_ERROR_CHECK(esp_netif_init());
    ESP_ERROR_CHECK(esp_event_loop_create_default());
    esp_netif_create_default_wifi_sta();

    wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
    ESP_ERROR_CHECK(esp_wifi_init(&cfg));

    wifi_config_t wifi_config = {
        .sta = {
            .ssid = WIFI_SSID,
            .password = WIFI_PASS,
        },
    };
    ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_STA));
    ESP_ERROR_CHECK(esp_wifi_set_config(ESP_IF_WIFI_STA, &wifi_config));
    ESP_ERROR_CHECK(esp_wifi_start());
}

static esp_err_t hello_get_handler(httpd_req_t *req) {
    const char* response = "<h1>ESP32 Web Server</h1><p>Hello, World!</p>";
    httpd_resp_send(req, response, HTTPD_RESP_USE_STRLEN);
    return ESP_OK;
}

static httpd_uri_t hello = {
    .uri       = "/",
    .method    = HTTP_GET,
    .handler   = hello_get_handler,
    .user_ctx  = NULL
};

static httpd_handle_t start_webserver(void) {
    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
    httpd_handle_t server = NULL;
    if (httpd_start(&server, &config) == ESP_OK) {
        httpd_register_uri_handler(server, &hello);
    }
    return server;
}

void app_main(void) {
    // Wi-Fi 초기화
    wifi_init();

    // 웹 서버 시작
    start_webserver();
}

8. 마무리

오늘은 ESP32를 사용하여 간단한 웹 서버를 구축하는 방법에 대해 알아보았습니다. 웹 서버는 IoT 프로젝트에서 데이터를 시각화하거나 장치를 원격으로 제어하는 데 매우 유용하게 사용될 수 있습니다. 이번 예제를 바탕으로 다양한 기능을 추가해 보시길 바랍니다. 예를 들어, LED를 제어하는 버튼을 추가하거나, 센서 데이터를 실시간으로 웹 페이지에 표시할 수도 있습니다.

다음 시간에는 더욱 흥미로운 주제를 가지고 돌아오겠습니다. 궁금한 점이나 추가적으로 다루고 싶은 주제가 있다면 댓글로 남겨주세요! 감사합니다.