Приложение React отображает только public / index. html при использовании NGINX - PullRequest
Новая
       69

Приложение React отображает только public / index. html при использовании NGINX

0 голосов
/ 05 августа 2020

Я пытаюсь развернуть приложение React с Docker в образ Nginx.

В настоящее время, когда сборка завершена и Docker запущен, я могу получить доступ к странице через localhost:xxxx, но отображается только содержимое public/index.html в моем приложении React (т.е. значок, заголовок сайта), но не отображается другой контент.

В качестве примечания, при запуске npm start страница отображается без каких-либо проблем.

Ниже приведены мои Dockerfile, nginx.conf и общая структура приложения React для справки:

Dockerfile 

FROM node:14.7-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent
COPY . ./
RUN npm run build

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

nginx .conf 

server {
   listen: 80
   server_name test-frontend;

   location / {
      root /usr/share/nginx/html;
      index index.html index.htm;
      try_files $uri /index.html;
   }

   error_page 500 502 503 504 /50x.html;

   location = /50x.html {
      root /usr/share/nginx/html;
   }
}

Структура приложения React 

test-frontend/
├── Dockerfile
├── .dockerignore
├── jsconfig.json
├── nginx.conf
├── npm-debug.log
├── package.json
├── package-lock.json
├── nodemodules/
  ├── package/
  │   ├── ...
  │   ├── ...
  │   ├── ...
  └── .../
├── public/
  ├── favicon.ico
  ├── icon.png
  ├── index.html <--- this loads fine.
  ├── manifest.json
├── src/
  ├── assets/
  ├── components/
  ├── views/
  ├── index.js <--- this does not populate.
  ├── routes.js <--- routes are ignored.

Любая помощь будет принята с благодарностью.

...