How to dockerize nginx and another server in separate docker-compose files? - docker

Question

I have a reactjs app which I want to server through nginx. The app makes API requests a node.js Express server. I decided to dockerize nginx together with static website files (from reactjs app) in one docker-compose file. I created another docker-compose file for Express server. The containers are currently on my laptop and are using localhost. I haven't been able to get them to work for a long time and there's unfortunately not much information about this on the internet. (the website and Express server work when not inside Docker).
First of all I created a new docker network:
docker network create --driver bridge appstore-net
This is my docker-compose file for website and nginx:
version: '3.5'
services:
appstore-front:
container_name: appstore-front-production
build:
context: .
dockerfile: Dockerfile-prod
ports:
- '80:80'
networks:
- appstore-net
external_links:
- appstore-bl-server-production
networks:
appstore-net:
external: true
This is my docker-compose file for Express server:
version: '3'
services:
appstore-bl-server:
container_name: appstore-bl-server-production
build:
dockerfile: Dockerfile-prod
context: .
volumes:
- ".:/usr/src/app"
ports:
- "3000:3000"
networks:
- appstore-net
networks:
appstore-net:
external: true
This is my nginx configuration:
server {
listen 80;
listen [::]:80;
#Docker DNS
resolver 127.0.0.11;
server_name localhost;
access_log /var/log/nginx/appstore.access.log;
error_log /var/log/nginx/appstore.error.log;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
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;
#hack to prevent nginx to resolve container's host on start up
set $docker_host "appstore-bl-server";
proxy_pass http://$docker_host:3000;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
As you can see I'm using docker DNS resolver as well as creating "passing proxy" to URL consisting of Express container name.
How can I make it work?
EDIT: I found 2 issues that could've been the reason:
1) external_links needs to refer to container name, not container service.
2) docker_host variable in nginx needs to refer to service name, not container name.
With these corrections the setup works (corrected the values in the OP as well).