React Nginx Docker: Not serving react, just nginx default page

Question

I tried several tutorials and none of them worked in my case, the react segment of dockerfile works fine by itself

Dockerfile

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

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

nginx.conf

# auto detects a good number of processes to run
worker_processes auto;

#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
    worker_connections 8000;
    multi_accept on;
}

http {
    log_format compression '$remote_addr - $remote_user [$time_local] '
        '"$request" $status $upstream_addr '
        '"$http_referer" "$http_user_agent"';

    server {

      listen 80;

      # save logs here
        access_log /var/log/nginx/access.log compression;

        # where the root here
        root /usr/share/nginx/html;
        index index.html index.htm;

        location / {
          try_files $uri $uri/ /index.html;
        }

        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }

        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }

        # Any route containing a file extension (e.g. /devicesfile.js)
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }

        location /api/ {
            proxy_pass http://localhost:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
          root   /usr/share/nginx/html;
        }
    }
}

I also tried simpler Nginx conf files but they all end in the same result, and this came from this tutorial: https://www.yld.io/blog/deploy-create-react-app-with-docker-and-ngnix/

I run "docker build --rm -t front:prod ." Followed by "docker run -p 80:80 olimpofront:prod" With this output:

/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: info: /etc/nginx/conf.d/default.conf is not a file or does not exist
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
/docker-entrypoint.sh: Configuration complete; ready for start up
2021/08/27 16:42:17 [notice] 1#1: using the "epoll" event method
2021/08/27 16:42:17 [notice] 1#1: nginx/1.20.1
2021/08/27 16:42:17 [notice] 1#1: built by gcc 10.2.1 20201203 (Alpine 10.2.1_pre1) 
2021/08/27 16:42:17 [notice] 1#1: OS: Linux 5.4.0-81-generic
2021/08/27 16:42:17 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576
2021/08/27 16:42:17 [notice] 1#1: start worker processes
2021/08/27 16:42:17 [notice] 1#1: start worker process 23
2021/08/27 16:42:17 [notice] 1#1: start worker process 24
2021/08/27 16:42:17 [notice] 1#1: start worker process 25
2021/08/27 16:42:17 [notice] 1#1: start worker process 26
2021/08/27 16:42:17 [notice] 1#1: start worker process 27
2021/08/27 16:42:17 [notice] 1#1: start worker process 28
2021/08/27 16:42:17 [notice] 1#1: start worker process 29
2021/08/27 16:42:17 [notice] 1#1: start worker process 30

Raissa Correia · Accepted Answer · 2021-08-27 17:53:43Z

Solved, answer below:

Nginx.conf

server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

Dockerfile

# base image
FROM node:14.15.1 as build

# set working directory
WORKDIR /app

EXPOSE 3000

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json package-lock.json ./
#COPY package.json /app/package.json

RUN npm install --silent && npm install [email protected] -g --silent

# add app
COPY . ./

# start and/or build app
RUN npm run build

FROM nginx:1.20.1
#copies React to the container directory
# Set working directory to nginx resources directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static resources
RUN rm /etc/nginx/conf.d/default.conf
# Copies static resources from builder stage
COPY --from=build /app/build /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

Collectives™ on Stack Overflow

React Nginx Docker: Not serving react, just nginx default page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related