Error 502 when dockerizing an application (React) using Nginx proxying, how to fix it?

  • 0
    I am trying to dockerize an application written in React using nginx proxying. For nginx I use the image from the dockerhab, for nodejs I write my own Dockerfile, in addition, for nginx I write my own config and use it.
    When I start the application, I receive a 502 error (Bad Gateway) and the following error appears in the logs:

    * 16 connect () failed (111: Connection refused) while connecting to upstream, client: 172.28.0.1, server: ~. *, Request: "GET / HTTP / 1.1", upstream: " 172.28.0.2:3000 ", host: "localhost"
    * 1 connect () failed (111: Connection refused) while connecting to upstream, client: 172.28.0.1, server: ~. *, Request: "GET /favicon.ico HTTP / 1.1", upstream: " 172.28.0.2:3000/favicon.ico ", host: "localhost", referrer: " localhost "


    The structure of the project is as follows:
    - project
      - app
        - package.json *and more*
      - docker
        - confing
          - nginx
            - default.conf
        - dockerfile
          - node
            - Dockerfile
        docker-compose.yml


    My Dockerfile for Nodejs:
    FROM node:13.12.0-alpine
    
    # set working directory
    WORKDIR /home/node/app
    
    # install app dependencies
    
    COPY package*.json ./
    
    RUN npm install react-scripts -g
    RUN npm install
    
    # add app
    COPY . ./
    
    # start app
    CMD ["npm", "start"]


    My default.conf for nginx:
    server {
        listen 80;
        server_name ~.*;
    
    
        location / {
            root /var/www/html/public;
            proxy_pass http://nodejs:3000;
        }
    }


    My docker-compose.yml:
    version: '3'
    
    services:
      nodejs:
        build:
          context: ../app
          dockerfile: ./../docker/dockerfile/node/Dockerfile
        container_name: nodejs
        networks:
          - my-network
        restart: unless-stopped
        volumes:
          - ../app:/home/node/app
        expose:
          - 3000
        environment:
          - NODE_ENV=development
      nginx:
        networks:
          - my-network
        image: nginx:latest
        container_name: user-nginx
        volumes:
            - ../app:/var/www/html
            - ./logs/nginx:/var/log/nginx
            - ./config/nginx:/etc/nginx/conf.d
        ports:
          - 80:80
    networks:
      portfolio:
        name: my-network
        driver: bridge
    JavaScript Anonymous, Sep 27, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!