Traefik: Level=error msg=“field not found, node: mywebsite” providerName=docker - docker

Question

I am building a static website using Gatsby, and I am using Nginx to serve the static files.
I am also setting up Docker for the application deployment to production and also using Traefik as the reverse proxy in the Docker container.
Traefik runs on a different container while the Gatsby application runs on a different container with Nginx together.
However, when I run the application in production I get this error:
level=error msg="field not found, node: mywebsite" providerName=docker container=web-my-website
Here's my code:
Nginx's defualt.conf
server {
listen 3008;
add_header Cache-Control no-cache;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
expires -1;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Dockerfile
# Set base image
FROM node:latest AS builder
# Set working directory
WORKDIR /app
# Copy package.json and install packages
COPY package.json .
RUN npm install
# Copy other project files and build
COPY . ./
RUN npm run build
# Set nginx image
FROM nginx:latest
# Nginx config
RUN rm -rf /etc/nginx/conf.d/default.conf
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
# Static build
COPY --from=builder /app/public /usr/share/nginx/html
# Set working directory
WORKDIR /usr/share/nginx/html
# Start Nginx server
CMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]
Gatsby application's docker-compose.yml
version: "3"
services:
web:
image: my-website
build:
context: .
dockerfile: Dockerfile
expose:
- "3004"
labels:
- traefik.enable=true
- traefik.http.routers.mywebsite.rule=Host(`mywebsite.com`)
- traefik.http.services.educollectwebsite.loadbalancer.server.port=3004
restart: always
volumes:
- .:/app
networks:
default:
external:
name: traefik-proxy
Traefik's docker-compose.yml
version: "3"
services:
reverse-proxy:
# The official v2 Traefik docker image
image: traefik:v2.2
# Enables the web UI and tells Traefik to listen to docker
command:
- --api.insecure=true
- --entrypoints.web.address=:80
- --providers.docker=true
- --providers.docker.exposedbydefault=false
ports:
# The HTTP port
- "88:80"
# The Web UI (enabled by --api.insecure=true)
- "8088:8080"
restart: always
volumes:
# So that Traefik can listen to the Docker events
- /var/run/docker.sock:/var/run/docker.sock
networks:
default:
external:
name: traefik-proxy
I can't seem to figure out what the issue is here. Any form of help will be appreciated.

Answer 1

I was finally able to resolve it after some hours of working with my Line Manager.
The issue was that I defined port 3008 in the Nginx default.conf file and then defined port 3004 in the Gatsby application's docker-compose.yml file. This did not allow traffic into the application from Traefik reverse proxy. since both ports were different.
Solution 1:
Simply defining the same port of 3008 in the Nginx default.conf and in the Gatsby application's docker-compose.yml file fixed it:
Nginx's defualt.conf
server {
listen 3008;
add_header Cache-Control no-cache;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
expires -1;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Gatsby application's docker-compose.yml
version: "3"
services:
web:
image: my-website
build:
context: .
dockerfile: Dockerfile
expose:
- "3004"
labels:
- traefik.enable=true
- traefik.http.routers.mywebsite.rule=Host(`mywebsite.com`)
- traefik.http.services.educollectwebsite.loadbalancer.server.port=3008
restart: always
volumes:
- .:/app
networks:
default:
external:
name: traefik-proxy
Solution 2:
Defining the default port in Traefik which is port 80 in the Nginx default.conf and in the Gatsby application's docker-compose.yml file fixed it. This is more preferable when deploying static applications since it helps me to assume a reasonable default for the application.
Nginx's defualt.conf
server {
listen 80;
add_header Cache-Control no-cache;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
expires -1;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Gatsby application's docker-compose.yml
version: "3"
services:
web:
image: my-website
build:
context: .
dockerfile: Dockerfile
expose:
- "80"
labels:
- traefik.enable=true
- traefik.http.routers.mywebsite.rule=Host(`mywebsite.com`)
restart: always
volumes:
- .:/app
networks:
default:
external:
name: traefik-proxy
Note: Using the same port with Traefik which is port 80 in the application, invalidates the need for a Traefik loadbalancer service.
- traefik.http.services.educollectwebsite.loadbalancer.server.port=80
That's all.
I hope this helps