React Webpack 生产部署返回空白页面

Question

我正在尝试在生产环境中部署 React Webapp 应用程序，但我的 UI 在控制台中返回一个空白页面，并出现一些错误。

这是我的配置： Package.json：

  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "option.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --port 3000 --hot --progress --inline",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.18.2",
    "download-file": "^0.1.5",
    "draft-js": "^0.10.0",
    "google-map-react": "^0.24.0",
    "jquery-file-download": "^1.4.6",
    "react": "^15.4.2",
    "react-addons-css-transition-group": "^15.4.1",
    "react-ckeditor-wrapper": "^1.1.2",
    "react-dom": "^15.4.2",
    "react-file-download": "^0.3.4",
    "react-iframe": "^1.3.3",
    "react-js-pagination": "^3.0.2",
    "react-md-spinner": "^0.2.5",
    "react-meta-tags": "^0.1.3",
    "react-overlay-loading": "^1.0.3",
    "react-popup": "^0.9.3",
    "react-recaptcha": "^2.3.10",
    "react-router": "^3.0.0",
    "react-rte": "^0.11.0",
    "react-search": "^2.0.5",
    "react-share": "^2.4.0",
    "react-social-buttons": "^1.0.8",
    "react-spinners": "^0.3.2",
    "react-tabs-component": "^1.1.3",
    "react-text-truncate": "^0.13.1",
    "react-texteditor": "^0.1.1",
    "react-word-limit": "^1.0.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "winterfell": "^1.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "webpack": "^1.13.3"
  }
}

Dockerfile：

FROM node:12.1.0-slim as build
WORKDIR /app
COPY ./code/package*.json ./
RUN npm install
RUN npm install [email protected] -g
COPY ./code ./
RUN webpack --mode production

FROM nginx:1.23
COPY --from=build /app/static /usr/share/nginx/html/static
COPY --from=build /app/index.html /usr/share/nginx/html/index.html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

默认.conf：

server {
    listen       80; 
    server_name  _;   
    server_tokens off;
    root   /usr/share/nginx/html;
    index  index.html;

    add_header X-Frame-Options SAMEORIGIN;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
    location / {
        try_files $uri $uri/ /index.html;
    }
}

我的网址在控制台中抛出空白页面，其中包含以下内容：

我尝试在 Dockerfile 中添加 npm ls，这返回了一些包问题。 但当我之前将其部署在主机级别时，我的生产应用程序运行得非常好。

Answer 1

我建议首先检查构建过程。运行 npm run build 看看是否有错误。如果没有，请查看浏览器控制台以获取任何线索。有时，部署中的文件可能会丢失或配置不正确。确保您的服务器已设置为正确服务器反应文件。也检查docker日志。如果一切看起来都很好，请考虑检查配置是否存在任何问题。使用 Chrome DevTools 等调试工具还可以深入了解问题所在。