Статьи

Развертывание приложения Yeoman / Angular в Heroku

Август 17, 2018

Итак, вы использовали Yeoman для запуска своего приложения AngularJS , и теперь вы готовы показать его всему миру?

Ну, вы можете, развернув его на Heroku!

Предпосылки

Чтобы получить максимальную отдачу от этого урока, мы рекомендуем иметь следующие доступные навыки и ресурсы:

файлы

Вы можете найти репозиторий этого учебного проекта здесь .

Давайте покажем ваше приложение миру!

Пакеты узлов

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

Мы собираемся использовать Node для обслуживания нашего статического сайта всего несколькими файлами и изменениями. Сначала давайте установим необходимые зависимости для развертывания в Heroku. 

npm install gzippo express --save

Gzippo позволяет нам обслуживать сжатые ресурсы, а Express — это простая прикладная среда для Node, которая немного облегчит обслуживание нашего сайта.

Файл сервера

Нам нужно создать файл сервера: web.js. Мы поместим это в наш корневой каталог

/web.js 

 var gzippo = require('gzippo');
  var express = require('express');
  var app = express();
 
  app.use(express.logger('dev'));
  app.use(gzippo.staticGzip("" + __dirname + "/dist"));
  app.listen(process.env.PORT || 5000);

Это все, что нам нужно для обслуживания нашего сайта.

Каталог dist

Обратите внимание, что наш сервер обслуживает каталог / dist. Если вы не видите каталог / dist, это потому, что мы еще не создали наше приложение. 

 grunt build

Это скомпилирует все и даст вам хороший чистый каталог dist /, готовый для обслуживания. Разве это не фантастика?

Важный
Стоит отметить, что каталог dist / по умолчанию игнорируется git (они предполагают, что вы хотите контролировать только версию проекта разработки, а не скомпилированное приложение). Поскольку Heroku использует git для развертывания, нам нужно удалить dist / from .gitignore, чтобы убедиться, что он зафиксирован.

Heroku

Теперь давайте добавим Procfile, также в корне. Procfile сообщает Heroku, как запустить наше приложение. В этом случае мы говорим использовать NodeJS для запуска файла нашего сервера web.js.

/ PROCFILE 

 web: node web.js

Правильно! Это момент истины! Давайте развернемся в Heroku! Сначала давайте превратим наш каталог проектов в git-репо 

 git init

Если у вас есть учетная запись Heroku и у вас установлен Heroku Toolbelt, просто запустите: 

 heroku create <your_app_name>

Теперь зафиксируйте свой код и разверните его, нажав на Heroku! 

 git add .
  git commit -m "Initial Commit"
  git push heroku master

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

 heroku ps:scale web=1

Чтобы открыть свое приложение на Heroku и поразиться своим достижениям, запустите: 

 heroku open

Дайте мне знать в комментариях, если вы хотите, чтобы я больше писал о работе с Angular.

37
Share: