Установка и деплой ReactJS в Docker

Комментарии (40)

Arunas

2020-04-13 15:48

Спасибо!

fedot

2020-04-13 16:46

Спасибо.

Denis

2020-04-14 20:52

Добрый день. А можете как - то рассказать принципиальные отличия React от Vue или Angular? Почему в этом проекте используется именно React? В интернете мнений по этому поводу много, но все же хочется и Ваше услышать. Чем React лучше?

Дмитрий Елисеев

2020-04-18 15:31

Почему используем React рассказали в конце второго эпизода. А именно что React является не фреймворком, а только минимальной библиотекой для построения интерфейсов. Angular из себя предоставляет большой полноценный фреймворк. А в Vue немного больше магии. React архитектурно проще.

Александр

2020-05-15 11:40

Здравствуйте, будем ли рассматривать TypeScript ? Очень бы хотелось )

Дмитрий Елисеев

2020-05-19 14:56

Хорошо, добавим.

Александр

2020-05-19 14:58

Спасибо.

elmut

2020-05-19 20:52

https://blog.codeexpertslearning.com.br/dockerizando-uma-aplica%C3%A7%C3%A3o-react-js-f6a22e93bc5d

Роман

2020-05-21 17:51

Добрый вечер Дмитрий! Дошёл до этого этапа. Решил запустить тесты бэкенда с покрытием, выдало ошибку:

https://i.imgur.com/jzX6vP1.png

Дмитрий Елисеев

2020-05-22 07:23

Видимо в PHPUnit 9.1 нужно указывать в @covers класс с неймспейсом.

Konstantin

2020-07-29 12:00

Это только для случая с React yarn start запускается на 3000 порту? Я поставил Vue, пишет 404.

[error] 7#7: *5 "/etc/nginx/html/index.html" is not found (2: No such file or directory), client: 172.20.0.1, server: , request: "GET / HTTP/1.1", host: "localhost:8090"

Дмитрий Елисеев

2020-08-02 10:22

Вроде тоже должен быть на 3000.

Ruslan

2021-03-22 21:42

Как лучше пройти курс? Сейчас устанавливается дефолтом 17я версия реакта и в index.js уже не serviceWorker , а reportWebVitals, уже появились сложности, к примеру не обновляется страница при изменении css. Будет ли в дальнейших видео обновление, или лучше взять ваш package.json?

Еще какая последовательность была выхода этих уроков и "Что есть React: Пишем свой UI-фреймворк"? Мне показалось, что они связаны.

Урок как всегда супер. Спасибо.

Дмитрий Елисеев

2021-03-23 05:36

Как лучше пройти курс?

Если делаете реальный проект, то ставить свежие версии и адаптироваться под них.

Если же хотите просто повторить материал, то тогда при установке указывать именно версии пакетов как у нас в composer.json и package.json. Потом мы со временем всё постепенно обновляем.

Дмитрий Елисеев

2021-03-23 05:37

Мне показалось, что они связаны

Да, перед работой с React здесь мы специально отвлеклись на «Что есть React».

Ruslan

2021-03-23 12:40

Дмитрий, хотел уточнить : - мы специально отвлеклись на «Что есть React». Т.е. после этого видео была запущена серия «Что есть React» ?

Дмитрий Елисеев

2021-03-23 12:46

После 43-го.

Ruslan

2021-03-23 13:19

Спасибо.

Ruslan

2021-03-24 13:11

Не работает лайфРелоад. (commit Added frontend ready flag 27.03.2020) Смотрю логи ошибок нет, контейнеры запущены. В браузере:

[HMR] Waiting for update signal from WDS...

и предупреждение:

scheduler.development.js:298 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

Я пробовал, как с новым реактом , так и со старым.

Еще странная вещь, не работает анимация - лого не вращается.
Подскажите куда копать?

Дмитрий Елисеев

2021-04-02 11:39

Попробовал сейчас на свежем коде из последнего коммита. Релоад работает без проблем. Может yarn upgrade когда-то помог.

Ruslan

2021-04-05 13:12

Для информации , может кому пригодится.

Мне удалось победить данную проблему, но пришлось сделать yarn eject и установить руками:

  watchOptions: {
    aggregateTimeout: 200,
    poll: true,
  }

без этого webpack не видит изменений в файлах, если их меняnm на хосте (в IDE) .

Ruslan

2021-04-13 11:18

На следующем уроке всё ломается :) Пришлось сделать такой костыль:

frontend-yarn-install:
	docker-compose run --rm frontend-node-cli yarn install
	docker-compose run --rm frontend-node-cli sed -i '/poll: true,/d' node_modules/react-scripts/config/webpackDevServer.config.js
	docker-compose run --rm frontend-node-cli sed -i '/watchOptions: {/a poll: true,' node_modules/react-scripts/config/webpackDevServer.config.js

Алексей

2023-02-09 19:18

У меня заработало так в default.conf и frontend.conf: location /ws вместо location /sockjs-node И главное в docker-compose.yml

  frontend-node:
      ...
      environment:
         - WDS_SOCKET_PORT=0

Ник

2024-04-22 14:07

Спасибо, тоже сработало, а где об этом нашли? что-то в доках node и nginx не вижу..

Ruslan

2021-04-02 10:11

Хочу дополнить. Если подключится к контейнеру на прямую и редактировать код, то сообщение об изменениях не отправляются в браузер. Сборка Реакта как бут-то их не видит.

Руслан

2021-08-08 11:46

Доброе время суток всем! Кто может подсказать как просматривать консольные ошибки hot_reload сборки во фронтенд контейнере? Спасибо!

Дмитрий Елисеев

2021-08-16 17:52

Все сообщения в консоли можно смотреть в реальном времени через:

docker-compose logs -f frontend-node

Руслан

2021-08-17 21:10

Отлично, то что нужно, спасибо!

slo_nik

2021-10-05 13:31

Добрый день.

Вместо React установли в проект Angular. При "Build" в Jenkins получаю такие ошибки

[0m[91mCompiling @ngx-translate/core : es2015 as esm2015
16:15:58  [0m[91mCompiling @ngx-translate/http-loader : es2015 as esm2015
16:20:50  [0m[91m
16:20:50  <--- Last few GCs --->
16:20:50  
16:20:50  [29:0x55a985712ac0]   354812 ms: Scavenge (reduce) 487.7 (494.7) -> 487.1 (495.7) MB, 14.9 / 0.0 ms  (average mu = 0.314, current mu = 0.317) allocation failure 
16:20:50  [29:0x55a985712ac0]   354850 ms: Scavenge (reduce) 487.7 (494.7) -> 487.3 (495.7) MB, 5.0 / 0.0 ms  (average mu = 0.314, current mu = 0.317) allocation failure 
16:20:50  [29:0x55a985712ac0]   354912 ms: Scavenge (reduce) 488.1 (497.7) -> 487.5 (498.2) MB, 20.9 / 0.0 ms  (average mu = 0.314, current mu = 0.317) allocation failure 
16:20:50  
16:20:50  
16:20:50  <--- JS stacktrace --->
16:20:50  
16:20:50  FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
16:21:06  [0minfo Visit yarnpkg.com/en/docs/cli/run for documentation about this command.
16:21:06  [91merror Command failed with signal "SIGABRT".
16:21:06  [0mThe command '/bin/sh -c yarn build' returned a non-zero code: 1
16:21:06  make: *** [Makefile:121: prod-build] Error 1

Это связано с нехваткой памяти на сервере или в самой сборке проекта?

Дмитрий Елисеев

2021-10-05 13:37

Возможно

slo_nik

2021-10-05 13:40

Пока нашёл вот такие рекомендации

$env:NODE_OPTIONS="--max-old-space-size=4096" ; ng build

Как я понимаю тут выделяется дополнительная память для node.js. Но есле на сервере всего 1gb это не поможет?

slo_nik

2021-11-15 14:24

Добрый день, Дмитрий.

Пытаюсь поставить React с версией node:17-alpine.

В самом начала получаю ошибку

sh: create-react-app: Permission denied

Не могу понять, где именно нужно поменять права доступа?

Полный вывод в консоли

Creating project_poisk-node-cli_run ... done
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
sh: create-react-app: Permission denied
npm notice
npm notice New patch version of npm available! 8.1.2 -> 8.1.3
npm notice
ERROR: 127

Если ставить с версией node:13-alpine или node:14-alpine ошибки нет, проект устанавливается.

Дмитрий Елисеев

2021-11-26 08:02

Попробовать запустить через npx:

docker-composer run --rm poisk-node-cli npx create-react-app app

slo_nik

2021-11-28 19:02

Добрый вечер.

Я так и запускал и получал ошибку прав доступа.

В общем проблема решилась добавлением флага --user node

 docker-composer run --rm --user node poisk-node-cli npx create-react-app app

Как я понял это в новых версиях требуется, node > v.14

Но до конца проблему не решило. Сначала просто в не запускался контейнер. Заглянул в логи контейнера с node:17-alpine, там такая ошибка:

 react-scripts start
 node:internal/modules/cjs/loader:488
   throw e;
   ^
 Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /app/node_modules/postcss-safe-parser/node_modules/postcss/package.json

Удалил yarn.lock и node_modules, пересобрал образ, появилась следующая ошибка:

Error: error:0308010C:digital envelope routines::unsupported

Окончательное решение проблемы это создания образа из node:16-alpine, всё работает как положено.

Можно дальше изучать Ваши уроки.)

Герман

2021-12-07 09:40

До этого урока я упорно сидел на винде ))) Но т.к. в винде на примонтированных volume-ах не кидаются события файловой системы, соответственно не будет нормально работать node сервер отслеживающий изменения кода. А билдить каждый раз долго. Придется переползать на Линукс.

Руслан

2022-04-28 14:18

https://docs.microsoft.com/en-us/windows/wsl/install

Олег

2022-09-11 08:33

Возможно, поможет watchOptions в webpack https://webpack.js.org/configuration/watch/#watchoptions

Михаил

2023-02-07 09:38

Почему выбрали yarn в качестве пакетного менеджера? Чем плох npm?

Дмитрий Елисеев

2023-02-07 14:24

Лично встретил проблему, что на компьютере с Ubuntu+Docker и ноутбуке с MacOS+Docker в том же проекте NPM генерировал разные несовместимые package-lock.json файлы. В нём команда npm install может в любое время изменять этот файл. А для запуска на ссборочных серверах авторы сделали отдельную команду npm ci.

С Yarn таких неожиданностей нет. Там yarn.lock работает идеально как composer.lock

Анна

2023-08-16 07:47

Спасибо за выпуск, Дмитрий!!

Зарегистрируйтесь или войдите чтобы оставить комментарий

Или войти через:

Yandex

MailRu

GitHub

Google

Установка и деплой React с Docker