How to Deploy Front‑End Apps with Nginx and Docker: Step‑by‑Step Guide

Front‑End Publishing

Deploying a front‑end service usually involves Nginx; this guide explains why Nginx is chosen and how to install it with Docker.

Why Choose Nginx

High performance: event‑driven handling of many concurrent connections.

Low resource consumption compared with other web servers.

Extensible modular architecture.

Built‑in reverse proxy and load‑balancing capabilities.

High reliability proven in production.

Install Nginx with Docker

Ensure Docker is installed on your machine.

Pull the Nginx image: docker pull nginx Create and run a container: docker run --name mynginx -d -p 80:80 nginx This creates a container named mynginx and maps host port 80 to the container.

Access the default Nginx page at http://localhost or via the host IP.

Nginx Configuration Highlights

Only the location block is usually needed for front‑end deployment, but the guide also shows forward and reverse proxy settings.

Forward Proxy Example

server {
    listen 80;
    server_name localhost;
    location / {
        proxy_pass http://example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Reverse Proxy Example

location / {
    proxy_pass http://backend_server;
}

Custom Error Pages

error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;

Docker Deploy Front‑End Service

Prepare the following:

Nginx image.

Dockerfile.

Nginx configuration file (default.conf).

Front‑end dist package.

Dockerfile example:

# Use nginx image
FROM nginx
MAINTAINER zhiyikeji
# Remove default config
RUN rm /etc/nginx/conf.d/default.conf
# Add custom config
ADD default.conf /etc/nginx/conf.d/
# Copy built front‑end files
COPY dist/ /usr/share/nginx/html/

Sample default.conf (simplified):

server {
    listen 17878;
    server_name 192.168.10.1;
    location /api/ {
        proxy_pass http://192.168.10.1:18081/;
    }
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html { root html; }
}

Build and run the Docker image:

docker build -t vue-app .

docker run -d --name vue-app -p 17878:19529 vue-app

After these steps the front‑end application is served by Nginx inside a Docker container.