Руководство для начинающих по веб-развертыванию

Как и где развертывать Frontend и Backend приложения

Читать эту статью в темном режиме. 🌙, легко копируйте и вставляйте примеры кода и находите больше подобных материалов на Devjavu.

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

Основная причина развертывания приложений, будь то Frontend или Backend, заключается в том, чтобы сделать их пригодными для использования за пределами вашего компьютера. К счастью, Интернет изобилует платформами, которые позволяют развертывать приложения практически без усилий и бесплатно. В этой статье я рассмотрю варианты развертывания интерфейсных и серверных веб-приложений.

Развертывание интерфейса

С помощью Frontend все, что вы развертываете в облаке, — это статические файлы и активы. Это означает, что какой бы интерфейсный фреймворк вы ни выбрали (React, Vue, Angular, Flutter), в конце концов, ваши пользователи/посетители получат простые старые файлы и ресурсы HTML, CSS и Javascript.

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

"Оказывать"

Я написал руководство, которое поможет вам начать развертывание интерфейсных приложений в Render. По их словам, Render — это единая платформа для создания и запуска всех ваших приложений и веб-сайтов с бесплатным SSL, глобальной CDN и частными сетями, а также с автоматическим развертыванием из Git. С помощью Render вы можете развернуть статические сайты, веб-серверы или целый док-контейнер.

Версель

Vercel в первую очередь ориентирован на внешний интерфейс, поскольку он поставляется с готовыми шаблонами быстрого развертывания для большинства интерфейсных фреймворков javascript, включая React, Vue и Angular; он также обслуживает генераторы статических сайтов. Вот руководство для начала:

Хероку

Heroku известен развертыванием большинства типов приложений. Вы также можете быстро развернуть свои внешние приложения JavaScript на Heroku. Вот еще одно краткое руководство:

"Всплеск"

Surge — еще одна бесплатная альтернатива с одним из самых удобных способов развертывания. Это позволяет вам развертывать статические файлы Frontend с помощью одной команды CLI.

surge

Чтобы начать развертывание с помощью Surge, необходимо установить инструмент командной строки Surge. Предполагая, что у вас уже есть установка node/NPM на вашем компьютере, вы можете установить инструмент CLI глобально:

npm install --global surge

Это должно предоставить вам команду surge, глобально доступную в вашем терминале. Теперь вы можете запустить surge login для аутентификации Surge CLI. Отсюда вы можете развернуть любое приложение Frontend одной командой. Вот как я обычно его использую. Если у вас есть приложение Vue или React, вы можете добавить скрипт deploy в свой файл package.json.

Vue (Nuxt) package.json Пример:

{
  ...
  "scripts": {
    "build": "nuxt build",
    "deploy": "yarn build && cd dist && mv index.html 200.html && surge ."
  }
}

Выше приведен пример сценария развертывания для приложения Vue/Nuxt. Сначала мы запускаем команду build, которая создает папку dist. При появлении запроса мы переходим в папку, запускаем команду скачка и указываем домен приложения.

Другие относительно бесплатные альтернативы для развертывания ваших интерфейсных приложений включают:

• Нетлифай
• Хостинг Firebase
• Гитхаб-страницы
• Облачные страницы

Развертывание серверной части

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

Хероку

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

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

Цифровой океан

Digital Ocean предлагает вам отличный бесплатный уровень примерно на 60 дней плюс бесплатные кредиты; после этого вы должны платить за использование. Простой дроплет за 4 доллара США в месяц может подойти, если вы создаете небольшие приложения.

Кузница

Для беспрепятственного развертывания приложений Laravel Forge — хороший вариант. Они также предлагают приличный бесплатный уровень, с которого вы можете начать.

АВС

Amazon Web Services предоставляет экземпляры EC2 для размещения/развертывания ваших веб-приложений. AWS может потребовать некоторых базовых знаний DevOps по сравнению с другими; интерфейс не самый удобный для начинающих разработчиков.