Этот пост является продолжением двух моих предыдущих постов:

В one я рассказал, как работает Docker на высоком уровне. Если вы никогда раньше не использовали Docker, я рекомендую сначала прочитать этот обзор. Я предполагаю, что вы знакомы с экосистемой Docker в этом посте.

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

Контейнер — это экземпляр изображения. Чтобы запустить контейнер с Docker, нам нужно создать образ. Что такое образ?

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

Нам нужен способ дать Docker пошаговые инструкции о том, как:

  1. Создайте правильную среду для работы нашего приложения.
  2. Установите наше приложение
  3. Запустите приложение

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

Затем используйте различные ключевые слова инструкций, предоставленные Docker, чтобы пройти через создание образа. Вот содержимое Dockerfile для моего базового приложения React:

FROM node:latest
RUN mkdir /basic-react
WORKDIR /basic-react
COPY package.json .
RUN npm install
COPY . .
EXPOSE 8080
CMD ["npm", "start"]

Если вы раньше использовали Node, некоторые из этих инструкций должны показаться вам знакомыми. Вы можете видеть, где мы говорим Docker установить наши модули (RUN npm install) и запустить наше приложение с помощью npm start.

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

ОТ узла: последний

Эта инструкция выполняет все, что нам нужно для завершения первого шага. Инструкция FROM устанавливает базовый образ для нашего контейнера. Здесь мы устанавливаем последнюю версию образа узла по умолчанию.

Для простоты образ Node по умолчанию включает Debian, версию Linux. Теперь у нас есть операционная система и среда Node в одной строке кода.

ЗАПУСК mkdir/базовый-реагировать

RUN инструкции запускают команды в оболочке внутри контейнера. Здесь мы создаем наш корневой каталог в контейнере.

РАБОЧИЙ_КАТАЛОГ /basic-реагировать

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

КОПИРОВАТЬ package.json .

Мы создали нашу среду Node. Далее нам нужно установить наше приложение. Файл package.json в каталоге нашего проекта содержит все инструкции для Node по установке его зависимостей. С помощью инструкции COPY мы говорим Docker скопировать файл package.json из каталога проекта в корневой каталог в контейнере.

(Если бы мы удалили инструкцию WORKDIR, вместо нее мы бы написали COPY package.json /basic-react)

ЗАПУСТИТЬ установку npm

Теперь, когда у нас есть файл package.json, мы можем указать Docker установить зависимости.

КОПИРОВАТЬ . .

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

ВЫСТАВИТЬ 8080

Инструкция EXPOSE указывает Docker открыть порт в нашем контейнере. Я использовал сервер разработки Webpack для этого проекта, и он настроен на порт 8080. С помощью этой инструкции Docker откроет порт 8080 в контейнере и подключит его к порту 8080 на хост-компьютере.

CMD ["npm", "старт"]

Наконец, инструкция CMD задает команду для выполнения при запуске контейнера. Команда разделена на элементы в массиве, где за исполняемым файлом npm, следуют его параметры start.

Далее мы создадим образ и запустим контейнер, но сначала я хочу добавить примечание для всех, кто использует webpack-dev-server. Поскольку я использую сервер Webpack, мне пришлось добавить дополнительный флаг --host к моей команде npm start, чтобы иметь доступ к серверу разработки из-за пределов контейнера.

В моем файле package.json у меня есть это под "scripts":

"scripts": {
   "start": "npx webpack-dev-server --mode development --open --hot --host 0.0.0.0"
}

Запуск контейнера

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

docker build -t bbreact .

Флаг -t создает тег для изображения, который не является обязательным, но рекомендуется для организации ваших изображений. . в конце команды очень важен. Это говорит Docker собрать образ из текущего каталога.

Когда вы выполните эту команду, Docker запустит Dockerfile и создаст образ. Чтобы запустить контейнер на основе только что созданного образа, выполните следующую команду:

docker run -p 8080:8080/tcp bbreact:latest

Это говорит Docker запустить контейнер на основе последней версии нашего образа. Флаги -p говорят Docker опубликовать порт 8080 нашего контейнера на порт 8080 хост-компьютера.

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

Если вы используете VS Code, я рекомендую установить расширение Docker, чтобы упростить управление вашими образами и контейнерами. С помощью расширения вы можете создать образ и запустить контейнер из VS Code. Вам не нужно беспокоиться о запоминании приведенных выше команд каждый раз, когда вы запускаете контейнер.