Gulp将Node应用程序的dist文件夹部署到Heroku

Question

我是node，git，github和Heroku的新手，我正在努力找出将我的应用程序发送到Heroku的最佳方式，而不会使用我编译的缩小应用程序混乱使用repo在Heroku做太多。

我的node.js项目看起来有点像这样：

- client
     ... code
- server
     ... code
- node_modules
- package.json
- gulpfile.js
- dist
    - client
    - server

除node_modules和dist之外的所有内容都会进入github。

gulpfile在dist中编译，缩小并连接准备发布的所有内容。 如何只将dist文件夹推送到Heroku，而不将其放入github？什么是最佳做法？我不想将我的gulpfile发送到Heroku，因为这意味着在package.json中移动devDependencies并使用post更新脚本，因为它将项目与Heroku联系起来比我更喜欢。

在这两个帖子中总结了不使用帖子钩子的原因：https://stackoverflow.com/a/15050864/344022＆amp; https://stackoverflow.com/a/21056644/344022，遗憾的是，他们没有提供易于理解的替代方案。

Answer 1

Heroku现在在开发中有一个静态buildpack来处理这个问题（参见https://github.com/heroku/heroku-buildpack-static）

创建一个static.json文件以使用dist / with .html后缀中的文件并将所有调用重新路由回SPA

{
  "root": "dist/",
  "clean_urls": true,
  "routes": {
      "/**": "index.html"
  }
}

扩展package.json脚本以确保构建dist /目录，例如

"scripts": {
  ...
  "heroku-postbuild": "gulp"
}

以便安装package.json中的dev依赖项

heroku config:set NPM_CONFIG_PRODUCTION=false --app

多个构建包，以便您可以构建和部署

heroku buildpacks:add heroku/nodejs --app <app_name>
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git --app <app_name>

在这种情况下，您的procfile可以为空。

Answer 2

继续，在heroku上设置一个帖子钩子，构建你的app并将文件复制到他们将要服务的位置。这是一种相当普通的做法，一旦设置完毕，您需要做的就是使用git push来部署您的应用程序，这非常方便。另一种方法是拥有一个单独的存储库，您可以手动将文件复制到其中并从中推送，但这对我来说似乎不太明显，通过搞乱依赖关系或者忘记删除生成的文件而导致人为错误的可能性更大不再需要等等。

Answer 3

我有同样的问题，只将dist文件夹推送到heroku应用程序，现在我正在使用不同的方法，不确定闲置的，但它适用于我。我创建了一个部署文件并添加了以下代码

  import {spawnSync} from 'child_process';

  function deploy(){ 
    options = {
      cwd: path.resolve(__dirname, './dist')
    };
    //push dist folder to deploy repo
    console.log('Initialising Repository');
    spawnSync('git',['init'],options);
    console.log('Adding remote url');
    spawnSync('git',['remote','add', remote.name, remote.gitPath],options)
    console.log('Add all files');
    spawnSync('git',['add','.','--all'],options)
    console.log(`Commit with v${version}`);
    spawnSync('git', ['commit','-m',`v${version}`], options)
    console.log('Push the changes to repo');
    spawnSync('git', ['push', '-f', remote.name, 'master'],options)
 }

在package.json中保留repo iformation并在此处阅读，我在webpack构建任务之后运行它。所以这将把我的新版本推送到heroku。即使dist中的.git被删除，它也会处理它。