typescript 在 Heroku 上托管 Angular2

Hosting Angular2 on Heroku

提问by Benjamin McFerren

I am having trouble finding a tutorial on how to host an angular2 application (hopefully with Typescript) on Heroku or any other hosting provider for that matter.

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

Ideally, I'd like to find a way to run this repo on Heroku but guidance on any angular2/typescript repo on Heroku would be helpful: https://github.com/auth0/angular2-authentication-sample

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

Any guidance or advise you can offer would be greatly appreciated

您可以提供的任何指导或建议将不胜感激

回答by Vlado Tesanovic

You will need server app/framework for that.

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

This repository contains files from Express generator app and Quick-start Angular 2 app.

此存储库包含来自 Express 生成器应用程序和 Quick-start Angular 2 应用程序的文件。

• Git: https://github.com/vladotesanovic/angular2-express-slim
• Heroku demo: https://express-angular2-slim.herokuapp.com/

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

---

---

I have one other example that is also ready for Heroku: express + angular 2 + Procfile ( needed by the Heroku ) + other libraries

我还有一个同样适用于 Heroku 的示例：express + angular 2 + Procfile（Heroku 需要）+ 其他库

• Git: https://github.com/vladotesanovic/angular2-express-starter
• Heroku demo: https://github.com/vladotesanovic/angular2-express-starter

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

You need an account on Heroku. Push this code as-is ( in both cases ).

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

---

---

Official repo from Angular2 ( server side rendering ) on Express: https://github.com/angular/universal-starter

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

回答by Jason Swett

If you use Heroku's Node buildpack, I believe you should be fine. I was able to deploy the Angular 2 seedproject to Heroku this way.

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

If you want to deploy a real, full-blown web application using Angular 2, you will almost certainly need some sort of persistence layer, like Vlado mentioned.

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

If you're interested in deploying Angular 2 to Heroku with Rails, here's a tutorial for that. https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/

如果您有兴趣使用 Rails 将 Angular 2 部署到 Heroku，这里有一个教程。https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/

回答by Vassiliy Pimkin

Since Angular 2 moved from systemjsto webpack, in order to deploy app to Heroku you can build it with Node.js buildpack then serve it with static buildpack.

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

Here's my version of today's (Oct 24, 2016) Angular 2 seed made ready to deploy to Heroku using this approach: heroku-angular2-seed.

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

回答by KevinM

Ok I came up with a solution. I had to add a very basic PHP backend, but it's pretty harmless. Below is my process.

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

First setup a heroku app and Angular 2 app.

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

1. Create your heroku app
2. Set the heroku buildpack to heroku/php
   • heroku buildpacks:set heroku/php --app heroku-app-name
3. Create a project via Angular-Cli

4. Add a index.php file to /scrwith the below snippet

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

5. Add a Procfile to /scrwith the below snippet

   web: vendor/bin/heroku-php-apache2

6. Added /deployto the .gitignore

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

4. /scr使用以下代码段添加一个 index.php 文件

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

5. /scr使用以下代码段添加 Procfile

   web: vendor/bin/heroku-php-apache2

6. 添加/deploy到 .gitignore

Now I used a npm package to push a tarballs to heroku

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

1. Here's a simple package to upload the tarball, https://www.npmjs.com/package/heroku-deploy-tarball
   • npm i heroku-deploy-tarball --save
2. I'm also using tar.gz to create the tarball
   • npm i tar.gz --save
3. Then I created the deploy.jsfile at the root of my projecdt with the following code. I first run the buildCommand specified and then move the index.php and Profile to the dist folder. I then tarball the entire dist folder and it gets uploaded to 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. 然后我deploy.js使用以下代码在我的项目的根目录创建了该文件。我首先运行指定的 buildCommand，然后将 index.php 和 Profile 移动到 dist 文件夹。然后我将整个 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. Now just run node deploy productionand it should deploy to heroku.

4. 现在只需运行node deploy production，它应该部署到 heroku。

---

---

Heroku experimental build pack

Heroku 实验构建包

Just got word from heroku that they are working on an experimental buildpack that would allow for static sites like this. Here is the link to the build pack.

刚刚从 heroku 那里得到消息，他们正在开发一个实验性的 buildpack，它将允许像这样的静态站点。 这是构建包的链接。