NuxtJS

Начало работы

Edgegap предлагает очень интуитивную платформу для развертывания бессерверного веб-приложения там, где это необходимо. В этом руководстве мы рассмотрим шаги по развертыванию приложения Nuxt. Прежде чем проверять что-либо ещё, убедитесь, что у вас установлен yarn или другой менеджер пакетов, например npm или npx. В этом руководстве мы будем использовать yarn. Он должен быть запущен в каталоге вашего приложения, который в начале может быть просто пустой папкой.

Откройте терминал в папке и выполните следующую команду:

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn

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

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn dev

yarn dev должен вернуть версию установленного yarn, если всё прошло гладко. С этим уладив это, мы можем перейти к оставшимся требованиям для успешного завершения этого руководства.

Требования

Контейнеризация вашего приложения

Контейнеризация большинства приложений проста. Необходимо создать Dockerfile и затем запустить этот файл в Docker для создания образа. Visual Studio Code — хорошая платформа для создания Dockerfile, поскольку по умолчанию она не добавляет расширение к каждому новому файлу, который мы создаём. Именно это нам и нужно. Просто создайте новый файл и назовите его Dockerfile. Рядом с ним появится маленький логотип Docker.

Теперь вы можете скопировать и вставить этот скрипт, чтобы получить основные зависимости. Имейте в виду, что это создаст образ немного больше 1 ГБ. Для целей этого руководства это приемлемо. Но для приложения в продакшне вам придётся оптимизировать его:

FROM node:lts as builder

WORKDIR /app

COPY . .

RUN yarn install \
  --prefer-offline \
  --frozen-lockfile \
  --non-interactive \
  --production=false

RUN yarn build

RUN rm -rf node_modules && \
  NODE_ENV=production yarn install \
  --prefer-offline \
  --pure-lockfile \
  --non-interactive \
  --production=true

FROM node:lts

WORKDIR /app

COPY --from=builder /app  .

ENV HOST 0.0.0.0
EXPOSE 80

CMD [ "yarn", "start" ]

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

Для пользователей с ARM CPU (Mac M1, M2 и др.) см. специальную страницу.

docker build . -t regsitry.edgegap.com/<YOUR_REPO>/demo-nuxt-edgegap:<YOUR_VERSION_NUMBER>

Предпочтительно указать номер версии в соответствии с семантическим версионированием, но если вы не планируете обновлять сборку на Edgegap после первого развертывания, вы можете полностью опустить номер версии.

Но прежде чем это сделать, вам нужно отправить (push) недавно созданный образ Docker в выбранный вами репозиторий образов. Помните, что мы предлагаем приватные репозитории через Harbor, которые предоставляют ряд преимуществ в области безопасности, которых у вас может не быть при использовании стандартного Docker-репозитория.

Но прежде чем это сделать, вам нужно отправить (push) недавно созданный образ Docker в выбранный вами репозиторий образов. Помните, что мы предлагаем приватные репозитории через Edgegap Registry, которые предоставляют ряд преимуществ в области безопасности, которых у вас может не быть при использовании стандартного Docker-репозитория.

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

docker login regsitry.edgegap.com

Теперь остаётся только отправить ваш образ следующим образом:

docker push regsitry.edgegap.com/<YOUR_REPO>/demo-nuxt-edgegap:<YOUR_VERSION_NUMBER>

Отлично! Теперь вы на шаг ближе к развертыванию вашего Nuxt-приложения на платформе Edgegap.

Разверните ваше приложение на Edgegap

Существует два способа развернуть приложение на Edgegap. Для обоих вам потребуется учётная запись у нас, которую вы можете создать бесплатно, кликнув по ссылке прямо здесь. Сначала рассмотрим, как развернуть контейнеризированное приложение через наш веб-сайт.

Развертывание приложения через панель управления Edgegap:

Вам нужно перейти по следующему веб-адресу и ввести свои учетные данные. После этого вы будете автоматически перенаправлены на свою панель управления. Если вы только что создали аккаунт, вы увидите опцию для запуска вашего первого приложения сразу. В противном случае просто перейдите на вкладку «Applications and games» в меню слева на экране. Справа вы увидите опцию создания нового приложения:

После того как вы нажмёте на неё, появится следующая форма:

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

• Номер порта: этому приложению необходимо, чтобы порт 3000 был открыт, поэтому, пожалуйста, добавьте его в раздел «ports» в форме создания.

• Максимальное время на развертывание: как упоминалось ранее в этом руководстве, наш образ NuxtJS примерно 1 ГБ. Чтобы развернуть образ такого размера на Edgegap, вам нужно увеличить максимальное время на развертывание до примерно 300 секунд.

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

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

Это откроет новую вкладку, где вы найдете страницу по умолчанию вашего Nuxt-приложения.

Развёртывание приложения через API Edgegap

Хотя наша веб-панель — самый удобный способ развертывания приложения, вы также можете сделать это через очень простой API-запрос. Для этого вы можете использовать Postman. Важно посетить панель управления, чтобы создать API-токен через параметры в вашем профиле. Вот простое руководство о том, как создать ваш API-токен.

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

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

Это всё, что требуется для развертывания приложения через CLI. Чтобы подтвердить, что ваше приложение развернуто, вы можете снова перейти на панель управления и увидеть активное развертывание в работе, нажав на вкладку «Active deployments».