Учебник по развертыванию сборки Parcel на Heroku.

В этой статье рассказывается, как развернуть сборку Parcel на Heroku.

Посылка

Если у вас есть приложение Parcel:

  • образец посылки


GitHub – замечательное пометка/parcel-example: пример веб-приложения Parcel
На основе руководства «Создание веб-приложения с помощью Parcel. Клонируйте репозиторий: git clone…github.com»



  • посылка-машинопись-пример


GitHub — замечательный знак/parcel-typescript-example: пример Parcel TypeScript
Пример Parcel TypeScript. Клонируйте репозиторий: git clone…github.com



  • реагировать-машинописный-шаблон посылки


GitHub - Nearablemark/react-typescript-parcel-template: шаблон React TypeScript Parcel
React TypeScript Parcel template. Клонируйте репозиторий: git clone…github.com



Убедитесь, что в вашем package.json есть build скрипт:

Heroku запускает скрипт build, если он существует во время развертывания.

Служить

Установите serve для обслуживания статического сайта:

npm install serve

Создайте стартовый скрипт в package.json:

Или создайте Procfile для обслуживания каталога вашего проекта:

echo 'web: npx serve' > Procfile

Heroku определяет, как запустить ваше приложение, ища Procfile или стартовый скрипт.

Затем создайте serve.json, чтобы статический сайт и маршруты обслуживались правильно:

touch serve.json

Зафиксируйте и нажмите ваш репозиторий.

Устаревший

Добавьте сборки Heroku по порядку:

  1. героку/узлы
  2. heroku-buildpack-static (устарело)

Сборочный пакет Node.js должен предшествовать статическому сборочному пакету, поскольку сайт должен быть создан до того, как его можно будет обслуживать.

Сборочные пакеты можно добавить через интерфейс командной строки Heroku:

Замените <MY_APP_NAME> названием вашего приложения Heroku.

Или их можно добавить с помощью app.json:

Создайте static.json:

touch static.json

И настройте параметры для вашего статического приложения:

Нажмите и разверните приложение Heroku. Журнал сборки должен выглядеть так:

-----> Building on the Heroku-20 stack
-----> Using buildpacks:
       1. heroku/nodejs
       2. https://github.com/heroku/heroku-buildpack-static
-----> Node.js app detected
-----> Creating runtime environment
-----> Installing binaries
-----> Restoring cache
-----> Installing dependencies
-----> Build
-----> Pruning devDependencies
-----> Caching build
-----> Build succeeded!
-----> Static HTML app detected
-----> Installed nginx 1.19.0 to /app/bin
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
-----> Launching...
       Released v1
       https://myappname.herokuapp.com/ deployed to Heroku

Нет необходимости в Procfile, так как Heroku автоматически создает dyno для вашего статического приложения:

web bin/boot

Эта статья была первоначально опубликована на remarkablemark.org 16 марта 2022 г.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.