Traefik: Level=error msg=“field not found, node: mywebsite” providerName=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