Как развернуть статическое приложение Gatsby на Heroku

1656513969 kak razvernut staticheskoe prilozhenie gatsby na heroku

Кристин Бауманн

7A-6qjzSvZnR-Vdg2H7asQ3T5Ot9g0nW0Ef7
Фото Винисиуса Энрике на Unsplash

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

После окончания этого учебника,…

  • ✈️ Вы сможете создать и развернуть статическое приложение Gatsby.
  • ? вы сможете ттакелаж автоматически разворачивается к вашему ссреда тегирования нажав на ваш репозиторий git. (Вы можете просмотреть программу и, если это подходит, продвигать ее на свою страницусайт производства.)

Требования:

  • Ваш проект будет основан на GatsbyJS (генератор статических сайтов). Вам не нужны знания по кодированию с помощью Gatsby или React, но у вас должны быть установлены Node и GatsbyJS.
  • Вам понадобится аккаунт Github и Heroku (оба доступны бесплатно). Git необходимо настроить на вашей машине.

1.) Создайте новый проект Gatsby

Во-первых, вам нужен свежий проект Гэтсби.

  • Вы можете создать новый проект в папке test-project выполнив следующее в нашей консоли:
gatsby new test-project https://github.com/gatsbyjs/gatsby-starter-hello-world

Это создает необходимые файлы для статической программы Gatsby из стартового пакета. Вы можете запустить сервер разработки локально, перейдя в каталог проекта с помощью cd test-project а затем бег gatsby develop. Ваше приложение теперь доступно на localhost:8000.

2.) Настройте репо git

Когда проект работает локально, теперь вы можете настроить git репозиторий для своего проекта Gatsby.

  • Войдите в Github и создайте новое репо.
  • Инициализируйте репозиторию git в своем проекте с помощью:
git init
  • Подключите локальное репо git к удаленному репозиторию с помощью:
git remote add origin <remoteURL>
  • Сделайте свой начальный коммит проекта Гетсби с помощью:
git add .git commit -m "Initial commit"git push origin master

Изменения в вашем проекте Gatsby теперь отслеживаются с помощью Github, который обеспечит триггер для начала развертывания позже.

3.) Настройте программы Heroku

Следующим шагом можно настроить среды непрерывного развертывания на Heroku.

  • Создайте новый конвейер под названием test-project на информационной панели программы Heroku
  • В этом трубопроводе создайте новую программу для промежуточной среды под названием test-project-staging и новое приложение для производства под названием test-project-prod
  • Подключите конвейер (не каждую программу отдельно) с ранее созданным репозиторием Github
  • Включить автоматическое развертывание из главной ветви для промежуточной программы (но не для рабочей программы!)
  • Установите пакеты сборок для обеих программ на:
"heroku/nodejs" 
"

Эти пакеты сборников — это сценарии, которые запускаются при развертывании программы и специфичны для вашего статического проекта Gatsby. Вы можете настроить статический пакет сборки на следующем шаге.

qNtbliSCD21VxlTI5LE69J5KajixsfdmMSth
Ваши настройки Heroku, включая сценическую и производственную среду

4.) Подготовьте свой проект Gatsby к развертыванию в Heroku

  • После того, как ваш код будет скопирован в Heroku и установлены необходимые зависимости, проект Gatsby нужно собрать и сохранить в статической папке /public. Поэтому добавьте скрипт сборника в свой package.json файл:
{     // ...
     scripts: {         // ...
         “heroku-postbuild”: “gatsby build”
     },
     // ...}
  • Создайте файл под названием app.json в корневом каталоге вашего проекта. Этот файл содержит общую информацию, необходимую для запуска программы Heroku. В нашем случае мы снова заявляем об использовании двух сборников:
{
                "buildpacks": [
     { "url": "heroku/nodejs" },
     { "url": " }
    ]
}
  • Создайте файл под названием static.json в корневом каталоге вашего проекта. The static.json файл используется для конфигурации статического пакета сборки. Вы можете просмотреть дополнительные параметры конфигурации здесь. В этом случае мы определяем только папку нашей созданной программы:
{
    "root": "public/"
}
  • (Необязательно) Развертывание Heroku не удастся, если у вас есть a package-lock.json а также а yarn.lock файл в каталоге вашего проекта. Если это так, решите один. Например, удалить package-lock.json файл, если вы используете пряжу.

5.) Проверьте настройки

Поздравляю, почти сделано! ?

Теперь вы можете проверить свои настройки, внеся изменения с последнего шага в Github:

git add .git commit -m "Prepared Heroku deployment of Gatsby app"git push origin master

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

Спасибо, что прочли эту статью! Пожалуйста, оставьте вопросы или отзывы и подпишитесь на меня в Twitter, чтобы получить дополнительные публикации, связанные с JavaScript и React.

Добавить комментарий

Ваш адрес email не будет опубликован.