Как поместить ваше Next.js/React приложение в Docker

Что такое докер?

Докер – это открытая платформа для разработки, запуска и управления контейнерами на сервере и в облаке. Думайте о докер как о CLI, но для облака.

Для примера приложения в этом руководстве мы будем использовать Next.js, и потом создадим Dockerfile чтобы “докерезировать” приложение.

Требования

Для использования докера в вашем Next.js проекте вам понадобится:

• Установленный Docker на вашем компьютере

• Установленные Node.js и npm/yarn в вашей системе для создания приложения на Next

Создание приложения на Next.js

Если у вас уже есть приложение, которое мы будем “докереизровать”, тогда переходить к следующему шагу, в ином случае давайте создадим его.

Выполните данную команду в терминале:

yarn create next-app

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

Создание Dockerfile

Для начала, давайте откроем наше приложение в VS Code или в любом другом редакторе на ваш выбор.

И запустим данные команды:

cd <имя проекта>

code . 

(Надеюсь, что у вас настроен vscode)

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

Примечание: я использую typescript, вот почему вы видите tsconfig.json и файлы, которые заканчиваются на .ts.

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

Запомните: команды будут запущены в том порядке, в котором они записаны.

Пропишите данный код внутри Dockerfile. Я пробегусь по командам и объясню, как они работают в конце гайда.

Примечание: я использую yarn для руководства, вы можете использовать npm, для этого вам всего лишь нужно заменить yarn на npm в файле.

FROM node:lts as dependencies
WORKDIR /<your-app-name>
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

FROM node:lts as builder
WORKDIR /<your-app-name>
COPY . .
COPY --from=dependencies /<your-app-name>/node_modules ./node_modules
RUN yarn build

FROM node:lts as runner
WORKDIR /<your-app-name>
ENV NODE_ENV production

COPY --from=builder /<your-app-name>/public ./public
COPY --from=builder /<your-app-name>/package.json ./package.json
COPY --from=builder /<your-app-name>/.next ./.next
COPY --from=builder /<your-app-name>/node_modules ./node_modules

EXPOSE 3000
CMD ["yarn", "start"]

Создание докер образа

Выполните данную команду для создания образа докера.

docker build . -t <имя проекта>

Данная команда создаст образ докера с названием <имя проекта>.

Запустить образ докера после завершения сборки можно прописав команду:

docker run -p 3000:3000 <имя проекта>

Теперь откройте ваш бразуер, и перейдите по http://localhost:3000, чтобы увидеть ваш проект.

Поздравляю! Вы успешно “докерезировали” своё приложение!

Поговорим о содержимом Dockerfile

Пройдемся по коду, который содержится в Dockerfile.

Напомним, код выполняется на основание того, как он написан, сверху-вниз.

Разобьём весь код на 3 логические части:

1. Установка зависимостей

2. Сборка нашего Next.js приложения

3. Настройка среды выполнения для приложения

1. Установка зависимостей

FROM node:lts as dependencies
WORKDIR /<имя проекта>
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

Что же происходит в данном коде?

Первое, нам нужно определить какой образ мы хотим собрать и откуда, для этого мы используем последнюю версию node, с помощью команды node:lts.

Вы можете использовать необходимую версию node. Для примера: FROM node:16 будет создавать ваш образ с версией Node 16. Мы также используем as dependencies для того, чтобы экспортировать данный код, и использовать его в дальнейшем при сборке нашего приложения в докер.

Во-вторых, мы хотим создать место, в котором будет храниться код нашего приложения, для используется WORKDIR.

В-третьих, нам нужно скопировать наши package.json и yarn.lock файлы, что даст нам примущество в кэшировании слоев докера. Хорошее объяснение кэширования в докере вы можете найти тут.

И наконец, чтобы установить все зависимости для проекта нужно выполнить команду yarn install. Мы используем --frozen-lockfile потому, что наш yarn.lock или package-lock.json может получить обновления при запуске yarn install (или npm install). А мы не хотим проверять эти изменения.

Если вы используете npm вам нужно использовать npm ci (ci означает чистую установку / используйте это для продакшена или просто используйте RUN npm install)

Для yarn это --frozen-lockfile.

2. Сборка нашего Next.js приложения

FROM node:lts as builder
WORKDIR /<имя проекта>
COPY --from=dependencies /<your-app-name>/node_modules ./node_modules
RUN yarn build

Взглянем на процесс сборки.

Мы создаем наше приложение с помощью копирования зависимостей из node_modules.
И затем собираем его. Если вы используете npm, тогда используйте RUN npm build.

FROM node:lts as runner
WORKDIR /<имя проекта>
ENV NODE_ENV production

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

3. Настройка среды выполнения для приложения

COPY --from=builder /<your-app-name>/public ./public
COPY --from=builder /<your-app-name>/package.json ./package.json
COPY --from=builder /<your-app-name>/.next ./.next
COPY --from=builder /<your-app-name>/node_modules ./node_modules

EXPOSE 3000
CMD ["yarn", "start"]

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

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

Для нашей среды выполнения мы используем yarn команды.

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

На этом руководство заканчивается, спасибо за прочтение!