Docker — обзор

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

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

Образ — полный пакет, содержащий все (код приложения, необходимые библиотеки, программные зависимости, конфигурации и т. д.), необходимый для запуска вашего приложения (точно так же, как класс в ООП).

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

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

Dockerfile — чертежи образа. Здесь вы определяете, что будет внутри изображения, которое вы пытаетесь создать. Например, ОС (например, Ubuntu 16), программное обеспечение (например, Node) и т. д.

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

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

Шаг 1: Установите Докер

Скачать и установить докер

Шаг 2: Подготовьте файлы конфигурации

Вам необходимо создать два файла конфигурации для:

  1. Nginx (веб-сервер)
  2. Docker (для создания образа Docker)

Nginx Файлы сборки React — это просто статические (HTML, CSS, JS и т. д.) файлы, и вам нужен веб-сервер для обслуживания ваших статических файлов, таких как Nginx, Apache, OpenLiteSpeed ​​и т. д. Внутри вашего приложения React , создайте другой каталог и назовите его nginx. Внутри каталога nginx (вы только что создали) создайте новый файл и назовите его nginx.conf. Вы также можете использовать следующие команды (одну за другой, чтобы достичь этого).

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

Отредактируйте файл «nginx.conf» и добавьте в него следующий код.

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 прослушивать порт 80, перенаправлять каждый запрос на «index.html», а корнем является «/usr/share/nginx/html» (каталог, откуда обслуживаться) .

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
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. Используйте многоэтапную сборку Docker (поддерживается в Docker v17+).
  2. FROM указывает, какой базовый образ использовать (обязательно), вы можете посмотреть базовые образы в Docker Hub.
  3. WORKDIR используется для указания рабочего каталога (внутри образа, а не вашей операционной системы)
  4. ENV PATH добавляет node_modules в PATH
  5. COPY используется для копирования package.json из текущего каталога (на хосте) в рабочий каталог (в образе).
  6. RUN используется для запуска команды, здесь мы хотим запустить Yarn для установки зависимостей, упомянутых в package.json
  7. COPY запускается снова, чтобы скопировать весь код из хост-ОС в рабочий каталог в образе.
  8. Запустите yarn build, чтобы собрать наше приложение.

Сначала вы копируете package.json и устанавливаете зависимости, а не копируете node_modules в образ. Это позволяет использовать превосходную систему кэширования Docker и сократить время сборки.

Этап 2

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

  1. Используйте Nginx в качестве базового изображения. (nginx — это изображение, а 1.17.8-alpine — это тег. Это похоже на то, как вы говорите, какую конкретную версию/выпуск базового образа Nginx вы хотели бы использовать).
  2. Скопируйте файлы сборки из этапа 1 в /usr/share/nginx/html (каталог по умолчанию, из которого обслуживается Nginx)
  3. Удалите файл конфигурации Nginx по умолчанию, присутствующий в /etc/nginx/conf.d/default.conf.
  4. Скопируйте файл конфигурации, который вы создали ранее, в образ докера.
  5. Используйте EXPOSE, чтобы открыть порт контейнера. Одна ошибка здесь заключается в том, что он на самом деле не раскрывает порт, а просто ради документации.
  6. Запустите Nginx на переднем плане, а не как демон (т.е. в фоновом режиме).

И CMD, и RUN используются для запуска команд. Разница в том, что RUN — это шаг сборки образа, тогда как CMD — это команда, которую контейнер выполняет по умолчанию при запуске.

Шаг 3. Создайте изображение и пометьте тегом

В корневом каталоге вашего приложения выполните следующую команду, чтобы создать и пометить образ докера:

docker build -f Dockerfile.prod -t my-first-image:latest .

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

**Шаг 4. Запуск контейнера Последний шаг — запуск созданного образа (как контейнера) docker run -it -p 80:80 --rm my-first-image:latest

  1. -it для интерактивного режима
  2. -p для открытия и привязки портов. Здесь мы открываем порт 80 контейнера и связываем его с портом 80 хост-компьютера. Первый относится к вашей машине (хост-ОС), а второй — к контейнеру образа докера. Например, если вы используете -p 1234:80, вам нужно будет перейти на http://localhost:1234 в браузере.
  3. --rm для удаления контейнера после его остановки
  4. my-first-image:latest имя:тег изображения, контейнер которого мы хотим запустить

Теперь откройте браузер и перейдите к http://localhost, и вы увидите, что ваше приложение обслуживается из докера. Если вы внесете какие-либо изменения в код приложения React, вам потребуется пересобрать образ (шаг 3) и запустить его снова (шаг 4).

Дополнительно

  1. Запустите docker image ls, чтобы увидеть список всех образов на вашем компьютере.
  2. Запустите docker container ls, чтобы увидеть все запущенные контейнеры.
  3. Запустите docker system prune, чтобы обрезать контейнеры (будьте осторожны при использовании этой команды, прочитайте документы для параметров перед их использованием)
  4. Прочтите Руководство по началу работы с Docker

Первоначально опубликовано на dev.to

Подключаем:

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

Твиттер: https://twitter.com/mubbashir100