у нас, похоже, небольшая проблема с приложением create-реагировать на приложение, которое мы поддерживаем. После каждого развертывания, будь то среда тестирования в Azure или производственная среда в AWS, все получают белый экран после посещения страницы. Что еще более озадачивает, белый экран пропал после refre sh. Ошибка, которую мы получаем:
Uncaught SyntaxError: Unexpected token '<' main.13fb6cbd.js:1
Веб-страница обслуживается nginx, который работает в Docker Alpine контейнере. Вот конфигурация 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 к package.json с . или URL-адресом тестового сервера, но безуспешно. Мы также попытались отменить регистрацию serviceWorker, которая также не работала. Любые советы приветствуются.