plantbook-app

Создан на основе готовых шаблонов для Реакт приложения

https://create-react-app.dev/docs/getting-started/

• npx create-react-app plantbook

Создаём новое React-приложение для Plantbook

• Масштабирование до большого количества файлов и компонентов;
• Использование сторонних библиотек из npm;
• Раннее обнаружение распространённых ошибок;
• Отражение изменений CSS и JS на лету в процессе разработки;
• Оптимизация кода для продакшена.

Начинаем данный проект, используя Create React App

npx create-react-app plantbook

Все остальные манипуляции будут в plantbook

cd plantbook

Данный шаблон является стартовым, поэтому добавляем в него все необходтмые изменения:

• в папку src добавляем папку components, в ней будут находиться все компоненты нашего одностроничного приложения
• в папку src добавляем папку styles, в ней будут находиться стили нашего приложения
• в корне создали файл Dockerfile

# Stage 1 - the build process
FROM node:14-slim as build-deps
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build

# Stage 2 - the production environment
FROM nginx:1.12-alpine
COPY --from=build-deps /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

---

Docker-compose up

# Файл docker-compose должен начинаться с тега версии.
# Мы используем "3" так как это - самая свежая версия на момент написания этого кода.

version: "3"

# Следует учитывать, что docker-composes работает с сервисами.
# 1 сервис = 1 контейнер.
# Сервисом может быть клиент, сервер, сервер баз данных...
# Раздел, в котором будут описаны сервисы, начинается с 'services'.

services:

  # Как уже было сказано, мы собираемся создать клиентское и серверное приложения.
  # Это означает, что нам нужно два сервиса.
  # Первый сервис (контейнер): сервер.
  # Назвать его можно так, как нужно разработчику.
  # Понятное название сервиса помогает определить его роль.
  # Здесь мы, для именования соответствующего сервиса, используем ключевое слово 'server'.

  server:
 
    # Ключевое слово "build" позволяет задать
    # путь к файлу Dockerfile, который нужно использовать для создания образа,
    # который позволит запустить сервис.
    # Здесь 'server/' соответствует пути к папке сервера,
    # которая содержит соответствующий Dockerfile.

    build: frontend/

    # Команда, которую нужно запустить после создания образа.
    # Следующая команда означает запуск "python ./server.py".

    # command: python ./server.py

    # Вспомните о том, что в качестве порта в 'server/server.py' указан порт 1234.
    # Если мы хотим обратиться к серверу с нашего компьютера (находясь за пределами контейнера),
    # мы должны организовать перенаправление этого порта на порт компьютера.
    # Сделать это нам поможет ключевое слово 'ports'.
    # При его использовании применяется следующая конструкция: [порт компьютера]:[порт контейнера]
    # В нашем случае нужно использовать порт компьютера 1234 и организовать его связь с портом
    # 1234 контейнера (так как именно на этот порт сервер 
    # ожидает поступления запросов).

    ports:
      - 80:80

  # Второй сервис (контейнер): клиент.
  # Этот сервис назван 'client'.

  # client:
  #   # Здесь 'client/ соответствует пути к папке, которая содержит
  #   # файл Dockerfile для клиентской части системы.

  #   build: client/

  #   # Команда, которую нужно запустить после создания образа.
  #   # Следующая команда означает запуск "python ./client.py".
 
  #   # command: python ./client.py

  #   # Ключевое слово 'network_mode' используется для описания типа сети.
  #   # Тут мы указываем то, что контейнер может обращаться к 'localhost' компьютера.

  #   network_mode: host

  #   # Ключевое слово 'depends_on' позволяет указывать, должен ли сервис,
  #   # прежде чем запуститься, ждать, когда будут готовы к работе другие сервисы.
  #   # Нам нужно, чтобы сервис 'client' дождался бы готовности к работе сервиса 'server'.
 
  #   depends_on:
  #     - frontend

  #   Данный материал по docker-compose я взял с habr, спасибо автору! Вот ссылка https://habr.com/ru/company/ruvds/blog/450312/

Запустить

docker-compose up

http://localhost:80/