Как контейнеризировать приложение Next.js и развернуть его в Kinsta

В этой статье объясняется, как контейнеризировать приложение Next.js с помощью Докерфайл для настраиваемого развертывания. Альтернативно вы можете развернуть приложение Next.js в Kinsta, используя автоматическое развертывание.

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

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

Преимущества контейнеризации вашего приложения

Контейнеризация приложения дает множество преимуществ, таких как переносимость, стабильность, масштабируемость, безопасность и производительность. Развернув приложение в Kinsta с помощью Докерфайлвы также можете воспользоваться его возможностями настройки.

Портативность

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

Масштабируемость

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

Стабильность

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

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

Безопасность

Контейнеры Docker обеспечивают более безопасную среду для ваших рабочих нагрузок, чем традиционные модели. Поскольку они разбивают ваши приложения на гораздо более мелкие, слабосвязанные компоненты, каждый из которых изолирован друг от друга, значительно снижается поверхность атаки. Контейнеры Docker уменьшают вероятность того, что хакеры воспользуются вашими компьютерными системами, и затрудняют распространение взлома в случае атаки. Узнайте больше в этой статье: 9 рекомендаций по обеспечению безопасности для Docker-контейнеров.

Производительность

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

Пользовательское развертывание

С Kinsta вы можете автоматически развертывать свои приложения с помощью Buildpacks и Nixpacks. Но когда процесс сборки запускается автоматически на основе кодовой базы вашего приложения, у вас не остается места для настроек. Если вы развернетесь в Kinsta с помощью Докерфайлвы можете точно настроить способ создания и развертывания приложения.

Требования

Чтобы развернуть приложение Next.js с помощью Docker, вам необходимо:

• Установлены Node.js и npm.
• Docker Desktop (или Docker Engine) установлен и работает на вашем компьютере.

Начните с приложения Next.js

Если вы начинаете с существующего приложения, вы можете пропустить этот шаг. Если вы начинаете заново, создайте новое приложение Next.js:

1. Откройте терминал и установите create-next-app:

npm i -g create-next-app@latest

2. Перейдите в каталог, в который вы хотите его установить, и создайте новое приложение Next.js в его собственном каталоге:

npx create-next-app@latest new-app

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

3. Чтобы просмотреть новое приложение, перейдите к новое приложение каталог и запустите:

npm run dev

Для справки мы создали пример приложения, использующего этот метод.

Контейнеризация приложения Next.js с помощью Dockerfile

Чтобы контейнеризировать приложение Next.js и развернуть его с помощью Docker, создайте Докерфайл в корневом каталоге вашего приложения.

Этап сборки

В вашем Dockerfile начните с создания файла приложения build Этап создания приложения:

1. Используйте официальный последний стабильный образ Node.js alpine в качестве базового образа для build этап:

FROM node:18-alpine AS build
WORKDIR /app

2. Скопируйте пакет.json и пакет-lock.json файлы в контейнер:

COPY package*.json ./

3. Установите зависимости приложения с помощью:

RUN npm ci

4. Скопируйте остальную часть кода приложения в контейнер с помощью:

COPY . .

5. Создайте приложение:

RUN npm run build

Стадия выполнения

Создайте runtime этап развертывания вашего приложения:

1. Используйте официальный последний стабильный образ Node.js alpine в качестве базового образа для runtime этап:

FROM node:18-alpine AS runtime

2. Установите рабочий каталог на /app:

WORKDIR /app

3. Скопируйте пакет.json и пакет-lock.json файлы в контейнер:

COPY package*.json ./

4. Устанавливайте только производственные зависимости:

RUN npm ci --only=production

5. Скопируйте созданное приложение из build этап на runtime этап:

COPY --from=build /app/.next ./.next

6. Скопируйте общую папку из build этап на runtime этап:

COPY --from=build /app/public ./public

7. Откройте порт 3000:

EXPOSE 3000

8. Запустите контейнер от имени непривилегированного пользователя:

USER node

9. Запустите приложение Next.js:

CMD ["npm", "start"]

В итоге у нас получается следующее Докерфайл:

FROM node:18-alpine AS build

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine AS runtime

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public

EXPOSE 3000
USER node
CMD ["npm", "start"]

Разверните приложение локально с помощью Docker

Хотя вы все равно можете просмотреть свое приложение с помощью run npm devзапустите его локально с помощью Docker, чтобы имитировать производственную среду, а также протестировать и просмотреть любые изменения, которые вы вносите в среду своего приложения. Докерфайл.

Чтобы просмотреть свое приложение:

1. Создайте приложение с помощью docker build:

docker build -t next-docker .

2. Запустите контейнер для предварительного просмотра вашего приложения:

docker run -p 3000:3000 next-docker

3. В браузере откройте http://localhost:3000.

Развертывание контейнерного приложения Next.js в Kinsta

Выполните следующие действия, чтобы развернуть свое приложение в Kinsta, используя его Докерфайл.

1. Разместите кодовую базу вашего приложения в репозитории Git (GitHub, GitLab или Bitbucket).
2. Войдите в свою учетную запись MyKinsta или создайте новую, чтобы получить доступ к панели управления.
3. Нажмите Добавить услугу и выберите Приложение.
4. Выберите поставщика Git, репозиторий и ветку, из которой вы хотите выполнить развертывание.
5. Проверить Автоматическое развертывание при фиксации установите флажок, если вы хотите развертывать свое приложение при каждом нажатии на ваш репозиторий.
6. Выберите дата-центр, ближайший к вашей аудитории, и нажмите Продолжать.
7. Выберите среду сборки и выберите Используйте Dockerfile для настройки образа контейнера.
8. Если ваш Dockerfile не находится в корне вашего репо, используйте Контекст чтобы указать его путь, и нажмите Продолжать.
9. Вы можете оставить Команда запуска запись пустая. Кинста использует npm start чтобы запустить ваше приложение.
10. Выберите размер модуля и количество экземпляров, наиболее подходящих для вашего приложения, и нажмите Продолжать.
11. Заполните данные своей кредитной карты и нажмите Создать заявку.

Ваше приложение готово к развертыванию. Если вы установили флажок Автоматическое развертывание при фиксации на шаге 5 Kinsta автоматически запускает развертывание.

Краткое содержание

В этой статье мы обсудили несколько преимуществ использования Docker по сравнению с традиционными моделями; мы объяснили, как создать Докерфайл для приложения Next.js создайте и разверните его с помощью Docker локально, а затем разверните в Kinsta.

Хостинг приложений Kinsta делает ваш рабочий процесс разработки простым и эффективным.

Такие функции, как контейнерные приложения в инфраструктуре GCP, работающие на компьютерах C2 с 35 доступными центрами обработки данных, премиум-интеграция с Cloudflare для высокопроизводительной CDN, которая обслуживает ваш сайт из более чем 260 точек присутствия, защита от DDoS-атак брандмауэром корпоративного уровня, Edge Caching и Мониторинг времени безотказной работы (с гарантией работоспособности 99%) гарантирует, что ваше приложение работает быстро, безопасно и надежно доступно в Интернете.