Пошаговое руководство по развертыванию статического приложения Nuxt.js в Netlify

В этой статье мы рассмотрим, как можно развернуть статическое приложение NuxtJs в Netlify.

Netlify - это хостинговый веб-сайт, который предоставляет бесплатный хостинг и более быстрый способ создания и развертывания сайтов на лету.

Мы будем развертывать наше приложение прямо из репозитория GitHub.

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

Перво-наперво нам нужно создать репозиторий GitHub нашего приложения, которое мы будем развертывать в Netlify.

После создания репозитория нам необходимо авторизоваться на сайте Netlify и привязать нашу учетную запись GitHub.

Если у вас нет учетной записи Netlify, вы можете зарегистрироваться и создать учетную запись. После этого вы войдете в систему, и вам будет предложено связать вашу учетную запись GitHub, GitLab или Bitbucket, если она у вас есть.

После привязки вашей учетной записи GitHub к Netlify нажмите кнопку «Новый сайт» с помощью кнопки Git - это предоставит вам экран для выбора репозитория GitHub с вашим приложением NuxtJs.

Теперь Netlify направит нас на второй экран, где мы выберем наш репозиторий, содержащий файлы приложения NuxtJs.

Выберите репозиторий приложений Nuxtjs и щелкните по нему.

После выбора вашего репозитория на последнем шаге Netlify предложит вам перейти к следующему шагу, где будет находиться корень ваших файлов приложения Nuxt или ветка (основная или главная), в зависимости от вашей конфигурации GIT.

В команде сборки для нашего статического приложения Nuxtjs мы используем команду

npm run generate

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

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

Nuxtjs выполнит команды и сгенерирует наше приложение, вы увидите окно с приведенной выше информацией, касающейся процедуры и процесса сборки вашего приложения.

После запуска всего этого Netlify предоставит вам еще один экран для предварительного просмотра созданного и развернутого сайта.

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

Заключение

Это было простое руководство по развертыванию статического приложения Nuxtjs.

Просто напомним, что мы видели;

  • Как связать свою учетную запись GitHub с Netlify.
  • Разверните статическое приложение Nuxtjs с помощью Netlify.

Если вы нашли эту статью помощи, не стесняйтесь поделиться ею.

Вы также можете проверить мой профиль здесь на наличие некоторых статей в блоге.