Nginx is not working with docker-compose for react app

Question

I have created nginx config, DockerFile, Docker-compose file for the same.

nginx/nginx.conf

 server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root  /usr/share/nginx/html;
  }
}

DockerFile

FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm ci --silent
RUN npm install [email protected] -g --silent
COPY . ./
RUN npm run build

# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

version: "3.7"
services:
  client:
    container_name: client
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 3001:3000

Now after doing docker-compose up --build

I get the logs as

client    | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
client    | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
client    | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
client    | 10-listen-on-ipv6-by-default.sh: Getting the checksum of /etc/nginx/conf.d/default.conf
client    | 10-listen-on-ipv6-by-default.sh: error: /etc/nginx/conf.d/default.conf differs from the packages version
client    | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
client    | /docker-entrypoint.sh: Configuration complete; ready for start up

I am not sure, if the problem is due to different packages version or something else but when tried to visit the url it says this site can’t be reached.

do you get additional logs after you visit url? Also what output gives docker ps — GintsGints
– GintsGints, Commented Oct 14, 2020 at 6:55

allan makura · Accepted Answer · 2020-10-14 08:23:39Z

1

You didn't specify which url you are using, but it looks like your nginx is exposed on port 80. You need to expose that port in docker compose. Include under the ports:

- 80:80

answered Oct 14, 2020 at 8:23

allan makura

9791 gold badge10 silver badges17 bronze badges

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

3 Comments

0xSHA1001 Over a year ago

I have added this -80:80 under port in docker-compose, still not working

allan makura Over a year ago

run "docker ps" and check if your container is running and what ports are exposed.

Vikranth Over a year ago

Any updates on this? I'm facing the same issue and any pointers will be greatly appreciated.

score 0 · Accepted Answer · 2023-03-10 14:14:37Z

0

Dockerfile

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf

should be

COPY nginx/nginx.conf /etc/nginx/nginx.conf

nginx.conf

    listen 80;

should be

    listen 80;
    server_name localhost;

edited Mar 10, 2023 at 14:14

answered Mar 9, 2023 at 16:23

user21364935

Collectives™ on Stack Overflow

Nginx is not working with docker-compose for react app

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related