Как создать докернизированную среду разработки для ReactJS

Question

Я разработал приложение реагирования через включающий live-сервер и развернул его.В качестве прокси-сервера я использую nginx, который также предоставляет статические и мультимедийные файлы для внешнего и внешнего интерфейса.

Специально для тестирования подачи статических и мультимедийных файлов я хотел бы иметь докеризованную локальную среду тестирования.

Вот моя проблема: В моей тестовой среде я не хочу создавать новую сборку каждый раз, когда меняю код (npm run build - для create-реагировать-приложение).В идеале у меня была бы возможность горячей перезагрузки через крепление.

Это будет означать, что мне придется обслуживать сервер разработки через nginx.Это вообще возможно?Я грызу ногти над этой проблемой в течение нескольких дней, ищу традиционный способ сделать это.

Answer 1

Это на самом деле не так уж и плохо, просто используйте конфигурацию nginx, как это:

events {}

# assuming you want to serve your app on localhost:8080
# and assuming your webpack dev server runs on port 3000
http {
    include /etc/nginx/mime.types;
    server {
        # assuming you want to serve the app on localhost:8080
        listen 8080;
        client_max_body_size 50m;

        # webpack dev server
        location / {
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;
            # use your port for your webpack dev server
            proxy_pass http://host.docker.internal:3000/;
        }

        # this is specifically needed for hot reload with webpack dev server
        location /sockjs-node {
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;

            # 'host.docker.internal' is a docker dns record for your host machine's localhost,
            # and '3000' should be the port of your webpack dev server
            proxy_pass http://host.docker.internal:3000;

            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
   }

    access_log /etc/nginx/access.log;
    error_log /etc/nginx/error.log debug;
}

И запустите nginx с ./nginx.sh, который выглядит следующим образом:

#!/usr/bin/env bash

# path to your app's build directory
APP_BUILD_DIR=/path/to/my-app/build

# path of dir containing your nginx config
NGINX_CONF_DIR=$(pwd)

# name of your nginx conf file, relative to NGINX_CONF_DIR
NGINX_CONF_FILE=nginx.conf

# port at which nginx is serving your app
PORT=8080

# docker run docs: https://docs.docker.com/engine/reference/run/
# this will run an nginx container named 'nginx' as a daemon,
# and will mount NGINX_CONF_DIR in the container
docker run -d --name nginx \
  -v=$NGINX_CONF_DIR:/etc/nginx \
  -v=$APP_BUILD_DIR:/opt/base/my-app \
  -p=$PORT:$PORT nginx \
  nginx -c /etc/nginx/$NGINX_CONF_FILE -g "daemon off;"

А также файл mime.types в этом каталоге, который выглядит как этот .

Итак, ваша структура каталогов должна выглядеть следующим образом:

dir/
-- nginx.sh
-- nginx.conf
-- mime.types
-- ...

Я предполагаю, что вывы запускаете свой веб-сервер разработки на вашем компьютере, а не в док-контейнере?По моему опыту, я бы порекомендовал это честно.npm (или yarn) выполняет свою работу настолько хорошо, что я не нашел необходимости запускать свои приложения React в контейнере локально, даже если я обслуживаю их через контейнер nginx.

Бонус: вот конфигурация nginx, если вы хотите запустить то же приложение, но обслуживаете статический пакет вместо сервера webpack:

events {}

http {
    include /etc/nginx/mime.types;
    server {
        # assuming you want to serve the app on localhost:8080
        listen 8080;
        client_max_body_size 50m;

        location / {
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;
            root /opt/base/my-app;
            try_files $uri /index.html;
        }

        # matches things like http://localhost:8080/build/static/js/2.d63c51de.chunk.js
        location /build/static/ {
            alias /opt/base/my-app/static/;
            try_files $uri $uri/;
        }
   }

    access_log /etc/nginx/access.log;
    error_log /etc/nginx/error.log debug;
}

Ссылка: это сообщение SO

Answer 2

Докеризация сервера разработки с помощью HMR не является тривиальной задачей.

Даже предварительно сконфигурированные проекты (с HMR и docker-ready), вероятно, не будут работать с самого начала без дополнительных настроек. F.E. HMR ожидает путь localhost, в то время как приложение может работать с другим IP / портом (проблемы с CORS). Некоторые изменения могут быть сложными - исправление пакетов на лету - во время процессов сборки.

Попробуйте запустить готовый проект, прежде чем пытаться настроить конфигурацию своей мечты. Вы всегда можете запустить разные серверы для разных частей (на разных портах).

Я бы начал с apollo-universal-starter-kit - он содержит части api / backend для node.js, но может работать с внешней (настраиваемой).

Другие решения для реагирования на HMR можно найти в Docker Hub. Попробуйте, получите вдохновение и знания ... веселитесь.