我们似乎对我们维护的create-react-app应用程序有一点问题。每次部署之后，无论是Azure上的测试环境还是AWS上的生产环境，每个人在访问该页面后都会看到白屏。更令人困惑的是，刷新后白屏消失了。我们得到的错误是：
Uncaught SyntaxError: Unexpected token '<' main.13fb6cbd.js:1
该网页由运行在Docker Alpine容器中的nginx提供。这是nginx的配置：
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
# Enable Gzip compressed.
gzip on;
# Enable compression both for HTTP/1.0 and HTTP/1.1 (required for CloudFront).
gzip_http_version 1.0;
# Compression level (1-9).
# 5 is a perfect compromise between size and cpu usage, offering about
# 75% reduction for most ascii files (almost identical to level 9).
gzip_comp_level 5;
# Don't compress anything that's already small and unlikely to shrink much
# if at all (the default is 20 bytes, which is bad as that usually leads to
# larger files after gzipping).
gzip_min_length 256;
# Compress data even for clients that are connecting to us via proxies,
# identified by the "Via" header (required for CloudFront).
gzip_proxied any;
# Tell proxies to cache both the gzipped and regular version of a resource
# whenever the client's Accept-Encoding capabilities header varies;
# Avoids the issue where a non-gzip capable client (which is extremely rare
# today) would display gibberish if their proxy gave them the gzipped version.
gzip_vary on;
# Compress all output labeled with one of the following MIME-types.
gzip_types
application/atom+xml
application/javascript
application/json
application/rss+xml
application/vnd.ms-fontobject
application/x-font-ttf
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/opentype
image/svg+xml
image/x-icon
text/css
text/plain
text/x-component;
# text/html is always compressed by HttpGzipModule
Dockerfile：
### STAGE 1: Build ###
FROM node:11-alpine as build
# Create app directory
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./
COPY css-vendor-patch ./css-vendor-patch
RUN apk add --update --no-cache \
python make g++
# We need --unsafe-perm for postinstall
RUN npm install --only=production --unsafe-perm
RUN npm install react-scripts -g --silent
RUN npm audit fix --only=prod
COPY . .
RUN npm run build
### STAGE 2: Production Environment ###
FROM nginx:1.15-alpine
COPY --from=build /usr/src/app/build /usr/share/nginx/html
COPY nginx-react.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
最后是package.json配置：
{
"name": "frontend",
"version": "1.5.0",
"private": true,
"dependencies": {
"@material-ui/core": "^3.0.2",
"@material-ui/icons": "^1.1.0",
"@vtex/react-csv-parse": "^3.0.2",
"ajv": "^6.5.1",
"axios": "^0.19.0",
"chartist": "^0.11.0",
"classnames": "^2.2.6",
"color": "^3.0.0",
"coordinate-parser": "^1.0.2",
"core-js": "^2.5.7",
"debounce": "^1.1.0",
"deep-equal": "^1.0.1",
"dompurify": "^2.0.8",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"email-validator": "^2.0.4",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.1.1",
"flat": "^4.1.0",
"html-react-parser": "^0.4.6",
"html-to-draftjs": "^1.4.0",
"html-to-react": "^1.4.2",
"i18next": "^11.3.3",
"i18next-browser-languagedetector": "^2.2.0",
"immutable": "3.8.2",
"jest": "^23.4.2",
"js-file-download": "^0.4.10",
"jsonwebtoken": "^8.3.0",
"jwt-autorefresh": "^0.2.4",
"material-ui-pickers": "^1.0.0-rc.11",
"moment": "^2.22.2",
"notistack": "^0.4.3",
"object-path": "^0.11.4",
"qrcode.react": "^0.8.0",
"query-string": "^5.1.1",
"react": "^16.7.0",
"react-autosuggest": "^9.3.4",
"react-avatar-editor": "^11.0.6",
"react-big-calendar": "^0.19.1",
"react-bus": "^1.0.3",
"react-chartist": "^0.13.1",
"react-copy-to-clipboard": "^5.0.1",
"react-csv": "^1.0.14",
"react-dom": "^16.4.1",
"react-draft-wysiwyg": "^1.13.2",
"react-dropzone": "^4.2.12",
"react-easy-print": "^0.6.0-beta.3",
"react-google-map": "^3.1.1",
"react-google-maps-loader": "^4.2.3",
"react-i18next": "^7.7.0",
"react-loadable": "^5.5.0",
"react-pdf": "^3.0.5",
"react-player": "^1.11.0",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-signature-canvas": "^1.0.0-alpha.1",
"react-smooth-dnd": "^0.8.2",
"react-sortable-hoc": "^0.8.3",
"react-swipeable-views": "^0.12.14",
"react-test-renderer": "^16.4.1",
"react-webcam": "^1.0.1",
"recompose": "^0.27.1",
"source-map-support": "0.4.3",
"striptags": "2.2.1",
"typeface-roboto": "0.0.54",
"vendor-copy": "^2.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "vendor-copy"
},
"vendorCopy": [
{
"from": "css-vendor-patch/supported-value.js",
"to": "node_modules/css-vendor/lib/supported-value.js"
}
]
}
我们尝试使用homepage或测试服务器的URL将package.json字段添加到.，但没有好运。我们还尝试了注销也不起作用的serviceWorker。欢迎任何建议。
所以问题出在react-scripts和package.json之间的Dockerfile不匹配。 Dockerfile]中的这一行
RUN npm install react-scripts -g --silent拉入
3.4.1版本并全局安装，而在package.json中指定了1.1.4。当
RUN npm run build运行时，它可能使用的是
3.4.1版本，但缺少某些配置。在将react-scripts中的3.4.1更新为package.json（并更新/添加其依赖项）后，问题消失了。