Webサーバーを構築する方法
はじめに
この記事では、ESP32上に「index.html/style.css」をアップロードしてWebサーバーにする方法をご説明します。
コード内にhtmlやcssの内容を埋め込む方法もありますが、見にくくなって変更するのが億劫になってしまうので、実際のファイルを置く方法で実現しています。
Arduino IDE 2.X.X かつ Arduino IDE 2.X.X を使用している場合、より速く安全な LittleFS を使用した方法をお勧めします。
開発環境
OS : Windows 11 Pro
ESP32：ESP-WROOM-32
統合開発環境 : Arduino IDE 2.1.0 / Arduino IDE 1.8.19
Arduino core for the ESP32：1.0.6
使用ライブラリ：ESPAsyncWebServer(1.2.6) / ESP32FS(1.1)
作業内容
ライブラリインストール
ESPAsyncWebSrv
Arduino IDE のライブラリマネージャーからWebサーバを動作させるためのライブラリである ESPAsyncWebSrv をインストールします。
インストールをクリックすると、「ライブラリの依存関係をインストール」が表示された場合は、「全てをインストール」をクリックしてインストールしてください。
ESP32FS
次に、ファイル（index.html/style.css など）をフラッシュメモリに書き込むライブラリ ESP32FS をインストールします。
こちらは Arduino IDE のライブラリマネージャーに対応していないため、GitHubからダウンロードして、所定の場所へ配置します。
上記サイトのreleases pageからESP32FS-1.1.zipをダウンロードします。
ダウンロードしたフォルダを配置するために、Arduino の作業場所に「tools」というフォルダを作成します。
「スケッチブックの場所\tools」
先ほどダウンロードした「ESP32FS-1.1.zip」を解凍し、「ESP32FS」フォルダを「tools」フォルダの中に配置して完了です。
「スケッチブックの場所\tools\ESP32FS」
Arduino IDE を再起動し、「ツール ⇒ ESP32 Sketch Data Upload」が表示できていれば成功です。
が、しかし！！私の環境では表示されませんでした。PCを再起動してもダメ。。
Arduino IDE 1.x.x 系を使用している人は成功していると思いますが、Arduino IDE 2.x.x 系では「ESP32 sketch data upload」が表示されません。おそらく対応していないのでしょう。
そこで、私は Legacy IDE (1.8.X) として公開されている Arduino IDE 1.8.19 をダウンロードしました。Arduino IDE 2.x.x 系と共存できるので、同時にどちらも使用できます。作業場所（ライブラリ関連）も共有できます。
Arduino IDE 1.x.x 系を起動して、上記の「ESP32 Sketch Data Upload」が表示されていれば成功です。
普段は Arduino IDE 2.x.x 系を使用している人は、ファイル（index.html/style.css など）をフラッシュメモリに書き込む時だけ Arduino IDE 1.x.x 系を使用すれば、問題なく使用できます。
スケッチ作成
「ESP_WebServer」というフォルダを作り、「ESP_WebServer.ino」というファイルを作成して、下記スケッチを作成しています。
「スケッチブックの場所\ESP_WebServer」
<<ESP_WebServer.ino>>
#include <WiFi.h>
#include <ESPAsyncWebSrv.h>
#include <SPIFFS.h>
AsyncWebServer server(80);
const char* ssid = "xxxxxxxx";
const char* password = "xxxxxxxx";
void setup() {
Serial.begin(115200);
// SPIFFSのセットアップ
if (!SPIFFS.begin(true)) {
Serial.println("An Error has occurred while mounting SPIFFS");
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(SPIFFS, "/index.html");
});
// style.cssにアクセスされた時のレスポンス
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send(SPIFFS, "/style.css", "text/css");
});
// ESP32_WebServer start
server.begin();
Serial.println("ESP32_WebServer start!");
}
void loop() {
}7行目と8行目の[ssid]と[password]の内容はご自身の環境に変更してください。
const char* ssid = "xxxxxxxx";
const char* password = "xxxxxxxx";アップロードファイル作成
先ほど作成した「ESP_WebServer」というフォルダの中に、「data」というフォルダを作成し、[index.html/style.css]を作成します。
「スケッチブックの場所\ESP_WebServer\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>Hello World!!</p>
</body>
</html><<style.css>>
html {
font-family: Helvetica;
display: inline-block;
margin: 0px auto;
text-align: center;
}
p {
color: blue;
}書き込み
スケッチ書き込み
スケッチは、通常通りビルドして書込みしてください。
index.html/style.css 書き込み
Arduino IDE 2.x.x 系を使用している人は、Arduino IDE 1.x.x 系を立ち上げて同じく[ESP_WebServer.ino]を開いてください。
そして、「ESP32 Sketch Data Upload」を実行します。すると、「data」フォルダの中にあるファイルをフラッシュメモリに書き込んでくれます。
この時、以下のようなエラーとなる場合は、Arduino IDE 2.x.x 系でシリアルモニタを開いているかと思います。シリアルモニタを消して再度実行してみてください。
動作確認
シリアルモニタにこのように出力されていれば、ひとまず成功です。
そして、ウェブブラウザで出力されたIPアドレスにアクセスしてみてください。
表示できましたか？表示されなければ、再度手順を確認して漏れている箇所がないか確認してみてください。
おわりに
フラッシュメモリにファイルを書き込むことによって、普通にWEBファイルを作成することができますので、少し手の込んだWEBページも作れそうです。
下図は、以前作ったシステムのWEBページです。簡単ではありますが、動作状況・設定変更・動作履歴を表示することができ、便利になりました。
画像の表示方法や、変数の表示・変更方法などについてはこちら。
コメント