将Angular 2应用程序部署到Heroku

时间:2016-09-22 15:10:49

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

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

1 个答案:

答案 0 :(得分: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
  7. 现在我使用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。
    4. 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。
      2. 修改

        刚从heroku那里得知他们正在研究一个允许像这样的静态网站的实验性构建包。 Here is the link to the build pack.