How to Deploy a Web Application Using Docker and NGINX on Your Own Server

Deploying a web application doesn’t need to be a complicated process. With Docker, NGINX, and your own server, you can get your app live in no time.

In this blog, I’ll show you step by step how to serve your app with a domain, route traffic with NGINX, and run it all inside a Docker container. This guide is specifically tailored for a Linux-based server

Step 1 : Setup docker

First, let’s set up Docker. I’m using a simple React app as an example, but feel free to use any application or codebase of your choice. Create a Dockerfile in your project directory to define how your app should be containerized.

Docker file

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD [ "npm", "start" ]

Step 2 : Build and Run the Docker Container (on your server)

Once you’ve created your Dockerfile, the next step is to build your Docker image and run it to make sure everything is working as expected.

Open your terminal and navigate to your project directory, then run:

docker build -t my-react-app

This command builds the Docker image and tags it as my-react-app.

Now run the container:

docker run -d -p 3000:3000 my-react-app 

This command runs the container in detached mode (-d) and maps port 3000 on your machine to port 3000 inside the container.

Once the container is running, visit http://your-server-ip:3000 in your browser. You should see your app running!

Step 3 : Setup NGINX

Next, let’s set up NGINX on the server to handle incoming requests and route them to our application.

Need help installing and configuring NGINX on your Ubuntu server?
👉 Check out my full guide: How to Set Up and Configure NGINX on Ubuntu

NGINX configuration files are typically located in the /etc/nginx directory.

• The main configuration file is nginx.conf.
• Site-specific configurations are usually stored in /etc/nginx/sites-available, and then enabled by creating symbolic links in /etc/nginx/sites-enabled.

This structure allows you to manage multiple site configurations cleanly and enable or disable them easily.

Step 1 : Create Configuration file

Create a new configuration file for your application:

sudo nano /etc/nginx/sites-available/myapp

Add the following configuration:

server {
    listen 80;
    server_name yourdomain.com;  

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Replace yourdomain.com with your actual domain name.

🔒 Using SSL? Here’s How to Enable HTTPS
update the configuration as shown below to enable HTTPS support.

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    # Redirect all HTTP requests to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name yourdomain.com www.yourdomain.com;

    ssl_certificate /etc/ssl/certs/your_cert.pem;
    ssl_certificate_key /etc/ssl/private/your_key.pem;

    location / {
        proxy_pass http://localhost:3000;  
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

🔐 Replace /etc/ssl/certs/your_cert.pem and /etc/ssl/private/your_key.pem with the actual paths to your SSL certificate and private key.

Step 2 : Enable the Configuration

Create a symbolic link in the sites-enabled directory to enable your NGINX site configuration:

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/

Step 3 : Test & Restart NGINX

Before restarting NGINX, test the configuration for syntax errors:

sudo nginx -t 

If the configuration test is successful, restart Nginx to apply the changes:

sudo systemctl restart nginx 

Your application should now be accessible through Nginx at http://yourdomain

Conclusion

Deploying your web application using Docker and NGINX on your own server might sound intimidating at first, but once you break it down, it’s quite manageable.

By containerizing your app, setting up NGINX as a reverse proxy, and linking everything together on your VPS, you gain full control over your deployment process.

This setup not only helps you understand the internals of web hosting better but also gives you flexibility, performance, and cost savings in the long run.

If you found this guide helpful or have suggestions, feel free to drop a comment or reach out I’d love to hear from you! 😊

Happy coding and don’t forget to spread your smile everywhere you go! 😄