Dockerize Next.js 14+ App in 2024

Привет! Сегодня мы будем использовать Ducker для нашего приложения Next. js. Вам необходимо установить Ducker на свой компьютер. Если у вас его нет, пожалуйста, посмотрите описание видео, чтобы узнать, как его установить. Если он у вас есть, вы можете следовать этому руководству. Давайте создадим пример приложения Next. js. Я приму значения по умолчанию. Давайте подождем установки пакетов. Хорошо, теперь проект готов. Мы можем открыть VS Code. Давайте я разверну его на весь экран и немного увеличу масштаб, чтобы вам было лучше видно. Хорошо, это здорово. Итак, первое, что нам нужно сделать, это создать наш файл Ducker. Я объясню каждую строку, так что не волнуйтесь. Мы начнем с указания нашего базового образа. Мы будем использовать не Aline, потому что он более легкий. Далее мы создадим новый этап под названием deps, который использует наш базовый образ. На этом этапе мы будем обрабатывать наши зависимости. Мы устанавливаем пакет совместимости C6. Это обеспечивает совместимость с некоторыми нативными модулями, которые нам могут понадобиться. Мы устанавливаем рабочий каталог в app. Мы копируем package и package lock Json в рабочий каталог. Если вы используете yarn в качестве менеджера пакетов, вам следует переместить yarn lock Json, а не package lock Json. Мы запускаем mmci для установки наших зависимостей. Эта команда гарантирует, что мы получим Точная установка, как определено в пакете Lo Jason. Теперь создадим еще один этап, названный Builder, снова используя наш базовый образ. Установим рабочий каталог в app. Скопируем каталог nodemodules с этапа dep на этап Builder. Скопируем остальную часть приложения в рабочий каталог. Возможно, вы задаетесь вопросом, зачем нам отдельный этап для установки зависимостей, если мы все равно собирались все копировать. Это потому, что Ducker кэширует каждый этап. Если файлы package. json и package. lock. json не изменяются, Ducker пропустит первый этап. Это означает, что нам не нужно устанавливать модули Node каждый раз, когда мы собираем наш образ. Завершим этап Builder командой `mpm run build`. Наконец, создадим этап Runner. На этом этапе наше приложение будет работать в продакшене. Снова установим рабочий каталог в app. Снова установим node. js в production. Это гарантирует, что наше приложение будет работать в продакшене. У нас была системная группа nodejs с определенным идентификатором группы. Это помогает с разрешениями и безопасностью. У нас был системный пользователь nextjs. Этот пользователь будет запускать наше приложение. Скопируем каталог public с этапа Builder. Создадим каталог next. В нем будет храниться наш nextjs. В результате выполнения программы мы меняем владельца. Переместите каталог в папку `nextjs`, а не в группу `JS`. Это обеспечит правильные права доступа. Мы копируем папку `Standalone` из среды `Builder`, убедившись, что она доступна пользователю `nextjs`. Теперь, чтобы этот шаг работал правильно, нам нужно настроить наше приложение Nextjs. Если вы не знаете, почему папка `Standalone` доступна, вы можете посмотреть мое предыдущее видео об этом. В файле `config. js` мы изменим вывод на `Standalone`. Хорошо, теперь этот шаг будет работать нормально. Мы можем продолжить копирование папки `static` из среды `Builder`. Мы переключаемся на пользователя `nextjs`. Это повышает безопасность, поскольку мы больше не являемся пользователем root. Мы открываем порт 3000. Это порт, на котором будет прослушивать наше приложение Nextjs. Мы устанавливаем переменную окружения `port` на 3000. Это указывает нашему приложению прослушивать порт 3000. Наконец, мы указываем команду для запуска нашего приложения. Мы устанавливаем имя хоста на 4zos, чтобы принимать соединения с любого сетевого интерфейса, и запускаем `server. js` для запуска сервера. Вот и все, это наш файл `DuckPositive`, но нам нужен еще один файл — `ignore`. Файл игнорирования используется для указания файлов и каталогов, которые следует игнорировать при сборке образа. Поэтому я добавил туда несколько файлов и папок, это обеспечит более быстрое время сборки. Мое приложение Ducker уже работает, поэтому мы можем создать наш образ и посмотреть, работает ли наш файл Ducker так, как мы ожидаем. Я буду использовать имя проекта в качестве имени образа и тег latest. Если вы собираете образ впервые, время сборки может занять некоторое время, поскольку у вас нет образа Node. js на компьютере. Но после первой сборки, если вы не обновите пакеты, время сборки будет быстрее. Хорошо, мы создали наш образ, мы видим его в настольном приложении, так как мы провели несколько оптимизаций, размер образа составляет около 100 МБ. Теперь у нас есть готовый образ, мы можем запустить наш контейнер. Я установлю свой локальный порт 3000 на порт 3000 контейнера, поскольку Next. js будет работать на этом порту, и не будет никакого ожидания при запуске контейнера. Мы можем сразу получить доступ к нашему приложению и успешно увидеть работающее на порту 3000 приложение Next. js. Если я перейду в свой Приложение Ducker: нажмите на контейнеры, выберите мой контейнер и остановите его работу. Я вижу, что наше приложение перестало работать. На этом пока всё, что нужно знать о вашем приложении Next. js и его развертывании в облаке. Если вам понравилось видео, подпишитесь на канал. Если вы хотите узнать, как развернуть приложение в облаке, оставьте комментарий ниже.