Webサーバの構築方法（LittleFS編）

Webサーバの構築方法（LittleFS編）

Webサーバの構築方法（LittleFS編）

はじめに

Arduino IDE の LittleFS アップローダライブラリを使用して LittleFS へアップロードする方法で、Webサーバを構築します。

LittleFS は SPIFFS よりも、読み書きスピードが速く安全。フォルダ構成にも対応しています。

本記事は、Arduino IDE 2.X.X と Arduino core for the ESP32：2.X.X の組合せが対象です。

Arduino IDE 1.X.X または、 Arduino core for the ESP32：1.X.X をお使いの方は、SPIFFSを使用してWEBサーバを構築するこちらをお勧めします。
※ただし、SPIFFS は今後のアップデートで削除される可能性があります。

開発環境

OS : Windows 11 Pro
ESP32：ESP-WROOM-32
統合開発環境 : Arduino IDE 2.3.2
Arduino core for the ESP32：2.0.17
使用ライブラリ：ESPAsyncWebServer(1.2.7) / arduino-littlefs-upload(1.1.8)

作業内容

ライブラリインストール

ESPAsyncWebSrv

Arduino IDE のライブラリマネージャーからWebサーバを動作させるためのライブラリである ESPAsyncWebSrv をインストールします。

インストールをクリックすると、「ライブラリの依存関係をインストール」が表示された場合は、「全てをインストール」をクリックしてインストールしてください。

arduino-littlefs-upload

次に、LittleFS アップローダライブラリをインストールします。

こちらは Arduino IDE のライブラリマネージャーに対応していないため、GitHubからダウンロードして、所定の場所へ配置します。

https://github.com/earlephilhower/arduino-littlefs-upload/releases

上記サイトの arduino-littlefs-upload-1.1.8.vsix からvsixファイルをダウンロードします。

ダウンロードしたファイルは以下の場所に配置します。

配置例（<username> は環境に応じて変更してください）

「C:\Users\<username>\.arduinoIDE\plugins\」

Arduino IDE を再起動し、「Ctrl＋Shift＋P」を押下してコマンドパネルを開きます。
「Upload LittleFS to Pico/ESP8266/ESP32」のコマンドが追加されていれば成功です。
初めは、アルファベット順で表示されるため、スクロールして探すか検索してみてください。

スケッチ作成

テストプログラムのスケッチを作成します。
「LittleFS」というフォルダを作成して、「LittleFS.ino」というスケッチファイルを作成します。

配置場所（「ファイル」→「基本設定」でスケッチブックの場所を確認）

「スケッチブックの場所\LittleFS\LittleFS.ino」

#include <WiFi.h>
#include <ESPAsyncWebSrv.h>
#include <LittleFS.h>

AsyncWebServer server(80);

const char* ssid = "xxxxxxxx";
const char* password = "xxxxxxxx";


ulong count = 0;

// 内部変数でhtmlファイル内のSTATEの文字を変える
String processor(const String& var) {
  Serial.println(var);
  if (var == "COUNTER") {
    return String(count);
  } else {
    return String();
  }
}

void setup() {

    Serial.begin(115200);

    // LittleFSのセットアップ
    if (!LittleFS.begin(true)) {
      Serial.println("An Error has occurred while mounting LittleFS");
      return;
    }

    WiFi.mode(WIFI_STA);
    WiFi.begin(ssid, password);
    if (WiFi.waitForConnectResult() != WL_CONNECTED) {
        Serial.printf("WiFi Failed!\n");
        return;
    }

    Serial.print("IP Address: ");
    Serial.println(WiFi.localIP());

    // GETリクエストに対するハンドラーを登録
    // rootにアクセスされた時のレスポンス
    server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(LittleFS, "/index.html", String(), false, processor);
    });
    // style.cssにアクセスされた時のレスポンス
    server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(LittleFS, "/style.css", "text/css");
    });
    // 画像にアクセスされた時のレスポンス
    server.on("/image", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(LittleFS, "/image.png", "image/png");
    });
    // リロードボタンにアクセスされた時のレスポンス
    server.on("/RELOAD", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->redirect("/");
    });
    // クリアボタンにアクセスされた時のレスポンス
    server.on("/BUTTON", HTTP_GET, [](AsyncWebServerRequest * request) {
      count = 0;
      request->redirect("/");
    });

    // ESP32_WebServer start
    server.begin();
    Serial.println("ESP32_WebServer start!");
}

void loop() {
  count++;
  delay(1000);
}

7行目と8行目の[ssid]と[password]の内容はご自身の環境に変更してください。

const char* ssid = "xxxxxxxx";
const char* password = "xxxxxxxx";

アップロードファイル作成

先ほど作成した「LittleFS」というフォルダの中に、「data」というフォルダを作成し、[index.html/style.css/image.png]を作成します。

配置場所（「ファイル」→「基本設定」でスケッチブックの場所を確認）

「スケッチブックの場所\LittleFS\data」

こちらからダウンロードして配置してください。
👇以降はファイルの内容です👇

<<index.html>>

<!DOCTYPE html>
<html>
  <head>
    <title>ESP32_WebServer</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>ESP32_WebServer</h1>
    <p>farmsoft</p>
    <p><img src="/image"></p>
    <p>内部変数カウンタ：%COUNTER%</p>
    <p>
      <button type="button" onclick="location.href='RELOAD'">リロード</button>
      <button type="button" onclick="location.href='BUTTON'">変数クリア</button>
    </p>
  </body>
</html>

<<style.css>>

html {
  font-family: Helvetica;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
h1 {
  font-size: 4.0rem;
  color: blue;
}
button {
  font-size: 2.0rem;
}
p {
  font-size: 2.0rem;
  margin-top: 0px;
  margin-bottom: 0px;
}

<<image.png>>

書き込み

スケッチ書き込み

スケッチは、通常通りビルドして書込みしてください。

ファイルアップロード

「Ctrl＋Shift＋P」を押下してコマンドパネルを開き、「Upload LittleFS to Pico/ESP8266/ESP32」を選択します。

この時、シリアルモニタの表示はOFFにする必要があります。シリアルモニタを表示させたままの場合、COMポートを占有したままとなり、「A fatal error occurred: Could not open COMX, the port doesn’t exist」となり、以下のようなエラーとなります。

また、以下のような「Board details not available. Compile the sketch once.」とエラー表示された場合は、Arduino IDE を再起動してみてください。

成功すると、このように表示されます。

動作確認

シリアルモニタにこのように出力されていれば、ひとまず成功です。

そして、ウェブブラウザで出力されたIPアドレスにアクセスしてみてください。

表示できましたか？表示されなければ、再度手順を確認して漏れている箇所がないか確認してみてください。

おわりに

今回は SPIFFS よりも読み書きスピードが速く安全と言われている LittleFS を使用してWEBサーバを構築しました。
SPIFFS と構成は似ているため、SPIFFS で既に作成しているシステムも以下のようにすると動作するようです。

#define USE_LittleFS

#include <FS.h>
#ifdef USE_LittleFS
  #define SPIFFS LittleFS
  #include <LittleFS.h> 
#else
  #include <SPIFFS.h>
#endif

[ESP32]Webサーバの構築方法（LittleFS編）