Установка и деплой 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 - Использование локальных стилей компонентов
Скрытый контент
Комментарии (23)
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

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

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

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

Google
GitHub
Yandex
MailRu