Running a Web Server with Nginx

Overview

Nginx is a lightweight web server that also works as a reverse proxy: it accepts requests on one port and forwards them to other services based on the requested hostname or path. Running it as a container on an ALPON X5 AI or ALPON X4 lets you serve several applications from one device under different hostnames or subdomains, all managed through ALPON Cloud.

The two HTTP servers below are provided as examples — swap in your own applications at that stage. The steps are identical on ALPON X4 and ALPON X5 AI.

1. 1

   Build and deploy the backend HTTP server

   Open a terminal on your computer, create a new file named Dockerfile, and add the following content:

   Dockerfile · backend server

   FROM nginx:latest
   
   RUN echo '<h1>Backend Server</h1>' > /usr/share/nginx/html/index.html

   Build the container image for the ALPON’s arm64 architecture:

   bash · build the backend image

   docker buildx build --platform=linux/arm64 -t backend-server:latest .

   Then log in to Sixfab Registry, click + Add Container, and follow the prompts to push the image.

   Pushing images to the Sixfab Container Registry

   For the full walkthrough of tagging and pushing an image, see Update Containers from the Sixfab Container Registry.

   Once the image is in the registry, open your device in ALPON Cloud, go to the Applications section, and click + Deploy. In the Deploy Container window, use these settings:

   Container Name The application name, e.g. backend-app

   Image The backend HTTP server image and tag you pushed to the Sixfab Container Registry.

   Ports Click + Add More in the Ports section and add the port mapping below.

   From	To
   31050	80

   Click + Deploy to launch the backend server on the device.

2. 2

   Build and deploy the frontend HTTP server

   Repeat the same process for the frontend. Create a new Dockerfile with the following content:

   Dockerfile · frontend server

   FROM nginx:latest
   
   RUN echo '<h1>Frontend Server</h1>' > /usr/share/nginx/html/index.html

   Build the image:

   bash · build the frontend image

   docker buildx build --platform=linux/arm64 -t frontend-server:latest .

   Log in to Sixfab Registry, click + Add Container, and push the image. Then, in the Applications section of your device on ALPON Cloud, click + Deploy and use these settings:

   Container Name The application name, e.g. frontend-app

   Image The frontend HTTP server image and tag you pushed to the Sixfab Container Registry.

   Ports Click + Add More in the Ports section and add the port mapping below.

   From	To
   31060	80

   Click + Deploy to launch the frontend server on the device.

3. 3

   Deploy Nginx as a reverse proxy

   Now configure Nginx to route traffic to your applications based on hostnames. Make a new folder (e.g. nginx-reverse), navigate into it, and add a file named default.conf with this content — api.example.com goes to the backend on port 31050 and frontend.example.com to the frontend on port 31060:

   default.conf · Nginx reverse proxy

   server {
       listen 80;
       server_name frontend.example.com;
   
       location / {
           proxy_pass http://127.0.0.1:31060;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   
   server {
       listen 80;
       server_name api.example.com;
   
       location / {
           proxy_pass http://127.0.0.1:31050;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }

   In the same folder, create a Dockerfile that copies the config into the image:

   Dockerfile · Nginx reverse proxy

   FROM nginx:latest
   COPY default.conf /etc/nginx/conf.d/default.conf

   Build the image:

   bash · build the Nginx image

   docker buildx build --platform=linux/arm64 -t nginx-server:latest .

   Log in to Sixfab Registry, click + Add Container, and push the image. Then open your device in ALPON Cloud, go to the Applications section, click + Deploy, and use these settings in the Deploy Container window:

   Container Name The application name, e.g. nginx-reverse-proxy

   Image The Nginx image and tag you pushed to the Sixfab Container Registry.

   Enable Host Network Turn this on so Nginx listens on port 80 of the device and can reach the two servers on 127.0.0.1.

   Click + Deploy to start the reverse proxy on the device.

4. 4

   Update the hosts file

   To test locally, map the example domains to the device. In ALPON Cloud, go to your device’s interface, click Open Remote Terminal, and edit the hosts file:

   remote terminal · edit the hosts file

   sudo nano /etc/hosts

   Add these lines at the bottom and save (Ctrl+O, Enter, Ctrl+X):

   /etc/hosts · example domains

   127.0.0.1 frontend.example.com
   127.0.0.1 api.example.com

5. 5

   Test the setup

   Make sure everything works. In the remote terminal, test the backend:

   remote terminal · test the backend

   curl http://api.example.com

   If you see <h1>Backend Server</h1>, it’s working. Then test the frontend:

   remote terminal · test the frontend

   curl http://frontend.example.com

   If you see <h1>Frontend Server</h1>, you’re good to go. If both applications respond, the configuration is complete.

   Reaching the proxy from other devices

   To access api.example.com or frontend.example.com from another device on your local network, edit that device’s hosts file as in step 4, pointing the names at the ALPON’s IP address instead of 127.0.0.1.