Dockerize 多页反应应用程序（错误：404 Not Found nginx/1.21.4）答案

【问题标题】：Dockerize multipaged react app (error: 404 Not Found nginx/1.21.4)Dockerize 多页反应应用程序（错误：404 Not Found nginx/1.21.4）
【发布时间】：2021-12-18 21:34:55
【问题描述】：

我已经使用组件编写了一个带有一组不同 url 的 react 应用程序，我正在尝试使用 docker 部署它。虽然主页加载其余部分不加载。当我运行 npm run build 时，一切正常，所以问题可能出在我的 Dockerfile 中。我得到的错误是 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 react-scripts@3.0.1 -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;"]

cmets 是我之前的尝试，但没有成功包.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;
    }
}

【问题讨论】：

请出示您的 package.json 文件，以便我们查看您的 npm 命令的作用。此外，很高兴知道您收到 404 的请求是什么。由于主页加载，它不是所有的请求，对吧？
我在任何形式为 localhost/ 的 url 中都收到错误，唯一有效的 url 是 /localhost

标签： node.js docker nginx

【解决方案1】：

我的 Dockerfile 错误，正确的是：

# 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;"]

【讨论】：