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

Докерфайл

Вот файл Dockerfile, с которым мы будем работать:

FROM node:18-alpine AS installer

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest AS deployer

COPY --from=installer /app/build /usr/share/nginx/html

Распаковка Dockerfile

Теперь давайте шаг за шагом распакуем, что происходит в этом Dockerfile:

1. ОТ узла: установщик AS 18-alpine

Эта строка извлекает официальный образ Node.js (версия 18 для Alpine Linux) из Docker Hub. Думайте о Docker Hub как о библиотеке изображений. Используя эту строку, мы указываем, что хотим использовать Node.js в качестве базового образа для первого этапа нашей сборки.

2. WORKDIR /приложение

Эта команда устанавливает рабочий каталог внутри контейнера как /app. Вы можете думать об этом как о создании отдельной папки для вашего приложения внутри контейнера, аналогично тому, как вы можете организовывать файлы на рабочем столе.

3. КОПИРОВАТЬ пакет*.json ./

Здесь мы копируем файлы package.json и package-lock.json из нашего локального каталога в рабочий каталог контейнера. Эти файлы содержат информацию о зависимостях, необходимых нашему приложению.

4. ЗАПУСК установки npm

Эта команда запускает npm install, который устанавливает все зависимости, указанные в package.json.

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

Эта строка копирует остальные файлы нашего приложения в контейнер. Он переносит все из нашего локального каталога в каталог /app внутри контейнера.

6. ЗАПУСК npm, запуск сборки

Теперь мы компилируем наше приложение с помощью команды npm run build. На этом этапе наш код обычно преобразуется (в данном случае часто React) в статический пакет, готовый к предоставлению пользователям. Вывод этой команды будет помещен в каталог сборки внутри /app.

7. ОТ nginx: последний развертыватель AS

В этой строке мы переключаемся на новый базовый образ: Nginx. Nginx — мощный веб-сервер, который может обслуживать статические файлы, подобные тем, которые мы только что создали. Это начало нашего второго этапа многоэтапного процесса сборки.

8. КОПИРОВАТЬ --from=installer /app/build /usr/share/nginx/html

Здесь мы копируем файлы встроенного приложения с предыдущего этапа (установщика) в обслуживающий каталог Nginx. Флаг --from=installer указывает Docker получить файлы с этапа установки, который мы только что определили.

Запуск вашего Docker-контейнера

После настройки Dockerfile вы можете собрать и запустить Docker-контейнер с помощью следующих команд:

docker build -t your-app-name .
docker run -dp 3000:80 your-app-name

Обязательно замените имя вашего приложения на имя по вашему выбору. Флаг -dp отключит ваш контейнер и сопоставит порт 3000 на вашем хост-компьютере с портом 80 в контейнере, что позволит вам получить доступ к вашему приложению по адресу http://localhost:3000.

Заключение

И вот оно! Вы только что создали многоэтапную сборку Docker, которая переносит ваше приложение от разработки к производству с использованием Nginx. Если у вас есть какие-либо вопросы или мысли по поводу этого процесса, не стесняйтесь оставлять комментарии ниже!

Подводные камни: на что следует обратить внимание

Одна из распространенных ошибок при работе с этой настройкой — забывают сопоставить правильные номера портов. Nginx обычно прослушивает порт 80 внутри контейнера, но если вы пытаетесь получить доступ к приложению на своем локальном компьютере, вам нужно будет перенаправить правильный порт из контейнера на свой компьютер. Например, если вы хотите получить доступ к приложению на localhost:3000, вам нужно будет запустить контейнер с флагом -p 3000:80, чтобы сопоставить порт 3000 на вашем компьютере с портом 80 в контейнере.

Пропустите этот шаг, и вы задаетесь вопросом, почему все сделано идеально, но вы не можете открыть приложение в своем браузере!

Теги и упоминания

@piyushsachdeva
Видео дня 3