Nginx Question posted in
The official documentation can be found here.

elasticbeanstalk on the Docker platform: 502 Bad Gateway for the react app – Nginx

I have a dummy react app deployed from Dockerfile.dev:

FROM node:alpine AS builder
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx
EXPOSE 80
COPY --from=builder /app/build /usr/share/nginx/html

which is deployed to elasticbeanstalk right after it is pushed to GitHub using TravisCI:

sudo: required
services:
  - docker

before_install:
  - docker build -t name/docker-react -f Dockerfile.dev .

script:
  - docker run -e CI=true name/docker-react npm run test

deploy:
  provider: elasticbeanstalk
  region: 'us-east-1'
  app: 'docker'
  env: 'Docker-env'
  bucket_name: 'elasticbeanstalk-us-east-1-709516719664'
  bucket_path: 'docker'
  on:
    branch: main
  access_key_id: $AWS_ACCESS_KEY
  secret_access_key: $AWS_SECRET_KEY

The app is successfully deploying to EB but displays 502 Bad Gateway as soon as I access it (by clicking the app link in AWS EB). Enhanced health overview reports:
Process default has been unhealthy for 18 hours (Target.FailedHealthChecks).

Docker-env EC2 instance is running and after allowing all incoming connections to it I can connect just fine: enter image description here

I can build my app using Dockerfile.dev locally with no problems:

docker build -t name/docker-react -f Dockerfile.dev .
 => => naming to docker.io/name/docker-react  

docker run -p 3000:3000 name/docker-react

enter image description here

Tags:

2

Answers


  1. 0

    AWS has a hard time with the ‘.’ folder designation and prefers the long form ./

    Try to edit the COPY instruction to COPY package*.json ./

    And try also to remove the named builder. By default, the stages are not named, and you refer to them by their integer number, starting with 0 for the first FROM instruction.

    Your Dockerfile should looks like:

    FROM node:alpine
WORKDIR '/app'
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx
EXPOSE 80
COPY --from=0 /app/build /usr/share/nginx/html

    You should have a docker-compose.yml, just ensure that you have the right port mapping inside:
    Example:

    services:
    web-service:
        build:
            context: .
            dockerfile: Dockerfile.dev
        ports:
            - "80:3000" # outside:inside container

    finally your TravisCI configuration must be edited. secret_acces_key has ONE ‘S’

    ...
    access_key_id: $AWS_ACCESS_KEY
    secret_acces_key: $AWS_SECRET_KEY
    Login or Signup to reply.
  2. 0

    Nginx default port is 80, and AWS only checks docker-compose.yml to manage resources efficiently, just do the right port mapping inside that file

    version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev 
    ports:
      - "80:3000"
    volumes:
      - /app/node_modules
      - .:/app
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search