React Redux State запускается при изменении маршрута с помощью Nginx - PullRequest
Новая
       84

React Redux State запускается при изменении маршрута с помощью Nginx

4 голосов
/ 28 мая 2020

Я создаю приложение с React в качестве интерфейса, Postgres как db, Express.js как api и Nginx для управления маршрутизацией. Мое приложение React использует React-Router и Redux для управления состоянием. Я обнаружил, что мое состояние Redux сбрасывалось при изменении маршрута. Я предполагаю, что это потому, что я использую Ngnix для маршрутизации запросов, и реакция снова запускается с самого начала и без сохранения состояния.

Я видел примеры, предлагающие использовать Nginx и React в тот же образ Docker, состоящий из двух этапов - сборка для реакции и копирование сборки в папку изображений Nginx на втором этапе. Затем используйте это изображение, чтобы определить одну службу в docker -compose.

Как мы будем справляться с этим, если у нас есть служба API также в маршрутизации (которая является отдельным изображением Docker)? Есть ли лучший способ сделать это (производственный уровень)?

Nginx conf файл 

upstream client {
    server client:3000;  
}

upstream api {
    server api:5000;  
}

server {
    listen 80;

    location / {
        proxy_pass  http://client;
    }

    location /sockjs-node {
        proxy_pass  http://client;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /api/ {
        rewrite /api/(.*) /$1 break;
        proxy_pass  http://api;
    }
}

docker -compose .yaml 

version: "3"
services:
  postgres:
    image: "postgres:latest"
    environment:
      - POSTGRES_PASSWORD=postgres_password
  api:
    build:
      dockerfile: DockerFile.dev
      context: ./server
    volumes:
      - /app/node_modules
      - ./server:/app
    environment:
      - PGUSER=postgres
      - PGHOST=postgres
      - PGDATABASE=postgres
      - PGPASSWORD=postgres_password
      - PGPORT=5432
    depends_on:
      - postgres
  client:
    stdin_open: true
    build:
      dockerfile: DockerFile.dev
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app
    depends_on:
      - api
  nginx:
    restart: always
    build:
      dockerfile: DockerFile.dev
      context: ./nginx
    ports:
      - "3050:80"
    depends_on:
      - client

1 Ответ

3 голосов
/ 05 июня 2020

Есть много способов go об этом, и это действительно зависит от того, что вы ищете. Если вы говорите, что хотите качество продукции, тогда вам не обязательно размещать оба API и обслуживать файлы stati c на одном и том же сервере.

Пройдя по этому пути, вы либо получите to:

  • Используйте nginx для разделения запросов /api и прокси для вашего Express. js проекта, работающего на другом порту
  • Забудьте о nginx и используйте Express. js, чтобы также обслуживать файлы stati c для любого запроса, который не начинается с /api (но Nginx намного лучше обрабатывает файлы stati c, а вы этого не делаете хотите занять ваш Node.js процесс)

Вы обнаружите, что многие компании размещают свои API на отдельном субдомене, например api.twitter.com.

Если вы go о Таким образом, у вас будет гораздо больше гибкости в масштабировании, безопасности, обслуживании и т. д. c. Если вы продолжите разрабатывать все на одном сервере, вам придется гораздо раньше выполнять балансировку нагрузки и иметь дело с большим количеством прокси для любых других сервисов, которые вам нужны.

Что касается вашей проблемы с Redux, вы должны выполнять нормальное перенаправление куда-то, а не с использованием React-Router, потому что React-Router использует объект JavaScript history для внесения изменений в URL-путь и еще много чего, что никогда не должно приводить к очистке вашего состояния Redux.

Если вы хотите перемещаться в другом месте и не использовать элемент Link, вы также можете просто history.push("/anypathyouwant");

...