Step-by-Step Guide to Setting Up an Embedded Web Server on a Development Board

Follow+Star Public Account Number to not miss exciting content

Step-by-Step Guide to Setting Up an Embedded Web Server on a Development Board

Source | Embedded Miscellaneous

This article provides a step-by-step guide to setting up a web server on a development board in 10 minutes.

The article “What are the Common Embedded Web Servers? shares several web servers that can be used in embedded systems.

An embedded web server is a server that ports a web server to an embedded system. It still communicates based on the HTTP text protocol and has a standard interface format. For clients, accessing an embedded web server is just like accessing a regular web service.

In our actual work, we have also set up web servers on boards, which has brought us some convenience in debugging. We can interact with the board through a webpage, and even without a display, the board can serve as a solution for demonstrating functionality.

Web Server – Boa

Step-by-Step Guide to Setting Up an Embedded Web Server on a Development Board

This article demonstrates how to port Boa to a development board. Boa is a compact web server with an executable code size of only 70KB, consuming minimal system resources, and offering high speed and security performance.

Boa official website:

www.boa.org

Downloaded version:

boa-0.94.13.tar.gz

This article on using the web server requires a network connection. You can refer to our previous note on setting up a WiFi environment for the development board: Practical | How to Remotely Log into the Development Board?.

Cross-Compiling Boa

Download boa-0.94.13.tar.gz, extract it, and enter the boa-0.94.13/src directory. Execute the following command to generate the Makefile:

./configure

Modify the Makefile to set the cross-compiler. Find the CC and CPP variables and change them to:

CC = arm-linux-gnueabihf-gcc 
CPP = arm-linux-gnueabihf-gcc -E

Execute make to compile. If there are compilation errors like:

arm-linux-gnueabihf-gcc  -g -O2 -pipe -Wall -I.   -c -o response.o response.c
arm-linux-gnueabihf-gcc  -g -O2 -pipe -Wall -I.   -c -o select.o select.c
arm-linux-gnueabihf-gcc  -g -O2 -pipe -Wall -I.   -c -o signals.o signals.c
arm-linux-gnueabihf-gcc  -g -O2 -pipe -Wall -I.   -c -o util.o util.c
In file included from boa.h:50:0,
                 from util.c:26:
util.c: In function 'get_commonlog_time':
util.c:100:39: error: pasting "t" and "->" does not give a valid preprocessing token
         time_offset = TIMEZONE_OFFSET(t);
                                       ^
compat.h:120:30: note: in definition of macro 'TIMEZONE_OFFSET'
 #define TIMEZONE_OFFSET(foo) foo##->tm_gmtoff
                              ^~~
<built-in>: recipe for target 'util.o' failed

Modify the compat.h file from:

#define TIMEZONE_OFFSET(foo) foo##->tm_gmtoff 

to:

#define TIMEZONE_OFFSET(foo) foo->tm_gmtoff 

If the compilation passes, an executable file named boa will be generated in the current path:

Step-by-Step Guide to Setting Up an Embedded Web Server on a Development Board

Configuring Boa

Transfer the mime.types file from the /etc directory of Ubuntu to the /etc directory of the development board. Note: This is MIME (Multipurpose Internet Mail Extensions), which is a specification supported by web servers.

Create a boa folder in the /etc directory of the development board (to store the configuration and log files for boa):

cd /etc
mkdir boa

Create a www folder in the root directory of the development board, and within the www directory, create a cgi-bin directory (to store later pages and interaction code):

mkdir -p /www/cgi-bin

Transfer the boa.conf file from the boa-0.94.13 directory to the /etc/boa directory of the development board.

scp boa.conf [email protected]:/etc/boa

Transfer the boa executable program to the bin directory of the development board.

scp boa [email protected]:/bin

Create a group file in the /etc directory of the development board:

cd /etc
touch group

Use the vi editor on the development board to open the boa.conf file in the /etc/boa directory and make the following modifications:

1. Change Group nogroup to Group 0.

2. Specify the log file paths for ErrorLog and AccessLog to save logs in the /etc/boa directory, modifying as follows:

ErrorLog /etc/boa/error_log
# Please NOTE: Sending the logs to a pipe ('|'), as shown below,
#  is somewhat experimental and might fail under heavy load.
# "Usual libc implementations of printf will stall the whole
#  process if the receiving end of a pipe stops reading."
#ErrorLog "|/usr/sbin/cronolog --symlink=/var/log/boa/error_log /var/log/boa/error-%Y%m%d.log"

# AccessLog: The location of the access log file. If this does not
# start with /, it is considered relative to the server root.
# Comment out or set to /dev/null (less effective) to disable
# Access logging.

AccessLog /etc/boa/access_log

3. Change #ServerName www.your.org.here to ServerName www.your.org.here:

# ServerName: the name of this server that should be sent back to
# clients if different than that returned by gethostname + gethostbyname

ServerName www.your.org.here

4. Find DocumentRoot /var/www and change it to DocumentRoot /www:

DocumentRoot /www

5. Find ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/ and change it to ScriptAlias /cgi-bin/ /www/cgi-bin/:

ScriptAlias /cgi-bin/ /www/cgi-bin/

These are the key modifications needed in the boa.conf configuration file.

Finally, navigate to the www directory we created earlier, and use the vi index.html command to create an index.html webpage file for testing. You can search online for tutorials on simple webpage design. Here we design a simple webpage as follows:

<html>
 <head>
  <title>
  Boa Server Test
  </title>
 </head>
 <body style="background-color:#000000;padding-left:300px; padding-top:100px;">
  <p style="color:white; text-align:left; width:190px; height:45px; font-size:30px; font-family:微软雅黑; padding-left:5px;">Embedded Miscellaneous</p>
  <p style="color:red; font-size:20px; font-family:微软雅黑;">ZhengN</p>
  <p style="color:yellow; font-size:20px; font-family:微软雅黑; text-align:left;">This public account focuses on embedded technology, including but not limited to C/C++, embedded systems, IoT, and Linux.</p>
 </body>
</html>

Save and exit index.html. At this point, our web server is roughly set up, and there is a simple webpage file index.html on the server.

Next, we will conduct a simple test:

On our development board, enter the boa command to start the web server.

Enter the following command to check if the boa program has started successfully:

ps - e | grep "boa"

Step-by-Step Guide to Setting Up an Embedded Web Server on a Development Board

Once the boa process starts successfully, enter the IP address of our development board in the browser to access the index.html webpage:

Step-by-Step Guide to Setting Up an Embedded Web Server on a Development Board

As we can see, we can access the webpage on the web server set up using the development board through the browser, indicating that we have successfully set up a Boa-based web server on the development board.

This article simply demonstrates how to establish the web server environment on the development board and design a simple webpage. In the future, we will continue to explore how to interact with our development board through the webpage, such as lighting up LEDs on the development board or displaying some data from the development board on the webpage.

———— END ————

Reply in the background with『MCU』『Basic Knowledge of Embedded Software』 to read more related articles.

Welcome to follow my public account, reply “Join Group” to join the technical exchange group according to the rules, reply “1024” to see more content.Welcome to follow my video account:

Step-by-Step Guide to Setting Up an Embedded Web Server on a Development Board

Click “Read the Original” to see more shares, and feel free to share, bookmark, like, and view.

Leave a Comment