CODEWITHSUNDEEP
reactjsdockernginxreact-routercreate-react-app
user3414494
user3414494

Reputation: 3

React + Docker + Nginx

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?

Upvotes: 0

Views: 1224

Answers (2)

abisec
abisec

Reputation: 51

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.

Upvotes: 0

Tijn Hendrikson
Tijn Hendrikson

Reputation: 133

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

Upvotes: 2

Related Questions