Как запустить React с Docker и nginx в Prod? - PullRequest
Новая
       6

Как запустить React с Docker и nginx в Prod?

1 голос
/ 19 января 2020

Я пытаюсь запустить динамические c маршруты в Docker Prod envir, но я получаю 404 в консоли инспектора / на пустой странице. Чтобы заставить страницу работать, я раскомментировал несколько строк, которые вы увидите ниже. Я нашел несколько источников в Интернете и следил в точности за их настройкой, но это не сработало, вот one . Запуск на локальном хосте: 3000 работает для некоторых страниц, но не для динамических c маршрутов ...

Структура папок 

root
  |- nginx
  | |- nginx.conf
  |- src
  | |- App.js
  | |- index.js
  |- dockerfile-prod
  |- dockerfile-compose-prod.yml

Приложение. js

<BroserRouter> # is basename={} required?
 <Switch>
  <Route exact path ='/' exact component={Home} /> # works
  <Route exact path='/article/:slug' component={Article} /> #does not work
  <Route exact path='/blog' component={Blog} /> # works
...

dockerfile-prod 

FROM node:alpine as build
WORKDIR /app
COPY . /app
ENV PATH /app/node_modules/.bin:$PATH
RUN yarn
RUN yarn build
FROM nginx:alpine

# COPY --from=build /app/build /usr/share/nginx/html #### BREAKS COMPLETELY SO I UNCOMMENT, THUS THE NEXT LINE

COPY ./build /var/www

# RUN rm /etc/nginx/conf.d/default.conf  ### BREAKS COMPLETELY SO I UNCOMMENT

COPY nginx/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker -compose-prod.yml 

version: "3.7"
services:
  react-prod:
    container_name: react-prod
    build:
      context: .
      dockerfile:
        dockerfile-prod
    ports:
      - "3000:80"

nginx .conf 

worker_processes auto;

events {
    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
    worker_connections 8000;
    # Tells the worker to accept multiple connections at a time
    multi_accept on;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # Sets the path, format, and configuration for a buffered log write
    log_format compression '$remote_addr - $remote_user [$time_local] '
        '"$request" $status $upstream_addr '
        '"$http_referer" "$http_user_agent"'; 

    server {
        # listen on port 80
        listen 80;
        # save logs here
        access_log /var/log/nginx/access.log compression;

         # --- I AM THINKING THIS IS THE ISSUE HERE
        root /var/www;

        index index.html index.htm;

        location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to redirecting to index.html
            try_files $uri $uri/ /index.html;
        }

        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }

        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }

        location ~ ^.+\..+$ {
            try_files $uri =404;
        }
    }
}

1 Ответ

0 голосов
/ 20 января 2020

Я думаю, что проблема может быть здесь: 

location ~ ^.+\..+$ {
        try_files $uri =404;
}

Я не эксперт nginx, но мне кажется, что он проверяет, существует ли соответствующий файл для соответствующего запрошенного местоположения, и если нет, он возвращает 404.
Это будет плохо для приложения реагировать, так как это спа, и все запросы должны быть перенаправлены в index. html (кроме js и медиа-файлов). Я бы попробовал закомментировать это и увидеть эффект.
Если это не сработает, попробуйте вместо этого =404 поставить index.html

Отдых выглядит хорошо.

...