Running a Web Server with Nginx

This guide walks you through setting up an Nginx web server as a reverse proxy on your device using ALPON X4 to manage two example applications.

Want to host a web server and manage multiple applications with ease? This guide shows you how to set up an Nginx web server on your device using Docker containers on the ALPON X4 device. We’ll configure Nginx as a reverse proxy to route traffic to two example applications—one for a frontend and one for a backend—using hostnames or subdomains. Let’s walk through it step by step.


Step 1: Backend HTTP Server

We will create two simple HTTP servers to run on ALPON X4. These applications are provided as examples; at this stage, you should use your own applications.

  1. Open a terminal on your computer.

  2. Create a new file named Dockerfile and add the following content:

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

  3. Build the container image:

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

This command compiles the container, making it ready for deployment on the ALPON X4.


Push to Sixfab Registry

  • Log in to the Sixfab Connect platform, navigate to the Sixfab Registry page
  • Click on + Add Container and follow the prompts to push container to Sixfab registry.

    📘

    Manage and Deploy Applications

    Visit the Manage & Deploy Applications page for all the necessary details on pushing your container image to the Sixfab Registry.


Deployment

Once the container image is uploaded to the Sixfab Connect registry, deploy it as follows:

  1. Go to the Application section of your asset on Sixfab Connect.

  2. Click the + Deploy button to configure and deploy the container.

  3. In the Deploy Container window, use the following settings:

    • Container Name: Enter the application name (e.g., "backend-app").

    • Image: Select the Backend HTTP Server container image and tag pushed to the Sixfab Registry.

    • Ports: Click "+ Add More" in the Ports section and add the following ports:

      FromTo
      3105080


Step 2: Frontend HTTP Server

  1. Open a terminal on your computer.

  2. Create a new file named Dockerfile and add the following content:

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

  3. Build the container image:

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

This command compiles the container, making it ready for deployment on the ALPON X4.

Push to Sixfab Registry

  • Log in to the Sixfab Connect platform, navigate to the Sixfab Registry page
  • Click on + Add Container and follow the prompts to push container to Sixfab registry.


Deployment

Once the container image is uploaded to the Sixfab Connect registry, deploy it as follows:

  1. Go to the Application section of your asset on Sixfab Connect.

  2. Click the + Deploy button to configure and deploy the container.

  3. In the Deploy Container window, use the following settings:

    • Container Name: Enter the application name (e.g., "frontend-app").

    • Image: Select the Frontend HTTP Server container image and tag pushed to the Sixfab Registry.

    • Ports: Click "+ Add More" in the Ports section and add the following ports:

      FromTo
      3106080


Step 3: Set Up Nginx as a Reverse Proxy

Now, let’s configure Nginx to route traffic to your applications based on hostnames.

  1. Create a Directory: Make a new folder (e.g., nginx-reverse) and navigate into it.

  2. Create a Config File: Add a file named default.conf with this content:

    server {
        listen 80;
        server_name frontend.example.com;
    
        location / {
            proxy_pass http://127.0.0.1:31050;
            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:31060;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
    

  1. Add a Dockerfile: In the same folder, create a Dockerfile with:

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

  1. Build the Image:

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

  1. Push to Sixfab Registry:
  • Log in to the Sixfab Connect platform, navigate to the Sixfab Registry page
  • Click on + Add Container and follow the prompts to push container to Sixfab Registry.


  1. Deployment:

Once the container image is uploaded to the Sixfab Connect registry, deploy it as follows:

  • Go to the Application section of your asset on Sixfab Connect.
  • Click the + Deploy button to configure and deploy the container.
  • In the Deploy Container window, use the following settings:

    • Container Name: Enter the application name (e.g., "nginx-reverse-proxy").
    • Image: Select the Nginx container image and tag pushed to the Sixfab Registry.
    • Enable “Host Network”.
    • Click the "+ Deploy" button to start running the container on ALPON X4.


Step 4: Update the Hosts File

To test locally, map the example domains to your device’s IP.

  1. In Sixfab Connect, go to your device’s interface.
  2. Click Open Remote Terminal.
  3. Edit the hosts file by running:
sudo nano /etc/hosts
  1. Add these lines at the bottom and save (Ctrl+O, Enter, Ctrl+X):
127.0.0.1 frontend.example.com
127.0.0.1 api.example.com


Step 5: Test Your Setup

Let’s make sure everything works:

Test the Backend: In the remote terminal, run:

curl http://api.example.com

If you see <h1>Backend Server</h1>, it’s working!

Test the Frontend: Run:

curl http://frontend.example.com

If you see <h1>Frontend Server</h1> you’re good to go!

If both applications are successfully deployed, the configuration is complete.

📘

Note

If you want to access api.example.com from other devices on your local network, you must edit the hosts file on the desired device as shown in Step 4.


Wrapping Up

This is a method for running a web server on ALPON X4 with a simple “Nginx Reverse Proxy.” By updating the configuration, you can integrate your projects into a broader range of use cases. ALPON X4 offers simple and scalable solutions that you can integrate as desired!