Reverse-proxy to Dockerized REST APIs with Dockerized NGINX - docker

Question

Please see follow-up at bottom
I'm new to NGINX and trying to setup a simple, in-house development Ubuntu server for multiple REST API and SPA apps entry points, so I can learn some NGINX basics.
All the APIs and SPAs I want to serve are dockerized, and each exposes its services (for API) or page (for SPA) on a localhost (the Docker's host) port.
For instance, I have an API at localhost:60380 and an Angular SPA app at localhost:4200, each running in its own Docker container.
I can confirm that these work fine, as I can reach both at their localhost-based URL. Each API also provides a Swagger entry point at its URL e.g. localhost:60380/swagger (or, more verbosely, localhost:60380/swagger/index.html).
I'd now want to have NGINX listening at localhost:80, and reverse-proxy requests to each corresponding services, based on the request's URL. To keep things clean, NGINX too is dockerized, i.e. run from a container using the NGINX open source version.
To dockerize NGINX I followed the directions at https://docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-docker/, i.e. I run a container from the nginx image, using volumes to point to host's folders for NGINX configuration and static content. I just changed the Docker command, as I had issues in using the mount-based syntax suggested in the documentation (it seems that / is not an allowed character, even if I specified the bind option; please notice that the following command is executed from /var):
docker run --name mynginx -v $(pwd)/www:/usr/share/nginx/html:ro -v $(pwd)/nginx/conf:/etc/nginx/conf:ro -p 80:80 -d nginx
i.e.:
host /var/www => container /usr/share/nginx/html;
host /var/nginx/conf => /etc/nginx.
As a test, I created a couple of static web sites in the host's folders mapped as the source for the volumes, i.e.:
/var/www/site1
/var/www/site2
Both these folders just have a static web page (index.html).
I placed in the host's /var/nginx/conf folder a nginx.conf file to serve these 2 static webs. This is the configuration I came up with:
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
# include imports configuration from a separate file.
# In this case it imports a types block, mapping each MIME type
# to a file extension, e.g.:
# types {
# text/html html htm shtml;
# text/css css;
# application/javascript js;
# ... etc
# }
include /etc/nginx/mime.types;
# the default type used if no mapping is found in types:
# here the browser will just download the file.
default_type application/octet-stream;
# log's format: the 1st parameter is the format's name (main);
# the second is a series of variables with different values
# for every request.
log_format main
'$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
# path to the log file and log format's name (main, defined above).
access_log /var/log/nginx/access.log main;
# set to on: do not block on disk I/O.
sendfile on;
# keep connection alive timeout. As a page usually has a lot of assets,
# this keeps the connection alive the time required to send them;
# otherwise, a new connection would be created for each asset.
keepalive_timeout 65;
# enable output compression. Recommendation is on.
gzip on;
# include all the .conf files under this folder:
include /etc/nginx/conf.d/*.conf;
}
server {
listen 80;
server_name localhost;
location /site1 {
root /usr/share/nginx/html/site1;
index index.html index.htm;
}
location /site2 {
root /usr/share/nginx/html/site2;
index index.html index.htm;
}
# 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;
}
}
This works fine, and I can browse to these two sites from localhost/site1 and localhost/site2.
I then started one of my dockerized APIs exposed at localhost:60380. I added to the NGINX configuration, in the same server block, the following location, to reach it at localhost/sample/api (and its swagger at localhost/sample/api/swagger):
location /sample/api {
proxy_pass_header Server;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:60380;
}
As this is an ASP.NET Core web API, I used as a starting point the configuration suggested at https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-3.1. Apart from some header passing directions, that's not essentially different from the one found e.g. at How to use nginx to serve a web app on a Docker container.
I have then saved the NGINX configuration in the host folder, and signaled NGINX to refresh it with docker kill -s HUP <mycontainername>.
Anyway, while I am still able to reach the API at localhost:60380, and the two static webs still work, I get a 404 when accessing localhost/sample/api or localhost/sample/api/swagger.
I tried to add proxy_redirect http://localhost:60380/ /sample/api/; as suggested here, but nothing changes.
Could you suggest what I'm doing wrong?
Update 1
I tried added the trailing / to the URI but I'm still getting 404. If this works for Kaustubh (see the answer below), that's puzzling for me as I'm still on 404; or maybe we did something different. Let me recap also for the benefit of other unexperienced readers like me:
prepare the host:
cd /var
mkdir nginx
cd nginx
mkdir conf
cd ..
mkdir www
cd www
mkdir site1
cd ..
mkdir site2
cd ..
Then add an index.html page in each of the folders /var/www/site1, /var/www/site2, and the below nginx.conf under var/nginx/conf:
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
# include imports configuration from a separate file.
# In this case it imports a types block, mapping each MIME type
# to a file extension, e.g.:
# types {
# text/html html htm shtml;
# text/css css;
# application/javascript js;
# ... etc
# }
include /etc/nginx/mime.types;
# the default type used if no mapping is found in types:
# here the browser will just download the file.
default_type application/octet-stream;
# log's format: the 1st parameter is the format's name (main);
# the second is a series of variables with different values
# for every request.
log_format main
'$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
# path to the log file and log format's name (main, defined above).
access_log /var/log/nginx/access.log main;
# set to on: do not block on disk I/O.
sendfile on;
# keep connection alive timeout. As a page usually has a lot of assets,
# this keeps the connection alive the time required to send them;
# otherwise, a new connection would be created for each asset.
keepalive_timeout 65;
# enable output compression. Recommendation is on.
gzip on;
# include all the .conf files under this folder:
include /etc/nginx/conf.d/*.conf;
}
server {
listen 80;
server_name localhost;
location /site1 {
root /usr/share/nginx/html/site1;
index index.html index.htm;
}
location /site2 {
root /usr/share/nginx/html/site2;
index index.html index.htm;
}
# https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-3.1
# https://stackoverflow.com/questions/57965728/how-to-use-nginx-to-serve-a-web-app-on-a-docker-container
# https://serverfault.com/questions/801725/nginx-config-for-restful-api-behind-proxy
location /sample/api {
# proxy_redirect http://localhost:60380/ /sample/api/;
proxy_pass_header Server;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:60380/;
}
# 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;
}
}
docker run --name mynginx -v $(pwd)/www:/usr/share/nginx/html:ro -v $(pwd)/nginx/conf:/etc/nginx/conf:ro -p 80:80 -d --net=host nginx (notice the added --net=host)
navigate to localhost/site1 and localhost/site2: this works.
start your API at localhost:60380 (this is the API port in my sample). I can see it working at localhost:60380 and its swagger page at localhost:60380/swagger.
navigate to localhost/sample/api: 404. Same for localhost/sample/api/swagger/index.html or any other URI with this prefix.

Answer 1

I tried to replicate this at my end as much as possible. I was able to get it working only after I used --net=host in the docker run command for nginx. Below is the command I used. I had to use this option because the nginx docker container was not able to connect to my api docker container
$ docker run --name nginx -v $(pwd):/usr/share/nginx/html:ro -v $(pwd)/default.conf:/etc/nginx/conf.d/default.conf:ro -p 80:80 --net=host -id nginx
/etc/nginx/conf.d/default.conf is the default virtual host configuration in nginx that displays the Welcome to nginx page.
I changed it to below config:
server {
listen 80;
server_name localhost;
# For static files
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
# For reverse_proxy
location /sample/api {
proxy_pass http://localhost:8080/;
}
}
According to this answer a trailing slash after the port no should fix this.
I have tested the same at my end and it works.