Продемонстрируйте свой новый проект с идеальным названием уже сегодня
Когда я начинал как разработчик, я помню, как слово «развертывание» меня до чертиков напугало. Честно говоря, так было до тех пор, пока я недавно не понял, что мы используем для развертывания!
Heroku была моей первой платформой, к которой я обратился при развертывании приложений React, и, поскольку на этом пути было довольно много сбоев, я подумал, что напишу об этом процессе здесь.
Мы будем делать следующее:
- Создание приложения React.
- Развертывание с помощью Heroku.
- Подключение вашего пользовательского доменного имени к вашему приложению.
Примечание. Я работаю на Mac, поэтому ваши команды могут немного отличаться в зависимости от вашей ОС. По мере возможности я буду размещать ссылки, показывающие альтернативные команды для других ОС.
Давайте начнем!
1. Ваше приложение React
Предполагая, что вы знакомы с React, я пропущу длинное описание и скажу, что это библиотека JavaScript, используемая для создания интерфейсов. Что в ней такого крутого, так это то, что это компонентная библиотека, обеспечивающая возможность многократного использования логики во всем приложении. Более подробную информацию можно найти в официальных документах.
Давайте откроем терминал и создадим наше приложение React с помощью следующей команды:
npx create-react-app my-app
Create-react-app подготовит для нас совершенно новое приложение React, так что теперь мы можем просто запустить его следующим образом:
cd my-app && npm start
Вы должны увидеть экран ниже:
Теперь, когда наше приложение настроено, мы можем приступить к настройке нашей среды Heroku.
2. Heroku
Heroku - это облачный PaaS, предлагающий несколько сервисов, позволяющих среднему разработчику, а также организациям создавать, развертывать, отслеживать и масштабировать приложения. Самое приятное то, что создать учетную запись можно бесплатно, и хостинг также бесплатный (в зависимости от того, сколько динамометрических дисплеев - или контейнеров - вы хотите иметь в своем приложении). Для большинства основных приложений вам подойдет базовый бесплатный дино.
Поэтому прежде всего убедитесь, что вы зарегистрировались в Heroku.
После регистрации мы установим Heroku CLI, чтобы иметь возможность развертывать наши приложения с нашего терминала.
Установка Heroku CLI
Если вы работаете на Mac, выполните приведенную ниже команду, чтобы установить интерфейс командной строки. Вы можете найти альтернативные варианты установки для Windows и Linux на cli-странице Heroku:
brew tap heroku/brew && brew install heroku
После завершения установки убедитесь, что она установлена правильно, запустив:
heroku — version
Вы должны увидеть что-то вроде этого:
Если вы этого не сделаете, попробуйте закрыть терминал и снова открыть его. Иногда требуется перезагрузка.
Теперь мы готовы войти в систему, используя те же учетные данные, которые мы использовали ранее для регистрации через веб-сайт Heroku:
heroku login
Это приведет нас к браузеру для входа в систему, и как только вы это сделаете, терминал должен подтвердить, что вы вошли в систему, используя этот точный адрес электронной почты:
Кроме того, вы можете запустить heroku login -i, чтобы войти в систему через сам терминал. Оба варианта будут делать то же самое.
Теперь мы готовы настроить нашу среду Heroku и развернуть приложение React!
Создание нашего приложения на панели управления Heroku
Прежде чем мы перейдем к этому шагу, важно, чтобы репозиторий git был инициализирован, поэтому запустите git init в своем терминале.
Затем выполните следующую команду, заменив <app-name> именем вашего приложения:
heroku create <app-name> — b https://github.com/mars/create-react-app-buildpack.git
Примечание: это должно быть уникальное имя - не только в вашей коллекции приложений Heroku, но и в целом. Если какой-либо другой пользователь Heroku зарегистрировал приложение с таким именем, оно будет принято. Если вы не укажете название приложения, Heroku сгенерирует для вас случайное имя.
Давайте посмотрим на приведенную выше команду.
Флаг -b относится к пакету сборки. После развертывания Heroku автоматически определит язык вашего приложения и назначит соответствующий пакет сборки, чтобы помочь в сборке для производства (например, пакет сборки Node.js для приложений JavaScript). Однако с React вам нужно будет назначить этот пакет сборки вручную, чтобы убедиться, что Heroku знает, что это приложение create-react-app, и, таким образом, может найти ваш файл точки входа.
Если вы теперь перейдете в панель управления Heroku, вы увидите свое недавно созданное приложение:
Развертывание приложения Heroku
Heroku делает этот шаг очень простым с помощью всего одной простой команды:
git push heroku master
Если все пойдет хорошо, вы увидите на своем терминале следующее:
Запуск heroku open откроет браузер с развернутым приложением!
Обратите внимание на доменное имя, которое по умолчанию соответствует формату Heroku <app-name>.herokuapp.com.
На следующем этапе мы будем работать над подключением Heroku к пользовательскому домену по вашему выбору, чтобы удалить этот домен по умолчанию.
3. Пользовательский домен
Для целей этой статьи я буду использовать Namecheap в качестве поставщика доменного имени. Те же принципы будут применяться и к другим поставщикам доменов, если вы решите пойти с другим.
Идите вперед, найдите свой персональный домен и проверьте. Вам нужно будет создать учетную запись при оформлении заказа, чтобы управлять своим доменом.
После входа в систему перейдите на панель управления, где вы сможете увидеть свои домены, затем нажмите «Управление» на том, который вы хотите подключить к Heroku.
В завершение мы сделаем две вещи:
- Настройка наших редиректов.
- Добавление нашей информации Heroku, чтобы наше доменное имя указывало на наше приложение.
Перенаправления
Убедитесь, что вы находитесь на вкладке «Домен», и прокрутите вниз до раздела «Домен перенаправления». Используя собственное доменное имя, добавьте строку, которая выглядит так:
Это гарантирует, что ваше приложение будет перенаправлено в формат http: // и будет по-прежнему доступно пользователям без необходимости вводить его.
Подключение к Heroku
Вернитесь в свою панель управления Heroku и щелкните новое созданное приложение. На вкладке Настройки прокрутите вниз до Домены и добавьте свой собственный домен с префиксом http: //.
Должна появиться новая строка со значением DNS Target в виде случайно сгенерированного URL. Скопируйте этот URL-адрес и вернитесь на панель управления Namecheap.
Перейдите на вкладку Advanced DNS - здесь мы укажем наш домен на наше приложение Heroku, используя только что скопированное значение.
Примечание: для тех из вас, кто раньше пользовался услугами других хостинг-провайдеров, Heroku работает немного иначе, поскольку они не предоставляют услуги провайдера DNS. Таким образом, информация, которую вы получаете от них, - это не серверы имен как таковые. Я оставил ссылку внизу для получения дополнительной информации по этому поводу.
Здесь нам понадобятся две записи для таблицы Advanced DNS:
Первой будет строка записи переадресации URL со следующими значениями:
- Тип: Запись перенаправления URL
- Хозяин: @
- Значение: http: // ‹your-domain-name›
Второй будет строкой записи CNAME со следующими значениями:
1. Введите: запись CNAME.
2. Хост: www
3. Значение: случайно сгенерированная строка, которую вы взяли с панели управления Heroku.
У вас должно получиться что-то вроде этого (где test-dns-record заменяет ваше собственное значение):
OK! Все готово. Это может занять некоторое время, хотя обычно это занимает не более пары часов.
Вы можете проверить его статус на панели управления Heroku в разделе «Домены». Когда он будет запущен, вы увидите зеленый значок ОК.
Теперь осталось только проверить свой сайт!
Перейдите в свой личный домен в браузере, и вы должны увидеть то же приложение create-response-app, которое вы развернули ранее:
На этом этапе я хочу указать на то, что если вы когда-нибудь забудете добавить пакет сборки create-react-app в свое приложение, вы можете сделать это позже через панель управления Heroku. Просто щелкните приложение, перейдите на вкладку «Настройки» и прокрутите вниз до «Сборочные пакеты». Вы сможете добавить туда URL пакета сборки.
Заключение
Вот и все! Ниже я оставил несколько ресурсов, которые, я думаю, будут полезны, чтобы помочь понять, как работает Heroku.
Если возникнут вопросы, смело задавайте их в комментариях!
