Хостинг Angular2 на Heroku
У меня возникли проблемы с поиском учебника о том, как разместить приложение angular2 (надеюсь, с Typescript) на Heroku или любом другом хостинг-провайдере.
В идеале, я хотел бы найти способ запустить это репо на Heroku, но было бы полезно руководство по любому репозиторию angular2/typescript на Heroku: https://github.com/auth0/angular2-authentication-sample
Любые рекомендации или рекомендации, которые вы можете предложить, будут очень признательны
Ответы
Ответ 1
Для этого вам понадобится серверное приложение/фреймворк.
Этот репозиторий содержит файлы из приложения-генератора Express и Quick-start Angular 2 приложения.
У меня есть еще один пример, который также готов для Heroku: express + Angular 2 + Procfile (требуется Heroku) + другие библиотеки
Вам нужна учетная запись на Heroku. Нажимайте этот код как есть (в обоих случаях).
Официальное репо из Angular2 (рендеринг на стороне сервера) в Express:
https://github.com/angular/universal-starter
Ответ 2
Если вы используете Heroku Node buildpack, я считаю, что все должно быть в порядке. Мне удалось развернуть проект Angular 2 seed для Heroku таким образом.
Если вы хотите развернуть реальное полномасштабное веб-приложение с помощью Angular 2, вам почти наверняка понадобится какой-то упорный уровень, например, упомянутый Владо.
Если вы заинтересованы в развертывании Angular 2 в Heroku с Rails, вот вам учебник. https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/
Ответ 3
Так как Angular 2 переместился с systemjs
на webpack
, чтобы развернуть приложение в Heroku, вы можете его построить с помощью Node.js buildpack, а затем выполнить его со статическим buildpack.
Здесь моя версия сегодняшнего дня (24 октября 2016 г.) Angular 2 семян готова к развертыванию в Heroku с использованием этого подхода: heroku-angular2-seed.
Ответ 4
Хорошо, я придумал решение. Мне пришлось добавить очень простой PHP-сервер, но он довольно безвреден. Ниже мой процесс.
Сначала настройте приложение heroku и приложение Angular 2.
- Создайте приложение heroku
- Установите геройку buildpack в герою /php
-
heroku buildpacks:set heroku/php --app heroku-app-name
- Создайте проект через Angular -Cli
-
Добавьте файл index.php в /scr
с помощью нижеприведенного фрагмента
<?php include_once("index.html"); ?>
-
Добавьте Procfile в /scr
с помощью нижеприведенного фрагмента
web: vendor/bin/heroku-php-apache2
- Добавлен
/deploy
в .gitignore
Теперь я использовал пакет npm, чтобы нажимать tarballs на heroku
- Вот простой пакет для загрузки tarball, https://www.npmjs.com/package/heroku-deploy-tarball
-
npm i heroku-deploy-tarball --save
- Я также использую tar.gz для создания tarball
- Затем я создал файл
deploy.js
в корне моего projecdt с помощью следующего кода. Сначала я запускаю указанную команду buildCommand, а затем перемещаю index.php и Profile в папку dist. Затем я архивирую всю папку dist и загружаюсь в герою.
var deploy = require('heroku-deploy-tarball');
var targz = require('tar.gz');
var exec = require('child_process').exec;
var requestedTarget = process.argv[2];
if (!requestedTarget) {
console.log('You must specify a deploy target');
return;
}
var targets = {
production: {
app: 'heroku-app-name',
tarball: 'deploy/build.tar.gz',
buildCommand: 'ng build --prod'
}
}
var moveCompressFiles = function (callback) {
exec('cp ./src/index.php ./dist/index.php',
function(err) {
if(err)
console.log(err);
console.log('index.php was copied.');
});
exec('cp ./src/Procfile ./dist/Procfile',
function(err) {
if(err)
console.log(err);
console.log('Procfile was copied.');
});
new targz().compress('./dist', './deploy/build.tar.gz',
function(err){
if(err)
console.log(err);
else
callback();
console.log('The compression has ended!');
});
}
console.log('Starting ' + targets[requestedTarget].buildCommand);
exec(targets[requestedTarget].buildCommand, {maxBuffer: 1024 * 500}, function(error) {
if (!error) {
console.log(targets[requestedTarget].buildCommand + ' successful!');
moveCompressFiles(function () {
deploy(targets[requestedTarget]);
});
} else {
console.log(targets[requestedTarget].buildCommand + ' failed.', error);
}
});
- Теперь просто запустите
node deploy production
, и он должен быть развернут в heroku.
Экспериментальный сборник Heroku
Просто получил слово от heroku, что они работают над экспериментальным buildpack, который позволит использовать такие статические сайты. Вот ссылка на сборку.