Dockerize multipaged react app (error: 404 Not Found nginx/1.21.4)-CodePudding

I've written a react app with a banch of different urls using component and I'm trying to deploy it using docker. While the main page loads the rest of them don't. When I run npm run build everything works fine so the problem is probably in my Dockerfile. The error I get is 404 Not Found nginx/1.21.4


# build environment
FROM node:14.18.1 as build
WORKDIR /app
# ENV PATH /app/node_modules/.bin:$PATH
#COPY package.json /app/package.json
#RUN npm install --silent
#RUN npm install [email protected] -g --silent
#COPY . /app

COPY package*.json ./
RUN npm ci
COPY . ./
RUN npm run build

# production environment
FROM nginx:1.21.4-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD [ "nginx","-g", "daemon off;"]

The comments are my previous attemps thet didn't work package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.3",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.1.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@tailwindcss/postcss7-compat": "^2.2.17",
    "autoprefixer": "^9.8.8",
    "postcss": "^7.0.39",
    "postcss-cli": "^9.1.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  }
}

nginx.config

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

CodePudding user response：

My Dockerfile was wrong the correct one is:

# build environment
FROM node:14.18.1 as build
WORKDIR /app
COPY package*.json ./
COPY . .
RUN npm ci
RUN npm run build

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