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

Создание проекта с ReactJS. Подключение и сборка пакетов через NodeJS. Запуск девелоперского сервера с автообновлением UI. Деплой фронтенда через Docker.

  • 00:00:23 - Что такое ReactJS
  • 00:03:22 - Установщик Creat React App
  • 00:04:04 - Подключение NodeJS через Docker
  • 00:05:37 - Установка проекта с React
  • 00:09:00 - Обзор файлов проекта
  • 00:10:20 - Тюнинг gitignore и dockerignore
  • 00:11:25 - Удаление команды eject
  • 00:12:30 - Разделение dependencies
  • 00:13:18 - Очистка Service Worker
  • 00:14:18 - Файлы JSX
  • 00:15:44 - Добавление frontend-init в Makefile
  • 00:17:31 - Проверка работы
  • 00:20:34 - Разделение конфигураций Nginx
  • 00:23:29 - Запуск девелоперского node-сервера
  • 00:24:38 - Проксирование из Nginx на node-сервер
  • 00:26:25 - Проверка работы
  • 00:28:36 - Отложенный запуск сервера по готовности
  • 00:31:29 - Добавление depends_on
  • 00:32:13 - Проверка работы make init
  • 00:33:42 - Перенос верстки на React
  • 00:35:11 - Создание production-образа Docker для деплоя
  • 00:38:51 - Добавление кэширования ресурсов в браузере
  • 00:41:24 - Вынос компонента Welcome
  • 00:44:03 - Использование локальных стилей компонентов
Скрытый контент
Комментарии (29)
Arunas

Спасибо!

Ответить
fedot

Спасибо.

Ответить
Denis

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

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

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

Ответить
Александр

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

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

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

Ответить
Александр

Спасибо.

Ответить
Роман

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

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

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

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

Ответить
Konstantin

Это только для случая с 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"
Ответить
Дмитрий Елисеев

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

Ответить
Ruslan

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

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

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

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

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

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

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

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

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

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

Ответить
Ruslan

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

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

После 43-го.

Ответить
Ruslan

Спасибо.

Ответить
Ruslan

Не работает лайфРелоад. (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.

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

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

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

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

Ответить
Ruslan

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

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

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

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

Ответить
Ruslan

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

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
Ответить
Ruslan

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

Ответить
Руслан

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

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

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

docker-compose logs -f frontend-node
Ответить
Руслан

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

Ответить
slo_nik

Добрый день.

Вместо 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

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

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

Возможно

Ответить
slo_nik

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

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

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

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

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

Google
GitHub
Yandex
MailRu