在Heroku上托管Angular2

Question

我无法找到关于如何在Heroku或任何其他托管服务提供商上托管angular2应用程序（希望使用Typescript）的教程。

理想情况下，我想找到一种在Heroku上运行此回购的方法，但对Heroku上任何angular2 / typescript回购的指导都会有所帮助：https://github.com/auth0/angular2-authentication-sample

非常感谢您提供的任何指导或建议

Answer 1

您将需要服务器应用程序/框架。

此存储库包含来自Express generator app和Quick-start Angular 2 app的文件。

• Git：https://github.com/vladotesanovic/angular2-express-slim
• Heroku演示：https://express-angular2-slim.herokuapp.com/

我还有另外一个也可以用于Heroku的例子：express + angular 2 + Procfile（Heroku需要）+其他库

• Git：https://github.com/vladotesanovic/angular2-express-starter
• Heroku演示：https://github.com/vladotesanovic/angular2-express-starter

您需要Heroku上的帐户。按原样推送此代码（在两种情况下）。

Express上Angular2（服务器端渲染）的官方回购： https://github.com/angular/universal-starter

Answer 2

如果你使用Heroku的Node buildpack，我相信你应该没问题。我能够以这种方式将Angular 2 seed项目部署到Heroku。

如果你想使用Angular 2部署一个真正的，完整的Web应用程序，你几乎肯定需要某种持久层，就像Vlado提到的那样。

如果您对使用Rails将Angular 2部署到Heroku感兴趣，可以参考这个教程。 https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/

Answer 3

由于Angular 2从systemjs移动到webpack，为了将应用程序部署到Heroku，您可以使用Node.js buildpack构建它，然后使用静态buildpack提供它。

这是我今天的版本（2016年10月24日）Angular 2种子已经准备好使用这种方法部署到Heroku：heroku-angular2-seed。

Answer 4

好的我想出了一个解决方案。我不得不添加一个非常基本的PHP后端，但它非常无害。以下是我的流程。

首先设置一个heroku应用程序和Angular 2应用程序。

1. 创建您的heroku应用
2. 将heroku buildpack设置为heroku / php
   • heroku buildpacks:set heroku/php --app heroku-app-name
3. 通过Angular-Cli创建项目

4. 使用以下代码段

   将index.php文件添加到/scr

   <?php include_once("index.html"); ?>

5. 使用以下代码段

   将Proc文件添加到/scr

   web: vendor/bin/heroku-php-apache2

6. 将/deploy添加到.gitignore

现在我使用npm包将tarball推送到heroku

1. 这是一个上传tarball的简单包，https://www.npmjs.com/package/heroku-deploy-tarball
   • npm i heroku-deploy-tarball --save
2. 我也使用tar.gz来创建tarball
   • npm i tar.gz --save
3. 然后我使用以下代码在我的projecdt的根目录下创建了deploy.js文件。我首先运行指定的buildCommand，然后将index.php和Profile移动到dist文件夹。我然后tar整个dist文件夹，它上传到heroku。

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那里得知他们正在研究一个允许像这样的静态网站的实验性构建包。 Here is the link to the build pack.