Рубрики
Uncategorized

Containeriales App App с Docker для производства

Создать новое приложение RACT Это требуется только в том случае, если вы начинаете с нуля и не … помечены с помощью React, Docker, DevOps, Nowizers.

Создать новое приложение RACT

Это требуется только в том случае, если вы начинаете с нуля и не имеете существующего кода/приложения, который вы хотели бы контейнеризировать.

NPX Create-ract-app My-App

Использование «NPX» гарантирует, что вы всегда используете последнюю версию «Create-React-App».

Докер — очень короткий обзор

Docker помогает нам сделать контейнерные приложения. Что это значит, что мы создаем один пакет, который не только содержит код нашего приложения, но и все необходимые библиотеки, программное обеспечение, конфигурации и т. Д.

Ключевые термины

Я не собираюсь записать фактические определения, скорее я постараюсь объяснить их с помощью примеров или аналогов.

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

Контейнер: это экземпляр изображения, как объект в Оопе

Объем: изображения только для чтения, чтобы сохранить данные, которые вам необходимо использовать. В простейших терминах вы делитесь папкой (на хост-ОС) с изображением докера для чтения/записи данных из/к нему.

DockerFile: Здесь вы определяете, что будет внутри изображения, вы пытаетесь построить. Как ОС (E.g Ubuntu 16), Softwares (E.G узел) и т. Д.

Теги: пока просто считайте его в буквальном выражении.

Установить Docker

Скачать и установить Docker Отказ Возможно, вам придется создать бесплатную учетную запись Docker Chib.

Файлы конфигурации

Нам нужно создать конф. Файлы для:

  1. Nginx (наш веб-сервер)
  2. DockerFile (чтобы построить изображение докера)
Nginx.

Внутри вашего приложения (My-App) каталог создайте другой каталог и назовите его nginx Отказ Внутри каталога NGINX вы только что создали, создайте новый файл и назовите его nginx.conf. . Вы также можете использовать для следующих команд (одностороннее, чтобы достичь его).

cd my-app
mkdir nginx
cd nginx
touch nginx.conf

Отредактируйте файл «NGINX.conf», который вы только что создали в любом редакторе, который вы хотите, и добавьте следующий код. Это нечего бояться, это просто стандартный блок Nginx Server — даже если вы не понимаете одну строку в нем, это просто хорошо. Гист того, что мы делаем, это то, что мы говорим Nginx прослушивать порта 80, перенаправляйте каждый запрос на «index.html» и корневой root is «/usr/share/nginx/html» (каталог, где подать от) Отказ

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;

    # to redirect all the requests to index.html, 
    # useful when you are using react-router

    try_files $uri /index.html; 
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}
Но зачем нам нужен nginx ???

Файлы сборки RiveDJS являются просто статическими (HTML, CSS, JS и т. Д.) Файлы, и вам нужен какой-то веб-сервер производственно-класса для обслуживания ваших статических файлов, таких как Nginx, Apache, OpenLiteSpeed и т. Д.

Dockerfile

Внутри вашего каталога приложения Создайте новый файл и назовите его как Dockerfile.Prod Отказ Внутри этого файла напишите следующие строки кода.

# stage1 - build react app first 
FROM node:12.16.1-alpine3.9 as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/
COPY ./yarn.lock /app/
RUN yarn --silent
COPY . /app
RUN yarn build

# stage 2 - build the final image and copy the react build files
FROM nginx:1.17.8-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Создайте новый файл и назовите его как .Dockerignore и добавить Node_Modules внутри него. Это просто чтобы сказать Docker игнорировать Node_Modules каталог.

Так что структура вашего каталога должна быть таковой

my-app
│   Dockerfile.prod
│   .dockerignore    
│
└───nginx
      nginx.conf

Шаг за шагом Объяснение:

Этап 1

  1. Мы будем использовать многоступенчатую сборку докера. Это новая функция, представленная в V17 Docker.
  2. От рассказывает, какое основное изображение использовать. Вы можете проверить базовые изображения на Docker Hub Отказ Вам всегда нужно сначала указать базовое изображение.
  3. Workdir используется для уточнения рабочего каталога (внутри изображения, а не ваш хост ОС)
  4. ЭНВ путь Добавляет Node_Modules на пути
  5. Скопировать используется для копирования package.json из текущего каталога (на хосте) в рабочий каталог (на изображении).
  6. Беги используется для запуска команды, здесь мы хотим запустить Пряжа с --silent Флаг, чтобы выключить журнал установки. Возможно, вы не хотите использовать этот флаг, так как он также надеется на ошибки.
  7. Скопировать снова работает, чтобы скопировать весь код из хост-ОС для рабочего каталога на изображении
  8. Наконец, бегите пряжа построить Чтобы построить наше приложение

Сначала мы скопировали Package.json сначала установить зависимости и не скопировали Node_Modules в изображение. Это использует отличную систему кэширования Docker и сократить время сборки.

Этап 2

На первом этапе мы скопировали Package.json в рабочий каталог, установил зависимости, скопировал наш код и построил окончательные статические файлы. На этапе 2 мы:

  1. Использование Nginx как базовое изображение. В «Nginx: 1.17.8-Alpine», «Nginx» — это изображение, а «1.17.8-Alpine» — это тег. Как будто мы говорим, какая конкретная версия/выпуск базового изображения Nginx мы будем использовать.
  2. Мы хотим скопировать файлы сборки с Stage 1 до «/usr/share/nginx/html». Это каталог по умолчанию, в котором подают nginx. Таким образом, мы копируем наши файлы сборки в этот каталог.
  3. Удалите файл конфигурации NGINX по умолчанию на «/etc/nginx/Conf.d/default.conf»
  4. Скопируйте файл конфигурации, который мы создали в Docker Image
  5. Выставить Используется для выставления порта (80 — порт HTTP по умолчанию, вот что мы хотим, чтобы наш Nginx послушать). Одна ловушка здесь заключается в том, что он на самом деле не выставляет порт, скорее это только для документации. Как и новый разработчик, посмотрите на DockerFile, и он знает, какой порт (ы) выставляют при запуске изображения.
  6. Наконец, мы хотим запустить Nginx на переднем плане, а не как демон (то есть на заднем плане).

Оба CMD и Беги используются для запуска команд. Разница в том, что Беги Шаг застройки изображения, тогда как CMD Команда контейнера выполняется по умолчанию при запуске созданного изображения (в качестве контейнера).

Построить изображение

Пришло время создавать изображение из DockerFile, который мы создали выше. Убедитесь, что вы находитесь в каталоге приложений на корневом уровне. Запустите следующую команду, чтобы построить и пометить свое изображение.

Docker Build -f Dockerfile.Prod -T My-First-изображение: последние.

  1. -f используется для указания имени файла. Если вы не укажете это, то вы должны переименовать свой файл на Dockerfile — Это то, что команда сборки ищет в текущем каталоге по умолчанию.
  2. -t используется для помещения изображения. Вы можете пометить ваше изображение, как вы хотите (например, V1.0.0, V2.0.0, производство, последние и т. Д.)
  3. . В конце важно, и его следует добавить, чтобы сказать Docker использовать текущий каталог.
Запустите свое изображение в качестве контейнера (создать действие вашего изображения)

Последний шаг — запускать ваше изображение (как контейнер) Docker Run -it -p 80:80 --rm My-First-изображение: последний

  1. -Это для интерактивности
  2. разоблачить и связывать порты. Здесь мы выставляем порт 80 контейнера и связываем его с портом 80 хост-машины. Первый из вашей машины (хост-ОС), а второй — это контейнер для Docker Image. Например, если вы используете -P 1234: 80 Тогда вам нужно будет пойти на http://localhost: 1234 на вашем браузере.
  3. --rm Удалить контейнер Как только он остановлен
  4. My-First-изображение: последние Имя: тег изображения, которую мы хотим запустить контейнер

Теперь откройте свой браузер и перейдите в http://localhost И вы увидите ваше приложение, обслуживаемое от докера.

Экстрас

  1. Беги Docker Images или Docker Image Ls. Чтобы увидеть список всех изображений на вашем компьютере
  2. Беги Докерный контейнер Ls. или Docker PS Чтобы увидеть все беговые контейнеры
  3. Беги Docker System Bruny Чтобы обрезать контейнеры (будьте осторожны при использовании этой команды, прочитайте документы для параметров, прежде чем использовать их)

Следующий: Разверните свое приложение React в ECS

Давайте подключимся:

LinkedIn: https://www.linkedin.com/in/mubbashir10/

Twitter: https://twitter.com/mubbashir100.

Оригинал: «https://dev.to/mubbashir10/containerize-react-app-with-docker-for-production-572b»