React + Docker + Nginx

Question

I have some problem with create-react-app and docker configuration with nginx, this is my first time when i trying to dockerize react app. I tried many different settings and almost always i get 404 after build.

This is my docker file:

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

FROM nginx: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
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Right now my nginx file looks like that, but as i said, i tried many different settings

server {
    listen  80;
    location / {
        root   /var/www;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

And this is what i see after build

I dont know if this is important but for routing i using react-navi. Any ideas?

Which OS are you using? Have you checked the docker log? Have you openeed the firewall for http or 80/tcp? We need more details in order to help you. — Niloy
– Niloy, Commented Jul 16, 2020 at 10:32

Adiii · Accepted Answer · 2020-07-16 11:40:13Z

2

It looks like your Nginx configuration is looking at /var/www but you're copying your files to /usr/share/nginx.html. Shouldn't the copy command look like this?

COPY --from=build /app/build /var/www

edited Jul 16, 2020 at 11:40

Adiii

61.1k10 gold badges180 silver badges174 bronze badges

answered Jul 16, 2020 at 10:36

Tijn Hendrikson

1336 bronze badges

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

Comments

abisec · Accepted Answer · 2024-06-21 11:54:12Z

I assume that you already installed nginx and docker in your system first. Make a Dockerfile inside your project folder:

# Stage 1: Build React application
FROM node:14.17.0 as build

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package.json ./

# Install dependencies using npm
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the application using npm
RUN npm run build

# Stage 2: Setup Nginx and host the built React application
FROM nginx:alpine

# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy built artifacts from the previous stage
COPY --from=build /app/build /usr/share/nginx/html

# Expose port 80 (default HTTP port)
EXPOSE 80

# CMD for nginx (already set in nginx image)
CMD ["nginx", "-g", "daemon off;"]

Then build the docker image:

docker build -t docImage .

Also, create a container for this:

docker run -d -p 8082:80 docImage

Now time to add your dockerimage on nginx:

   location /DocImg {  
      proxy_pass         http://127.0.0.1:8082;
      proxy_http_version 1.1;
      proxy_set_header   Upgrade $http_upgrade;
      proxy_set_header   Connection keep-alive;
      proxy_set_header   Host $host;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header   X-Forwarded-Proto $scheme;
   }

Then try:

sudo nginx -t
sudo nginx -s reload

If you're working on production server, don't restart the nginx server everytime better to use reload.

sudo systemctl restart nginx

Now, you can get your docImage on /DocImg path in your nginx web server.

Collectives™ on Stack Overflow

React + Docker + Nginx

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related