DEV Community

NT
NT

Posted on

Docker Nginx Memo

Start Nginx on Docker

To run Nginx on Docker:

docker run --name nginx -p 80:80 -d nginx
Enter fullscreen mode Exit fullscreen mode

To restart

docker start -a nginx &
Enter fullscreen mode Exit fullscreen mode

Check if the docker instance working

http://localhost/
Enter fullscreen mode Exit fullscreen mode

Nginx on Browser

Hello World

Login to shell

docker exec -it nginx /bin/bash 
Enter fullscreen mode Exit fullscreen mode

Nginx docker image doesn't include vi so I needed to install it (technically, below install vim).

apt update && apt install -y vim
Enter fullscreen mode Exit fullscreen mode

Create index.html

cd /usr/share/nginx/html
vi index2.html
Enter fullscreen mode Exit fullscreen mode

The content of index2.html file might be something like this.


<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

On the browser, access to http://localhost/index2.html.

Hello World HTML file

Reverse Proxy

To use Nginx for the development environment for the Sump Data Project, Nginx is configured as a reverse proxy server.

/etc/nginx/conf.d/default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    # Swagger is accessed via /swagger url. 
    location /swagger {
    proxy_pass http://host.docker.internal:8080/swagger-ui;
    index index.html;
    proxy_redirect off;
    }

    # This is also for Swagger that requires /v3/... url
    location /v3 {
        proxy_pass http://host.docker.internal:8080/v3;
    proxy_redirect off;
    }

    # This is the sump data endpoint.
    location /devices {
        proxy_pass http://host.docker.internal:8080/devices;
    proxy_redirect off;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}
Enter fullscreen mode Exit fullscreen mode

After editing the conf file, to test

$ nginx -t
Enter fullscreen mode Exit fullscreen mode

To reload the conf file

nginx -s reload
Enter fullscreen mode Exit fullscreen mode

Adding Streamlit

Streamlit is a frontend web application to visualize data. For my project, I'm using it to draw a chart for the sump water level.

I originally just set up the same way as sump data API endpoint. Not that the port 8501 is the Streamlit app port (locally, it can be accessed http://localhost:8501).

    location / {
        proxy_pass http://host.docker.internal:8501/;
        proxy_redirect off;
    }
Enter fullscreen mode Exit fullscreen mode

Unfortunately, this doesn't work. The reason is Streamlit uses WebSocket under _stcore folder. To properly configure the reverse proxy, and HTTP Upgrade needs to be set.

    location /_stcore {
        proxy_pass http://host.docker.internal:8501/_stcore;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }
Enter fullscreen mode Exit fullscreen mode

Reference: NGINX as a WebSocket Proxy

Top comments (0)