将 Angular 2 应用程序部署到 Heroku答案

【问题标题】：Deploy Angular 2 app to Heroku将 Angular 2 应用程序部署到 Heroku
【发布时间】：2017-01-31 06:01:24
【问题描述】：

过去，我总是将 Angular 1 和 Rails 应用程序捆绑在一起，并且通常使用 heroku，这对我来说非常有用。现在我已经完成了 Angular 2，我想分离出我的 Angular 和 Rails 代码。我已经通过 Angular-Cli 创建了一个非常基本的 Angular 2 应用程序，但我无法弄清楚如何将它部署到 Heroku。我没有使用 expressjs 或类似的东西。有人想通了吗？

【问题讨论】：

我认为您遇到的问题已在此线程中讨论。如果您没有 Heroku 支持的后端，那么您可能无法自行部署它。 github.com/angular/angular-cli/issues/326
是的，你是对的。实际上，我只是通过使用不同的基本 PHP 后端想出了一个解决方案。认为它不是100％顺利。我将发布答案，我希望有人能帮助我弄清楚如何让 Angular-Cli 将 .php 文件和 Procfile 从 scr 移动到 dist。

标签： ruby-on-rails angularjs node.js heroku angular

【解决方案1】：

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

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

创建您的 Heroku 应用
将heroku buildpack 设置为heroku/php
- heroku buildpacks:set heroku/php --app heroku-app-name
通过 Angular-Cli 创建项目
使用下面的 sn-p 将 index.php 文件添加到 /scr

<?php include_once("index.html"); ?>
使用下面的 sn-p 将 Procfile 添加到 /scr

web: vendor/bin/heroku-php-apache2
在 .gitignore 中添加了 /deploy

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

这是一个简单的上传压缩包的包，https://www.npmjs.com/package/heroku-deploy-tarball
- npm i heroku-deploy-tarball --save
我也在使用 tar.gz 创建压缩包
- npm i tar.gz --save
然后我使用以下代码在我的项目根目录下创建了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);
  }
});

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

编辑

刚刚从 heroku 那里得到消息，他们正在开发一个实验性的 buildpack，它允许像这样的静态站点。 Here is the link to the build pack.

【讨论】：