2

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.

1 Answer 1

2

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.