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.
-
Open a terminal on your computer.
-
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
-
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:
-
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., "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:
From To 31050 80
-
Step 2: Frontend HTTP Server
-
Open a terminal on your computer.
-
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
-
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:
-
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., "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:
From To 31060 80
-
Step 3: Set Up Nginx as a Reverse Proxy
Now, let’s configure Nginx to route traffic to your applications based on hostnames.
-
Create a Directory: Make a new folder (e.g., nginx-reverse) and navigate into it.
-
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; } }
- Add a Dockerfile: In the same folder, create a Dockerfile with:
FROM nginx:latest COPY default.conf /etc/nginx/conf.d/default.conf
- Build the Image:
docker buildx build --platform=linux/arm64 -t nginx-server:latest .
- 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:
- 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.
- In Sixfab Connect, go to your device’s interface.
- Click Open Remote Terminal.
- Edit the hosts file by running:
sudo nano /etc/hosts
- 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!
Updated 2 days ago