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

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

  • 00:00:24 Что такое ReactJS
  • 00:01:40 Установщик Creat React App
  • 00:04:05 Подключение NodeJS через Docker
  • 00:05:39 Установка проекта с React
  • 00:08:19 Обзор файлов проекта
  • 00:09:39 Тюнинг gitignore и dockerignore
  • 00:10:46 Удаление команды eject
  • 00:11:45 Разделение dependencies
  • 00:12:34 Очистка Service Worker
  • 00:13:32 Файлы JSX
  • 00:14:59 Добавление frontend-init в Makefile
  • 00:16:48 Проверка работы
  • 00:19:46 Разделение конфигураций Nginx
  • 00:22:44 Запуск девелоперского node-сервера
  • 00:23:54 Проксирование из Nginx на node-сервер
  • 00:25:43 Проверка работы
  • 00:27:53 Отложенный запуск сервера по готовности
  • 00:30:40 Добавление depends_on
  • 00:31:24 Проверка работы make init
  • 00:32:57 Перенос верстки на React
  • 00:34:25 Создание production-образа Docker для деплоя
  • 00:38:06 Добавление кэширования ресурсов в браузере
  • 00:40:40 Вынос компонента Welcome
  • 00:43:20 Использование локальных стилей компонентов
Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (40)
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
Ответить
Алексей

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

  frontend-node:
      ...
      environment:
         - WDS_SOCKET_PORT=0
Ответить
Ник

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

Ответить
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 это не поможет?

Ответить
slo_nik

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

Пытаюсь поставить 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 ошибки нет, проект устанавливается.

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

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

docker-composer run --rm poisk-node-cli npx create-react-app app
Ответить
slo_nik

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

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

В общем проблема решилась добавлением флага --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, всё работает как положено.

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

Ответить
Герман

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

Ответить
Михаил

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

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

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

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

Ответить
Анна

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

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

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

Yandex
MailRu
GitHub
Google