在Heroku上托管Angular2

Question

我無法找到關於如何在Heroku或任何其他托管服務提供商上托管angular2應用程序（希望使用Typescript）的教程。

理想情況下，我想找到一種在Heroku上運行此repo的方法，但是對Heroku上任何angular2 / typescript repo的指導都會有所幫助： https ： //github.com/auth0/angular2-authentication-sample

我們將非常感謝您提供的任何指導或建議

Answer 1

您將需要服務器應用程序/框架。

此存儲庫包含來自Express generator app和Quick-start Angular 2應用程序的文件。

• 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上的帳戶。 按原樣推送此代碼（在兩種情況下）。

---

來自Angular2的正式回購（服務器端渲染）Express： https ： //github.com/angular/universal-starter

Answer 2

如果您使用Heroku的Node buildpack，我相信您應該沒問題。 我能夠以這種方式將Angular 2種子項目部署到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. 使用以下代碼段將Procfile添加到/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文件夾。 我然后tarball整個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);
  }
});

4. 現在只需運行node deploy production ，它應該部署到heroku。

---

Heroku實驗構建包

剛從heroku那里得知他們正在研究一個實驗性的buildpack，它允許像這樣的靜態站點。 這是構建包的鏈接。