WebSocket proxying in Nginx - Mini Project: Build & Apply

WebSocket Proxying with Nginx

📖 Scenario: You are setting up a web server to forward WebSocket connections from clients to a backend WebSocket server. This is common when you want to use Nginx as a reverse proxy to handle WebSocket traffic securely and efficiently.

🎯 Goal: Configure Nginx to proxy WebSocket connections correctly by setting up the necessary headers and connection upgrade directives.

📋 What You'll Learn

Create a basic Nginx server block listening on port 80

Add a variable for the backend WebSocket server URL

Configure proxy settings to handle WebSocket upgrade headers

Print the final Nginx configuration to verify correctness

💡 Why This Matters

🌍 Real World

WebSocket proxying is used to enable real-time communication in web apps, such as chat apps or live notifications, by forwarding WebSocket traffic through a reverse proxy like Nginx.

💼 Career

Understanding how to configure Nginx for WebSocket proxying is a valuable skill for DevOps engineers and system administrators managing scalable, real-time web services.

1

Create a basic Nginx server block

Write an Nginx server block that listens on port 80 and has a location /ws/ to proxy requests. Use proxy_pass http://backend_ws_server; inside the location block.

Nginx

server {
    listen 80;
    location /ws/ {
        # Your code here
    }
}

Need a hint?

Start with a server block, add listen 80;, then add a location /ws/ block with proxy_pass http://backend_ws_server;.

2

Add a variable for the backend WebSocket server URL

Define an upstream block named backend_ws_server with the server address 127.0.0.1:8080 before the server block.

Nginx

upstream backend_ws_server {
    # Your code here
}

server {
    listen 80;
    location /ws/ {
        proxy_pass http://backend_ws_server;
    }
}

Need a hint?

Use upstream backend_ws_server { server 127.0.0.1:8080; } to define the backend server.

3

Configure proxy settings for WebSocket upgrade

Inside the location /ws/ block, add these directives exactly: proxy_http_version 1.1;, proxy_set_header Upgrade $http_upgrade;, proxy_set_header Connection "upgrade";, and proxy_set_header Host $host;.

Nginx

upstream backend_ws_server {
    server 127.0.0.1:8080;
}

server {
    listen 80;
    location /ws/ {
        proxy_pass http://backend_ws_server;
        # Your code here
    }
}

Need a hint?

These headers are needed to tell Nginx to handle WebSocket upgrades properly.

4

Print the final Nginx configuration

Write a command to print the contents of the Nginx configuration file /etc/nginx/nginx.conf to verify your setup.

Nginx

upstream backend_ws_server {
    server 127.0.0.1:8080;
}

server {
    listen 80;
    location /ws/ {
        proxy_pass http://backend_ws_server;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }
}

# Your code here

Need a hint?

Use cat /etc/nginx/nginx.conf to display the configuration file contents.