Подтвердить что ты не робот

Хостинг Angular2 на Heroku

У меня возникли проблемы с поиском учебника о том, как разместить приложение angular2 (надеюсь, с Typescript) на Heroku или любом другом хостинг-провайдере.

В идеале, я хотел бы найти способ запустить это репо на Heroku, но было бы полезно руководство по любому репозиторию angular2/​​typescript на Heroku: https://github.com/auth0/angular2-authentication-sample

Любые рекомендации или рекомендации, которые вы можете предложить, будут очень признательны

4b9b3361

ОТВЕТЫ

Ответ 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
    • npm i tar.gz --save
  • Затем я создал файл 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);
  }
});
  1. Теперь просто запустите node deploy production, и он должен быть развернут в heroku.

Экспериментальный сборник Heroku

Просто получил слово от heroku, что они работают над экспериментальным buildpack, который позволит использовать такие статические сайты. Вот ссылка на сборку.