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

Содержание

1. Info
2. Преимущества контейнеризации приложений
   1. Переносимость
   2. Масштабируемость
   3. Стабильность
   4. Security
   5. Производительность
   6. Custom Deployment
3. Требования
   1. Info
4. Начните с приложения Next.js
5. Контейнеризация приложения Next.js с помощью Dockerfile
   1. Build Stage
   2. Runtime Stage
6. Развертывание приложения локально с помощью Docker
7. Развертывание контейнеризированного приложения Next.js на Kinsta
8. Summary

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

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

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

Info

Наш профильный эксперт Amin Choroomi, разработчик программного обеспечения в Kinsta, создал кодовую базу и шаги для этого руководства.

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

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

Переносимость

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

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

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

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

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

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

Security

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

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

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

Custom Deployment

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

Требования

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

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

Info

В этом руководстве мы предполагаем, что у вас есть базовое понимание Next.js и Docker.

Начните с приложения 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. Для предварительного просмотра нового приложения перейдите в каталог new-app и выполните команду:

npm run dev

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

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

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

Build Stage

В своем Dockerfile начните с создания этапа build для сборки приложения:

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

FROM node:18-alpine AS build
WORKDIR /app

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

COPY package\*.json ./

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

RUN npm ci

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

COPY . .

5. Соберите приложение:

RUN npm run build

Runtime Stage

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

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

FROM node:18-alpine AS runtime

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

WORKDIR /app

3. Скопируйте файлы package.json и package-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"]

В итоге мы получим следующий Dockerfile:

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
Скопируйте package*.json ./
RUN npm ci --only=production
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public

EXPOSE 3000
пользователь node
CMD ["npm", "start"]

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

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

Для предварительного просмотра приложения:

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

docker build -t next-docker .

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

docker run -p 3000:3000 next-docker

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

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

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

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

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

Summary

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

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

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